Magnetic Lines

Interactive Magnetic Lines

Lines seamlessly react, twist, and bend away from (or toward) your visitor's cursor, creating an organic, magnetic ripple effect that instantly elevates any landing page, hero section, or portfolio. Built entirely on HTML5 Canvas for ultra-smooth performance, this component is fully responsive and completely customizable right from the Framer sidebar. Key Features Magnetic Physics Interaction: Choose between Repel (push away) or Attract (pull toward) modes to guide user attention. Organic Distortion Noise: Add built-in noise parameters to make the lines waver and ripple naturally, even when the mouse is still. Fully Custom Styles: Instantly switch between Solid, Dashed, and Dotted line structures to match your brand language. Framer Color Token Support: Supports your native project light/dark mode color palettes flawlessly. High Performance Easing: Implements intelligent coordinate caching and squared-distance math to ensure a locked-in 60FPS fluid motion without draining CPU. Canvas-Ready Responsiveness: Fully optimized with an internal ResizeObserver so it scales fluidly on preview, mobile, live sites, and directly inside your Framer design canvas.

Interactive Magnetic Lines