Magnetic Lines turns static layouts into motion-rich experiences. It generates a configurable matrix of lines, arrows, waves, zigzags, double lines, or tapered shapes that respond in real time to the user’s pointer or to an automated rotation mode. As the mouse moves, each element pivots like it’s magnetised, creating an engaging field-effect animation.
Fine-tune every detail directly in the Framer property panel
Choose the number of rows and columns
Set container size, base angle, line width, and height
Pick from multiple line types (rectangle, arrow, wave, zigzag, etc.)
Apply different patterns (solid, dashed, dotted, gradient)
Add an optional glow effect with adjustable colour, intensity, and radius
Enable auto-animation with controls for speed, direction (clockwise, counter-clockwise, random), and pause on hover.
Hero sections and landing page backgrounds
Section dividers or dynamic transitions
Interactive UI accents and decorative effects
Portfolio or gallery backgrounds
Loading or waiting screens
Brings a fresh, kinetic feel to your projects without extra code
All properties are exposed in Framer’s right panel for quick experimentation and customisation
Mohd Mehraj
