# Pointer tilt (goodtabs UI)

A card that tilts toward the pointer in perspective, with a soft top light that follows.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/pointer-tilt.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/pointer-tilt`

## Usage

```tsx
import { PointerTilt } from "@/components/ui/pointer-tilt"

<PointerTilt className="max-w-md">
  <img src="/cover.jpg" alt="The cover" />
  <p className="p-5">Study 04</p>
</PointerTilt>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| max | `number` | `6` | Peak tilt in degrees at the card's edge, capped at 6. |

## When to use

- One or a few feature cards on a marketing page
- A cover or a product shot that deserves a moment of attention
- Beside a flat layout, where small depth reads as craft

## When not to use

- Dense grids, where tilting tiles compete with each other
- Cards that hold long text or forms: reading on a moving plane is tiring
- App surfaces people use all day

## Notes for agents

- GSAP installs from npm under GSAP's own licence. No GSAP code ships in this registry
- It renders the card surface itself, so pass content, not another card. className goes on the flat outer box
- Tilt runs only on a fine pointer with motion allowed. Keyboard focus and clicks inside work as normal
- Leave room around it: a 6 degree tilt at 900px perspective scales the near edge of a 576px card by 3.5 percent

## The maths

- Rotate Y is 2 × max × (x - 0.5) and rotate X is -2 × max × (y - 0.5), so the centre is flat and each edge reaches max.
- At 900px perspective a 576px card at 6 degrees brings its near edge 288 × sin 6° = 30.1px closer, which scales it by 900 / 869.9, or 3.5 percent.

Docs: https://ui.goodtabs.co/components/pointer-tilt