Magnetic
A magnetic effect for elements that allows them to be attracted to the mouse cursor.
Examples
Magnetic Basic
Magnetic Nested
You can nest the Magnetic component to create a more complex effect. Here we use actionArea='global' to make the magnetic effect apply to the global area. We also use custom range to make the magnetic effect apply to a larger area.
Installation
npx shadcn add "https://motion-primitives.com/c/magnetic.json"Component API
Magnetic
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | The child elements to be displayed within the magnetic effect. | |
| intensity | number | 0.6 | The strength of the magnetic effect, scaling the distance effect. |
| range | number | 100 | The effective range in pixels within which the magnetic effect is applied. |
| actionArea | 'self' | 'parent' | 'global' | 'self' | Determines whether the magnetic effect is triggered by the component, its parent, or globally. |
| springOptions | SpringOptions | SPRING_CONFIG | The spring options to be used for the magnetic effect. |