Tilt Card
3D perspective tilt that tracks the cursor.
- 0.7 KB gzipped
- Deps: motion/react
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Live workshop
Motion for product teams
Springs, layout animation and reduced motion in two hours.
Thu, 14:00 UTC12 seats left
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/tilt-card.jsonAdds components/velora/tilt-card.tsx, installs motion.
Props
| Prop | Type | Default |
|---|---|---|
children* | React.ReactNode | — |
className | string | — |
maxTiltMaximum tilt in degrees | number | 8 |
Accessibility
- Reduced motion
- The card never tilts; it stays flat while the pointer moves over it.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- A transparent wrapper; only the children are read.