Word Magnet

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.