Tilt Card
.mdA card that tilts in 3D toward the pointer on a spring, with a glare that tracks the cursor and layers that float at different depths.
card3dtiltparallaxglarehoversprings
Installation
$npx shadcn@latest add @geturui/tilt-card
Usage
usage.tsx
1import { TiltCard, TiltCardLayer } from "@/components/ui/tilt-card";
2
3export function FeatureCard() {
4 return (
5 <TiltCard className="w-80" cardClassName="p-6">
6 <TiltCardLayer depth={40}>
7 <h3 className="text-2xl font-semibold">Motion that feels physical.</h3>
8 </TiltCardLayer>
9 <TiltCardLayer depth={16}>
10 <p className="text-ink-muted">Springs, layout morphs and gestures.</p>
11 </TiltCardLayer>
12 </TiltCard>
13 );
14}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
maxTilt | number | 12 | Maximum rotation on each axis, in degrees. |
scale | number | 1.02 | Scale while the pointer is over the card. |
perspective | number | 900 | CSS perspective in px. Lower is more dramatic. |
glare | boolean | true | Show the cursor-tracked glare highlight. |
glareOpacity | number | 0.16 | Peak opacity of the glare, 0–1. |
cardClassName | string | — | Classes for the inner card surface. Avoid overflow-hidden here when using TiltCardLayer. |
className | string | — | Classes for the outer wrapper that sets the perspective. |
TiltCardLayer depth | number | 30 | How far a layer floats above the card (translateZ, px). |
Accessibility
- Purely decorative motion: the card adds no roles and keeps its children's semantics and tab order.
- Under reduced motion the card stays flat and the glare is hidden.
- The glare layer is aria-hidden and ignores pointer events, so links and buttons inside stay clickable.