# Tilt Card

> A card that tilts in 3D following the cursor, with a spotlight overlay and hover lift. Three primitives composed for a premium card interaction.

Source: https://www.motion-components.dev/docs/recipes/tilt-card/

A card that tilts in 3D following the cursor, with a spotlight overlay and hover lift. The kind of interaction you see on premium landing pages.

## Complete code

```html
<motion-tilt max="15" scale="1.02">
  <motion-spotlight size="300" style="--mc-spotlight-color: rgba(96,165,250,0.15)">
    <div class="card">
      <div class="card-icon">✦</div>
      <h3>Analytics</h3>
      <p>Real-time insights into your product usage.</p>
    </div>
  </motion-spotlight>
</motion-tilt>
```

## How it works

Two interaction primitives layered on a static card. The tilt handles 3D rotation, the spotlight adds a tracking light effect.

### 3D tilt

```html
<motion-tilt max="15" scale="1.02">
  <!-- rotates along X/Y based on cursor position -->
</motion-tilt>
```

`max` is the maximum rotation in degrees. At `15` the card tilts up to 15 degrees toward the cursor. The `scale` lifts it slightly on hover for a floating feel.

### Spotlight overlay

```html
<motion-spotlight size="300" style="--mc-spotlight-color: rgba(96,165,250,0.15)">
  <!-- radial gradient tracks the cursor -->
</motion-spotlight>
```

The spotlight renders a radial gradient that follows the cursor on a spring. It fades in on hover and out on leave. The `duration` attribute (default 0.35) controls how much the light lags behind the cursor.

## Tuning

### Subtle

```html
<motion-tilt max="8" scale="1.01">
  <motion-spotlight size="250" style="--mc-spotlight-color: rgba(255,255,255,0.06)">
    <div class="card">...</div>
  </motion-spotlight>
</motion-tilt>
```

### Dramatic

```html
<motion-tilt max="20" scale="1.04" gloss>
  <motion-spotlight size="400" style="--mc-spotlight-color: rgba(96,165,250,0.25)">
    <div class="card">...</div>
  </motion-spotlight>
</motion-tilt>
```

Add `gloss` to motion-tilt for a moving specular highlight across the card surface.

## Card styles

The card itself is just CSS. The motion components wrap it without modifying its structure.

```css
.card {
  background: var(--mc-color-surface);
  border: 1px solid var(--mc-color-border);
  border-radius: 16px;
  padding: 2rem;
  width: 320px;
  min-height: 200px;
  transform-style: preserve-3d;
}
```

## Accessibility

Both components respect `prefers-reduced-motion`. The tilt settles to a flat position and the spotlight stays hidden. The card remains fully readable without any motion.