{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "3d-folder-demo",
  "title": "3D Folder Demo",
  "description": "A 3D animated folder component that reveals project cards on hover and expands into a smooth image lightbox with keyboard navigation.",
  "registryDependencies": [
    "@gammaui/3d-folder"
  ],
  "files": [
    {
      "path": "registry/example/3d-folder-demo.tsx",
      "content": "import { AnimatedFolder } from \"@/registry/gammaui/3d-folder\"\n\nconst portfolioData = [\n  {\n    title: \"Folder Name\",\n    projects: [\n      {\n        id: \"1\",\n        image:\n          \"https://images.pexels.com/photos/29531041/pexels-photo-29531041.jpeg\",\n        title: \"Tokyo\",\n      },\n      {\n        id: \"2\",\n        image:\n          \"https://images.pexels.com/photos/569416/pexels-photo-569416.jpeg\",\n        title: \"Berlin\",\n      },\n      {\n        id: \"3\",\n        image:\n          \"https://images.pexels.com/photos/1461974/pexels-photo-1461974.jpeg\",\n        title: \"Pris\",\n      },\n    ],\n  },\n]\n\nexport default function AnimatedFolderDemo() {\n  return (\n    <main className=\"bg-background flex w-full items-center justify-center\">\n      {/* Main content */}\n      <section className=\"mx-auto max-w-6xl px-6 py-16\">\n        <div className=\"flex w-full items-center justify-center\">\n          {portfolioData.map((folder) => (\n            <AnimatedFolder\n              key={folder.title}\n              title={folder.title}\n              projects={folder.projects}\n            />\n          ))}\n        </div>\n      </section>\n    </main>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}