3D Tilt Card
A card that tilts in 3D following your cursor
Create a 3D tilt card. A card that tilts in 3D following the cursor. Put perspective: 700px on a wrapper. On mousemove over the card, compute the cursor position as a 0-1 fraction of the card's width and height, and rotate the card up to 12 degrees on each axis: rotateX tilts away from the vertical cursor position, rotateY toward the horizontal one. Transition transform 150ms ease-out; on mouse leave, reset to flat. Add a glare: an absolutely positioned overlay with a radial-gradient in the brand accent color at about 8% opacity, centered on the cursor position, moving with it. Use transform only, keep the card's content readable at full tilt, and disable both tilt and glare when prefers-reduced-motion is enabled. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.