Folded Depth Cards
Cards layered in depth that fold like paper, with keyboard and swipe. Pro · Animated components › Layers and reveals
Marketing cards stacked in depth: the front card is live, the ones behind recede and fold, and a passed card folds away like paper (or, in the fold layout, the deck opens like a fan). Arrow keys, buttons, dots and swipes move between them; only the front card can be focused. Motion is CSS on the compositor with a spring easing, and a static layout replaces it under reduced motion.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add folded-depth-cardsnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { FoldedDepthCards } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
items * | DepthCardItem[] | The cards, front to back. | |
active | number | Index of the front card. | |
defaultActive | number | 0 | Initial front card when uncontrolled. Default 0. |
onActiveChange | (index: number) => void | Called when another card comes to the front. | |
layout | 'stack' | 'fold' | 'stack' | stack: a deck receding in depth, the passed card folds away; fold: a paper fan, the front card unfolded. |
depth | number | 64 | How far each layer recedes, in px. Default 64. |
visible | number | 3 | Layers drawn behind the front card in the stack. Default 3. |
spring | SpringPreset | SpringConfig | 'none' | 'gentle' | Motion of the fold: a preset, your own spring, or none for the theme's easing. Default gentle. |
interactive | boolean | true | Tilt toward the pointer and swipe between cards. Default true. Vertical scrolling is never blocked. |
reducedMotion | 'auto' | 'always' | 'never' | 'auto' | auto (default) follows the reader's setting; always renders the static, motion-free layout; never animates regardless. |
loop | boolean | false | Wrap from the last card to the first. |
height | CSSProperties['height'] | Height of the card area. Default 22rem. | |
loading | boolean | false | Cards are loading: skeleton. |
error | ReactNode | Loading failed: shown instead of the cards. | |
headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the card titles (default 3). |
labels | Partial<FoldedDepthCardsLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Halftone Image Reveal — Image revealed in halftone dots on scroll, hover or when it appears
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
- Pin List — Pinnable list: items glide between groups
- Notification Stack — Notification stack that expands into a list
- Todo List — Checklist with a wavy strike-through on done items
Previous: Link Preview · Next: Halftone Image Reveal · All Animated components