3D Folder Card — React Component
Interactive folder card that opens on hover, fans project cards upward, and includes a lightbox gallery for visual collections.
3D Folder Card — Variant 1
Playground
Shape the component before you copy it.
Adjust the important props for this component and grab JSX that matches your choices.
size
Folder scale — sm renders at 60% for dense grid layouts.
3D Folder Card — Variant 2
Playground
Shape the component before you copy it.
Adjust the important props for this component and grab JSX that matches your choices.
size
Folder scale — sm renders at 60% for dense grid layouts.
Animation effects
Copy-paste ready
Use the Code tab above to inspect and copy this component into your project.
About 3D Folder Card
The 3D Folder Card opens and closes on hover, revealing stacked content cards inside. The fold animation uses Framer Motion spring physics combined with CSS perspective transforms to simulate a physical folder opening. Cards inside lift and fan slightly as the folder opens. A distinctive interaction pattern for feature reveals, stacked document displays, or any UI that needs to communicate multiple items contained within a single object.
Common use cases
- Feature reveal interactions
- Document and file preview displays
- Stacked card and content containers
- Interactive pricing tier comparisons