MagneticButton
A container that translates toward the cursor when it enters the magnetic radius, creating a satisfying pull effect.
When to Use
- Call-to-action buttons that benefit from playful cursor interaction.
- Navigation items or social links on landing pages.
- Any interactive element where subtle magnetism adds delight without distraction.
API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| ChildContent | RenderFragment? | null | The element(s) that will be magnetically attracted. |
| Radius | int | 80 | Radius in px within which the magnet activates. |
| MaxTranslate | int | 20 | Maximum translation in px in any direction. |
| TransitionDuration | string | "300ms" | CSS transition duration for the settle-back animation. |