Animations & Motion
Magnetic Hover
Variable font weight responds to mouse proximity creating magnetic effect.
textanimationmagnetichoverinteractive
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
text | string | MAGNETIC | Text to display |
backgroundColor | string | bg-zinc-950 | Background color of the component |
textSize | string | text-8xl | Size of the text |
maxWeight | number | 900 | Maximum font weight |
minWeight | number | 100 | Minimum font weight |
maxWidth | number | 1.5 | Maximum scale width |
minWidth | number | 1 | Minimum scale width |
activeColor | string | #ffffff | Color when active |
inactiveColor | string | #52525b | Color when inactive |
distanceRange | [number, number] | [0, 300] | Distance range for transformation |
colorRange | [number, number] | [0, 200] | Color range for transformation |
gap | string | gap-2 | Gap between characters |
className | string | Additional CSS classes |