Folder Stack

Perfect for portfolios, project showcases, or organizing visual content in a visually appealing way.

The component automatically detects touch devices and disables hover effects for a better mobile experience.

Demo

Features

• 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

Customization Options

• 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

• Animation styles

• Link URLs with the new tab option

Usage

1. Copy & paste the component to your Framer canvas.

2. Configure the number of folders in the Folders array.

3. Add images for each folder.

4. 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.