A button whose content is magnetically pulled toward the cursor within a sensor range, springing back on exit.

staticLabel — label rides with the button, no parallax drift

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/magnetic-button.json"

MagneticButton wraps the button in an invisible sensor. As the pointer moves inside that area, the button spring-translates toward the cursor by strength, and the label drifts a little further for a layered, parallax feel. On exit both spring back to rest. The pull is disabled under prefers-reduced-motion.

Usage

tsx

import { MagneticButton } from "@/components/godui/magnetic-button";

tsx

<MagneticButton>Get started</MagneticButton>

Variants

tsx

<MagneticButton variant="default">Default</MagneticButton>
<MagneticButton variant="secondary">Secondary</MagneticButton>
<MagneticButton variant="outline">Outline</MagneticButton>

Sizes

Stronger pull and wider sensor

strength controls how far the button follows the cursor (0–1); range adds invisible padding so the pull engages before the pointer reaches the edge.

Keep the label centered

By default the label drifts a little further than the shell for parallax. Set staticLabel so the label rides with the button and stays centered — the whole button moves as one piece, with no drift.

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "outline"`	`"default"`	Visual style.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Padding and text size.
`strength`	`number`	`0.4`	How strongly the button follows the cursor (0–1).
`range`	`number`	`0`	Invisible sensor padding in px around the button.
`staticLabel`	`boolean`	`false`	Keep the label centered in the button (rides with the shell, no drift).

MagneticButton also forwards every standard <button> attribute to the element.

Magnetic Button