gammaui
example3d-folder-demosource: ok · hit
3D Folder Demo
A 3D animated folder component that reveals project cards on hover and expands into a smooth image lightbox with keyboard navigation.
npx shadcn add "https://www.gammaui.com/r/3d-folder-demo.json"free
Where it goes
kanbangallery
Visual style
3d
Interaction
scroll-reveal
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
@gammaui/3d-folder
Files1 · source cached 10/15/2026, 8:08:42 AM
registry/example/3d-folder-demo.tsx
import { AnimatedFolder } from "@/registry/gammaui/3d-folder"
const portfolioData = [
{
title: "Folder Name",
projects: [
{
id: "1",
image:
"https://images.pexels.com/photos/29531041/pexels-photo-29531041.jpeg",
title: "Tokyo",
},
{
id: "2",
image:
"https://images.pexels.com/photos/569416/pexels-photo-569416.jpeg",
title: "Berlin",
},
{
id: "3",
image:
"https://images.pexels.com/photos/1461974/pexels-photo-1461974.jpeg",
title: "Pris",
},
],
},
]
export default function AnimatedFolderDemo() {
return (
<main className="bg-background flex w-full items-center justify-center">
{/* Main content */}
<section className="mx-auto max-w-6xl px-6 py-16">
<div className="flex w-full items-center justify-center">
{portfolioData.map((folder) => (
<AnimatedFolder
key={folder.title}
title={folder.title}
projects={folder.projects}
/>
))}
</div>
</section>
</main>
)
}