Word Magnet
A text component where words are repelled by the cursor and snap back with physics-based animations.
Installation
pnpm dlx rareui add WordMagnet
Usage
1
Import the component
import WordMagnet from "@/components/rareui/Text Animation/WordMagnet";
2
Use in your application
export default function MyComponent() {
return (
<WordMagnet
text="Hover over these words and watch them dance across the screen with physics-based interaction"
/>
);
}
Features
Words are pushed away by the mouse cursor using spring physics.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Hover over..." | The text content to display |
radius | number | 130 | Interaction radius in pixels |
force | number | 0.45 | Repulsion force (0.1 to 1.0) |
damping | number | 28 | Spring damping (5 to 50) |
returnDelay | number | 400 | Delay before returning to original position in ms |
textColor | string | "#000000" | Text color |
font | object | { fontSize: '32px', ... } | Font styling object |
disableOnMobile | boolean | false | Disable interaction on mobile devices |
overflow | string | "visible" | CSS overflow property |
className | string | - | Additional class names |
style | object | - | Inline styles |