Magnetic
A magnetic effect that attracts elements to the mouse cursor.
Hover nearby to see the effect
Installation
npx shadcn-vue@latest add https://raya-ui.com/registry/magnetic.jsonExamples
Social Links
Common use case for magnetic buttons in footers or headers.
Parent Action Area
Set action-area="parent" to trigger the effect whenever the mouse is inside the parent container, not just the element itself.
Parent Container
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| intensity | number | 0.6 | Strength of the attraction (0-1 recommended). |
| range | number | 100 | Pixel radius around the element where the effect is active. |
| actionArea | 'self' | 'parent' | 'global' | 'self' | Defines the hover trigger area. 'self' (default), 'parent' (container), or 'global' (always active). |
| springOptions | SpringOptions | ... | Physics configuration (stiffness, damping, mass). |
Vue component created & ported by the author of Raya UI.
Original concept by Motion Primitives