Card Tilt Track
The sheen, not the rotation, is what makes it read as an object: a highlight slides across the plate as it turns, the way light does on anything glossy.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import type { PointerEvent as ReactPointerEvent } from "react";
import {
motion,
useMotionTemplate,
useMotionValue,
useSpring,
useTransform,About this pattern
A media card that turns to face the pointer and comes back level when it leaves — for a gallery, a feed of covers, a single feature card with room around it. Build the rotation on its own and it reads as a skew; what supplies the third dimension is the specular highlight travelling the opposite way across the surface, which is where a reflection actually goes when you tip a glossy card toward a light. Rotation and sheen are read off one pointer value, so they can never disagree about which face has turned toward the viewer. Two rules shape the rest. The caption sits outside the transformed plate, flat in the ordinary layout, because text under a perspective is text whose size changes across its own line, and a caption the reader has to chase is charging for the effect twice. And nothing scales — the lift is carried entirely by the shadow, which deepens as the plate turns, so no detail in the artwork is ever resampled. Springs sit at or above a 0.949 damping ratio and none of them overshoots, since a card that wobbles past level reads as loose rather than light. Coarse pointers get a still plate, and so does prefers-reduced-motion.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Photo gallery
The frame under the pointer turns toward it while its caption stays level and still.
- Profile page
A pinned cover leans as the pointer crosses it, the gloss sliding the other way.
Related patterns
- Profile Header ParallaxThe cover drifts at a fraction of the scroll while the avatar rides up and docks into the title bar.
- Bookmark SaveThe mark fills from the notch up, tucks into its corner, and a ribbon slides down behind the card edge.
- Magnetic CTAThe pull starts outside the button, so the action answers a pointer that is still on its way rather than one that has already arrived.