Animated React button components
Magnetic button
A button that leans toward your cursor on a spring. The label pulls a little further, and a soft light follows the pointer across it.
Buttons, magnetic cursor, Motion
Install
npm i clsx motion tailwind-merge && curl -o components/magnetic-button.tsx https://motion-brew.com/r/magnetic-button.tsxOne self contained file for React and Tailwind CSS: magnetic-button.tsx. Or ask your AI agent to add it through the MCP server.
Usage
import { ArrowRight } from "lucide-react";
import { MagneticButton } from "@/components/magnetic-button";
export default function Page() {
return (
<MagneticButton size="lg" strength={0.35}>
Get started <ArrowRight className="size-4" />
</MagneticButton>
);
}Props
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
| variant | "solid" \ | "outline" \ | "ghost" | "solid" | Visual style |
| size | "sm" \ | "md" \ | "lg" | "md" | Height and padding |
| strength | number | 0.3 | How far the button follows the cursor | ||
| labelStrength | number | 0.15 | Extra pull on the label | ||
| spring | SpringOptions | { stiffness: 400, damping: 25, mass: 0.6 } | Pull and snap back | ||
| spotlight | boolean | true | Cursor spotlight on the surface | ||
| href | string | Render as a link to this address instead of a button | |||
| target | string | With href, like "_blank" | |||
| rel | string | "noopener noreferrer" for a new tab | With href |
More buttons
- Hold to confirm: Hold to fill, let go to cancel.
- Bell toggle: A pill toggle where a press rings the bell, crossfades the label and unfurls the pill.
- Slide commit: Slide to confirm: drag the handle past the line and it commits with a spinner and a green check; let go early and it springs home.
- Download button: A download pill whose page icon fills up like liquid as the percentage counts, while a waving fill sweeps across, then a check lands on the page.