Magnet Lines

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.

Features & Controls

• 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.

Best Uses

• 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

Why it’s great

• 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