FX · Interactions

Pulls a button or link a little toward the pointer.

bash
npx shadcn@latest add https://www.rad-ui.com/r/magnetic.json
React
import Magnetic from "@/components/fx/magnetic" <Magnetic><button>Get started</button></Magnetic>
  • Wraps the child in a span instead of cloning it, so the child keeps its role, props, ref and focus.
  • Keyboard focus and activation are unaffected.
  • Touch input never moves it.
  • prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) disables the pull.
PropTypeDefaultDescription
children
ReactNode
—

Usually a button or link. It keeps its own semantics.

strength
number
0.3

How far it follows the pointer, 0–1.