Folder Stack
Showcase projects and visuals in an interactive folder stack. Hover to reveal image previews with smooth animations and optional 3D depth—perfect for portfolios and showcases.
Make it with Workshop
Build your own component with AI
Showcase projects and visuals in an interactive folder stack. Hover to reveal image previews with smooth animations and optional 3D depth—perfect for portfolios and showcases.
Make it with Workshop
Build your own component with AI
An interactive folder stack component that displays multiple folders with hover effects and image previews.
This component creates a visually appealing stack of folders that can contain images and links. When hovering over a folder, images fan out or display in 3D mode, while other folders become grayscale. Perfect for portfolios, project showcases, or organizing visual content in a unique way.
The component automatically detects touch devices and disables hover effects for a better mobile experience.
Interactive hover effects with image fan-out animation
Optional 3D perspective mode for a more dramatic effect
Grayscale effect on non-hovered folders
Customizable folder colors, fonts, and spacing
Support for up to 4 images per folder
Clickable folders with optional link support
New tab option for external links
Responsive layout that adapts to container width
Touch device detection with automatic hover disable
Smooth animations powered by Framer Motion
Folder label, color, and images
Folder padding and border radius
Folder title font (size, weight, spacing, line height)
Tab padding and number display toggle
Tab font styling
Image scale, border, and border radius
Text colors for both tab and folder
3D hover effect toggle
Link URLs with new tab option
Copy & paste the component to your Framer canvas.
Configure the number of folders in the Folders array.
Add images for each folder.
Done!
After completing your purchase, you will receive a link to the component.
Copy the URL and paste it into your Framer project to import it.
