127 Components
Magnetic Button
ButtonsTactile button with dual-layer spring attraction that gravitates toward the pointer with configurable mass, stiffness, and damping.
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/magnetic-button.json"
Props
TypeScript props supported by <MagneticButton />.
| Prop | Type | Default | Description |
|---|---|---|---|
| strength | number | 0.35 | Multiplier controlling how strongly the button gravitates toward the pointer (0.1 to 1.0). |
| stiffness | number | 180 | Spring stiffness coefficient controlling snap responsiveness. |
| damping | number | 15 | Oscillation damping coefficient preventing excessive bounce on pointer exit. |
| mass | number | 0.2 | Simulated physical mass of the button element. |
| variant | "primary" | "secondary" | "outline" | "glow" | "primary" | Visual surface treatment preset. |
| size | "sm" | "md" | "lg" | "md" | Padding, typography, and border-radius scale. |
Key Features
- Dual-layer spring solver displacing both button frame and inner label for realistic parallax depth.
- Zero React re-renders during pointer movement via Framer Motion MotionValues.
- Minimal monochrome surface variants supporting both light and dark modes.
Keyboard & Accessibility
- Renders a semantic native <button> element with full Enter and Space keyboard activation.
- High-contrast 2px focus-visible ring for keyboard navigation.
- Respects prefers-reduced-motion automatically via Framer Motion's useReducedMotion() hook.