---
title: "Folder Stack — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Aviral Lakhanpaul · Interactive. Demo Folder Stack Component Preview Features Interactive hover effects with image fan-out animation Optional 3D perspective…"
canonical: "https://framer.elliotli.dev/component/folder-stack"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Folder Stack

# Folder Stack

Interactive folder-style stack

[View on Framer](https://framer.com/marketplace/components/folder-stack/?via=elliot-li)

![Folder Stack preview image 1](https://framer.elliotli.dev/og/component/folder-stack/4c4df4bc484fef53/1600x1200.jpg)

## Summary

Demo Folder Stack Component Preview Features Interactive hover effects with image fan-out animation Optional 3D perspective mode for a more dramatic effect Grayscale effect on…

## Description

### 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

Folder Stack Component Preview

## 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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-gekj0fwf-XUz9HpUv3C6KxlUepRm5qac7eDvApB)

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

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-v3yhdgos-qclkkzGjdn5YEiiHFFIfUhlaYszfj4)](https://polar.sh)

## Rank history [How rankings work →](/terms#rankings)

-   All · #1529

## Details

- **Author**: Aviral Lakhanpaul
- **Price**: $9.00
- **Published**: 2025-12-24
- **Updated**: 2026-10-28
- **Added**: 2025-12-16
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase