Tilt Card
A 3D card that tilts toward the pointer with a glare highlight and eases back on leave.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
TiltCardProps
Also accepts all props of React.ComponentProps<"div">
| Prop | Type | Default | Description |
|---|---|---|---|
| maxTilt | number | 12 | Maximum rotation in degrees |
| perspective | number | 900 | CSS perspective distance in px |
| scale | number | 1.03 | Scale while the pointer is over the card |
| glare | boolean | true | Show a glare highlight that follows the pointer |
| glareOpacity | number | 0.35 | Peak opacity of the glare, 0 to 1 |
Install
$ npx shadcn@latest add https://chromotion.dev/r/tilt-card.json