TiltCard

Card with 3D perspective tilt that follows the cursor.

stable display #motion#hover#interactive

Hover me

Tilt on hover

Loading preview…

Usage

Use for featured cards, hero content, or any grid where you want a subtle liveliness without overdoing motion. Works best on larger card surfaces where the tilt arc is perceptible but not disorienting. - **Not** for small icon buttons or tight list items — the effect reads as jitter below ~200px width. - **Not** inside scrolling containers where the user's cursor sweeps the card quickly.

Do / Don't

- **Do** keep `maxTiltDeg` at 10° or below for readability — text shifts noticeably past 15°. - **Do** pair with a subtle border and elevated background so the 3D lift has contrast. - **Don't** stack multiple TiltCards in a tight grid — competing tilts look chaotic. - **Don't** put interactive inputs inside a TiltCard — the perspective transform makes focus rings appear to float.

Tokens

A11y

Respects prefers-reduced-motion — tilt effect disables. Hover-only, doesn't interfere with keyboard navigation.

Source

src/components/TiltCard.tsx

Live playground