Word Magnet · Free Interactions 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.
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.
