Overview
WordMagnet tracks mouse position across the entire window and applies a repulsion force to each word within a configurable radius. Words spring away from the cursor in real time using Framer Motion’s useSpring, then snap back after a configurable delay — creating a magnetic field effect over a block of text.
Installation
Requires
framer-motion as a peer dependency.Usage
Props
string
default:"Hover over these words and watch them dance"
The text content to display. Whitespace-delimited words are each independently tracked and displaced.
number
default:"130"
Interaction radius in pixels. Words within this distance from the cursor are repelled.
number
default:"0.45"
Repulsion force multiplier between
0.1 and 1.0. Higher values push words further away from the cursor.number
default:"28"
Spring damping value between
5 and 50. Lower values produce bouncier return-to-rest behavior.number
default:"400"
Delay in milliseconds before a word springs back to its original position after the cursor moves away.
string
default:"#000000"
CSS color value for the text. Accepts any valid CSS color string.
React.CSSProperties
A React
CSSProperties object controlling font styling. Overrides font size, weight, letter spacing, and line height.boolean
default:"false"
When
true, the repulsion interaction is disabled on touch devices (viewport width under 768px or ontouchstart present). Words render as static text.visible | hidden | scroll | auto
default:"visible"
CSS
overflow property for the container. Use "hidden" if the repulsion effect should be clipped to the container bounds.string
Additional Tailwind or CSS classes applied to the container.
React.CSSProperties
Inline styles applied to the container. Merged with the font and overflow props.
Examples
Basic usage
Aggressive repulsion
Mobile-safe hero headline
Features
Physics Repulsion
Per-word spring displacement calculated from cursor distance and angle using real vector math.
Smart Recovery
Words spring back to their original positions after a configurable delay once the cursor moves away.
Throttled Mouse Tracking
Mouse events are throttled to ~60fps using a timestamp check, keeping CPU usage minimal.
Mobile Aware
The
disableOnMobile prop gracefully degrades the interaction on touch devices.