Components
Magnet Lines
An interactive grid of lines responds to cursor movement, creating a magnetic field effect. Each line smoothly rotates to follow the cursor position, resulting in a dynamic and engaging visual pattern.
Features: • Interactive cursor tracking • Smooth line rotations • Customizable grid dimensions • Flexible sizing options • Performance optimization • Responsive design • Custom styling support • Dynamic angle calculations • Hardware-accelerated animations • Configurable initial state
import { MagnetLines } from "@/components/ui/magnet-lines"
function MagnetLinesDemo() {
return (
<MagnetLines
rows={9}
columns={9}
containerSize="60vmin"
lineColor="tomato"
lineWidth="0.8vmin"
lineHeight="5vmin"
baseAngle={0}
style={{ margin: "2rem auto" }}
/>
)
}
export { MagnetLinesDemo };