3D Tilt Card

Live preview — fully interactive

The prompt

Build a 3D tilt product card.

## Structure
- Perspective 1000px stage
- 320px card: gradient cover (180px), title, description, shine overlay

## Behavior
- On mousemove: rotateY = (px-0.5)*24deg, rotateX = (0.5-py)*24deg (max 12deg)
- GSAP duration 0.35s, power3.out
- Shine is

Full prompt (541 chars) unlocks after purchase

The code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #08080d; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: Inter, system-ui, sans-serif; color: #f2f2f7; }
  .stage { perspective: 1000

Complete self-contained HTML unlocks after purchase

About this effect

Move the mouse across the card and it tilts up to 12 degrees on each axis. A radial highlight follows the cursor. Leaving the card springs it back with an elastic ease. Classic for pricing and feature grids.