Word Magnet

The Word Magnet component transforms static text into an interactive experience where each word behaves like a magnetic object.

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.