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.

Preview

✦

Analytics

Real-time insights into your product usage, conversion funnels, and user behavior.

Complete code

<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

<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

<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

<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

<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.

.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.