Tilt Card
Usage
A stat/feature card that tilts toward the cursor and lifts its shadow on hover, with an icon and content layer shifting at different rates for a "2.5D" depth cue — hand-rolled pointer tracking, no animation library. Snaps back flat the instant the pointer leaves rather than easing out.import { TiltCard } from '@summonware/ui';Best practices
DoReserve it for a handful of hero stats or feature tiles — a whole grid of tilting cards reads as noisy rather than premium.
DoKeep content short. The tilt and parallax are subtle by design; dense text inside them just looks jittery.
Don'tUse it for a card that is itself a click target requiring precise pointer accuracy — the tilt transform makes the surface visually move under the cursor.
Anatomy
iconOptional icon in the frontmost parallax layer — moves the most on pointer move.
children *The card’s primary content, in the middle parallax layer.
Examples
Common configurations, variations and states.Stat card
Downloads this month
4,821
Move the pointer across the card to see the tilt and layered parallax.
With glow
Active alerts
12
The glow prop adds a soft animated backdrop for a single hero stat that should stand out from a plain grid of cards around it.