Skip to content

Magnetic Button

motion.dev

Leans toward the pointer from outside its edges, while the label lags behind.

Install

$ npx shadcn@latest add https://spotcheckui.com/r/magnetic-button.json

Also installs motion.

Usage

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

<MagneticButton variant="accent" onClick={startRun}>Start a run</MagneticButton>

The pull only happens with a mouse or trackpad, not on touch.

Props

  • variant"outline" | "ink" | "accent" | "ghost"Default ink
  • strengthnumberDefault 0.32How far the button leans, as a share of the pointer's distance.
  • labelStrengthnumberDefault 0.12How far the label leans, which should be less than `strength` so it lags.
  • onClickMouseEventHandler<HTMLButtonElement>Default —
  • disabledbooleanDefault —
  • classNamestringDefault —Added to the hover zone around the button.

Keyboard

EnterPress the button
SpacePress the button

Reduced motion

The button stays still.