# Card Tilt Depth

> Wrap any card. Card Tilt Depth adds real depth: perspective tilt that follows the pointer and eases back to a resting pose, an extruded body with adjustable thickness, a bevelled rim, a soft shadow that travels opposite the lean, and a WebGL material layer - glossy (tight clear highlight) or metallic (broad brushed sheen) - lit from one light you place by angle. Hover interactions you can switch on and off: a one-shot glare sweep when the pointer enters (speed, width, intensity, single/double, color) and a lift toward the viewer (5-100 px). Corner-radius aware, children stay interactive, the face can be an image or SVG. Retina-crisp, zero dependencies.

- Author: [Haim Repael Azoulay](https://21st.dev/@1haim)
- License: mit
- Live preview: https://21st.dev/@1haim/components/card-tilt-depth

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/1haim/card-tilt-depth?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt