The reference is a 6.3-second screen recording of a pointer crossing an overlapping card deck. Frame inspection shows equal card widths throughout; the expansion is an illusion created by translating the covered neighbors away from the active card.
01 / Setup
Installation
Copy the component stylesheet into your project and load it on the page.
<link rel="stylesheet" href="/value-cards.css" />
02 / Anatomy
How the fan works
Cards keep a fixed size and overlap with a negative inline margin. Modern relational selectors separate the two neighbor groups around the hovered or keyboard-focused card.
- Every card starts with a small independent Y offset and resting rotation.
:has(~ .value-card:hover)moves cards before the active card to the left..value-card:hover ~ .value-cardmoves following cards to the right.
03 / Frame analysis
Motion phases
The production easing condenses the visible phases from the reference capture into one transform transition.
The active card receives the top stacking layer immediately.
Neighbor groups translate outward as the active card straightens and rises.
The deck eases into its final spacing and the deeper shadow catches up.
04 / Contract
CSS API
Change the public deck variables to scale the effect without rewriting the interaction selectors.
| Token / selector | Default | Purpose |
|---|---|---|
--value-card-width | clamp(10.75rem, 17vw, 13.2rem) | Controls card and deck scale. |
--value-card-overlap | -3rem to -4rem | Sets how much of each resting card is covered. |
--value-card-spread | 1.35rem to 2.3rem | Distance each neighbor group parts on interaction. |
--rest-y | Per card | Creates the loose hand-arranged baseline. |
--rest-rotate | Per card | Sets each card's resting tilt. |
05 / Behavior
Accessibility
Native buttons provide keyboard focus, focus uses the same reveal as hover, horizontal overflow remains scrollable on small screens, and reduced-motion users receive the final state without a long transition.