Display
Stacked Cards
A stack of cards that fans out or expands on scroll or interaction.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyadvanced
English Prompt
Create a stacked cards component with 5 cards. The cards should be piled with slight vertical offsets and shadows, showing only the top edges. On scroll or click, the cards fan out vertically with staggered rotation, revealing their full content. Use CSS transforms, transitions, and z-index layering. Use Tailwind CSS. Each card can have a dark background, small title, and one-line description.
Chinese Prompt
创建一个堆叠卡片组件,包含 5 张卡片。卡片应轻微垂直偏移和阴影堆叠,只显示顶部边缘。滚动或点击时,卡片垂直扇形展开并错开旋转,展示完整内容。使用 CSS transforms、transitions 和 z-index 分层。使用 Tailwind CSS。每张卡片可有深色背景、小标题和一行描述。

Overview
A playful card interaction that turns a list into a tactile, revealable stack. Great for features, FAQs, or process steps.
Features
- 5 stacked cards
- Vertical offset + shadows
- Fan-out on scroll/click
- Staggered rotation
- z-index layering
- Dark card surfaces
Usage
Use for feature lists, step-by-step processes, or interactive FAQs.
Customization
Modify the prompt to:
- Add horizontal fan-out instead of vertical
- Trigger spread on hover
- Add icons or numbers to cards
- Include a progress indicator