Depth Stack
CSS perspective-3D stacked card deck that fans apart in a 3D arc on click, revealing layered content with spring easing.
Props
| Property | Type | Default | Description |
|---|---|---|---|
| accentColor | string | #10b981 | Theme color for background radial glow and badge accents |
| cardCount | number | 4 | Number of cards in the stack (2–5) |
| spread | number | 55 | Fan spread angle in degrees — how wide the cards arc when expanded |
When to Use
Great for showcasing a set of product features, services, or team members as a stacked deck. The fan reveal creates intrigue and encourages interaction.
Best Practices
Keep cardCount between 3–5. Spread of 45–70 degrees works best. The top card (last in array) is the most visible in stacked state — put your hero item there.
Why This Component Matters
Stacked cards with 3D depth communicate that there's more to discover. The spring-eased fan reveal turns a static list into a delightful interactive moment.
FAQ
QDoes it use any library?
No — pure CSS 3D transforms with CSS transitions. Zero dependencies.
QCan I customize card content?
Yes — edit the CARD_DATA array at the top of the component. Each entry accepts title, tag, color, icon, metric, and label.
Related Components
Broken Shard Gallery
Images explode outward from center into a chaotic gallery layout as you scroll.
Velocity Smear
Gallery that skews and stretches in real-time based on scroll velocity — the faster you scroll, the more the images smear.
Curtain Split
Two image panels split apart like stage curtains on scroll, revealing editorial text content hidden beneath.