# Tilt card

> A card that tilts in 3D toward the pointer with a moving glare.

Component · Pro · https://lodeui.com/components/tilt-card

## When to use

- Product shots, cards and credit-card visuals on marketing pages.

## When not to use

- Cards containing forms.

## Installation

```bash
npx shadcn@latest add @lode/tilt-card
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { TiltCard } from "@/components/ui/tilt-card";

export function Card() {
  return <TiltCard className="rounded-2xl p-8">Lode Pro</TiltCard>;
}
```

## API reference

### TiltCard

Tilts toward the pointer in 3D with a moving glare.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| max | `number` | `10` | Max tilt in degrees. |

## Accessibility

- Flat under reduced motion; the glare is aria-hidden.

## Motion

- Spring tilt and glare follow the pointer; reset on leave.

## Responsive behavior

- Static on touch.

## Performance

- Motion values; no re-renders.

## Notes for AI

- Keep max under 15.

## Related

- [Spotlight card](https://lodeui.com/components/spotlight-card) — A card lit by a spotlight that follows the pointer, border included.
- [Magnetic](https://lodeui.com/components/magnetic) — Makes any element lean toward the pointer and spring back.