Installation
pnpm dlx rareui add word-magnet
Usage
1
Basic Usage
Example
import WordMagnet from '@/components/ui/word-magnet';
export default function Hero() {
return (
<WordMagnet
text="Interactive Floating Text"
className="text-4xl font-bold"
/>
);
}2
Adjusting Physics
Control the radius and force of repulsion.
Example
<WordMagnet
text="Strong Repulsion"
radius={200}
force={0.8}
returnDelay={100}
/>Features
Seamlessly integrated and optimized for high-performance React applications.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | "Hover over me..." | The text content to check for interactions. |
radius | number | 130 | Distance in pixels where the repulsion effect starts. |
force | number | 0.45 | Strength of the repulsion (0-1). |
damping | number | 28 | Resistance to motion for the spring animation. |
returnDelay | number | 400 | Delay in ms before words return to original position. |
disableOnMobile | boolean | false | Whether to disable interactions on mobile devices. |