Tilt Button
A 3D button that tilts in perspective toward the cursor with a spring snap on press.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/tilt-button.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/tilt-button.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | Button label content. |
| variant | "default" | "accent" | "default" | Color scheme — default is neutral glass, accent is blue. |
| maxTilt | number | 12 | Maximum tilt angle in degrees. |
| perspective | number | 700 | CSS perspective distance in pixels. |
| className | string | — | Additional CSS classes. |