Word Magnet
A Word Magnet component that makes individual words dynamically repel from the cursor and smoothly return to place, creating an engaging, physics-based magnetic text effect.
Make it with Workshop
Build your own component with AI
About this Component
The Word Magnet component transforms static text into an interactive experience where each word behaves like a magnetic object. As you hover near the text, words gently repel away from the cursor based on proximity, then snap back to their original positions with natural spring-like motion. The effect is playful yet smooth, giving a lively, physics-driven feel while keeping each word’s structure intact.
You can fine-tune the magnetic behavior through customizable physics parameters:
Radius (50–300px): Adjusts how far the cursor’s influence reaches.
Force (0.1–1.0): Controls how strongly words are pushed away.
Damping (5–50): Defines the smoothness of the return animation.
Return Delay (0–1000ms): Sets how long before words snap back.
It includes full typography controls (font, size, weight, color, spacing, line height) and supports multi-line text with responsive wrapping. Layout modes such as fixed, auto, and fill ensure adaptability across different screen sizes.
Optimized for performance, the component uses pointer-event throttling (~60fps) and optional mobile disable to prevent jittery motion. It also gracefully degrades in static or thumbnail modes, maintaining legibility even without animations.
