← Back to catalog📄 Implementation guide
Motion / Interaction

Magnetic Hover Effect

Pulls buttons or links toward the cursor for a responsive magnetic feel.

Premium, interactive, modern

Professional
Casual
Exotic
Visual impact
Difficulty
Performance cost

Best use: CTAs, navigation, portfolio links

Magnetic design studio

Creative work with real pull.

Ferro builds interfaces people can’t stop touching. Move your cursor near anything below — it leans in, then springs back.

Technique: on pointermove, set transform: translate() to a fraction of the cursor-to-center offset; on pointerleave clear it so a springy CSS transition eases it back