gamma logo

1

Animated Folder

PreviousNext

A 3D animated folder component that reveals project cards on hover and expands into a smooth image lightbox with keyboard navigation.

Installation

pnpm dlx shadcn@latest add @gammaui/animated-folder

Usage

import { AnimatedFolder } from "@/components/gammaui/animated-folder"
 
const projects = [
  {
    id: "1",
    title: "Landing Page",
    image: "/images/project-1.jpg",
  },
  {
    id: "2",
    title: "Dashboard UI",
    image: "/images/project-2.jpg",
  },
  {
    id: "3",
    title: "Mobile App",
    image: "/images/project-3.jpg",
  },
]
 
export default function Page() {
  return <AnimatedFolder title="My Projects" projects={projects} />
}

Examples

Default

<AnimatedFolder title="Projects" projects={projects} />

Custom Styling

<AnimatedFolder title="Design Work" projects={projects} className="max-w-sm" />

Props

AnimatedFolder

PropTypeRequiredDescription
titlestring✅Folder title
projectsProject[]✅List of projects
classNamestring❌Optional wrapper classes

Project

PropTypeDescription
idstringUnique project ID
titlestringProject title
imagestringImage URL

Features

  • 3D Folder Animation with layered depth
  • Hover-Revealed Project Cards
  • Smooth Lightbox Expansion from card position
  • Keyboard Navigation (← → Esc)
  • Animated Image Slider
  • Dot Pagination
  • Accessible Focus & Controls
  • Responsive & Mobile-Friendly
  • No animation libraries required

Interactions

  • Hover the folder to reveal project cards
  • Click a card to open the lightbox
  • Use arrow keys or buttons to navigate
  • Press Esc or click outside to close

Use Cases

  • Portfolio project showcases
  • Design & case study previews
  • Creative folders
  • Landing page highlights
  • Product galleries
  • Personal websites