{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "glass-folder",
  "type": "registry:ui",
  "title": "3D Glassmorphic Folder",
  "description": "Interactive 3D glassmorphic document folder with multi-layer depth, perspective hover flap, and interior document sheets.",
  "category": "cards",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "card",
    "folder",
    "glassmorphism",
    "3d",
    "depth",
    "framer-motion",
    "interactive"
  ],
  "files": [
    {
      "path": "registry/cards/glass-folder/glass-folder.tsx",
      "type": "registry:ui",
      "target": "components/ui/glass-folder.tsx",
      "content": "import React, { useState } from 'react'\nimport { motion } from 'framer-motion'\nimport { Folder, FileText, Code2, ArrowUpRight } from 'lucide-react'\nimport { cn } from '@/lib/utils'\n\nexport interface GlassFolderProps {\n  title?: string\n  count?: number\n  icon?: React.ReactNode\n  tags?: string[]\n  className?: string\n  onClick?: () => void\n}\n\nexport const GlassFolder: React.FC<GlassFolderProps> = ({\n  title = 'Registry Schemas',\n  count = 12,\n  icon,\n  tags = ['TypeScript', 'Tailwind', 'v4.0'],\n  className,\n  onClick,\n}) => {\n  const [isHovered, setIsHovered] = useState(false)\n\n  return (\n    <div\n      onClick={onClick}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      className={cn(\n        'relative group/folder flex flex-col items-center justify-center cursor-pointer select-none',\n        className\n      )}\n    >\n      <div className=\"relative w-64 h-44 [perspective:1400px] z-10\">\n        {/* Back Tab & Folder Backplate */}\n        <div\n          className={cn(\n            'absolute inset-0 rounded-2xl rounded-tl-none border border-white/20 dark:border-white/10 transition-all duration-300',\n            'bg-gradient-to-br from-indigo-500/20 via-sky-500/15 to-indigo-600/10 dark:from-indigo-600/30 dark:via-zinc-900/40 dark:to-zinc-950/80 backdrop-blur-xl',\n            'shadow-lg group-hover/folder:shadow-indigo-500/15',\n            \"after:absolute after:content-[''] after:bottom-[99%] after:left-0 after:w-24 after:h-4 after:bg-indigo-500/25 dark:after:bg-indigo-600/35 after:backdrop-blur-xl after:rounded-t-xl after:border-t after:border-l after:border-white/20 dark:after:border-white/10\"\n          )}\n        >\n          {/* Backplate subtle grid lines */}\n          <div className=\"absolute inset-0 rounded-2xl opacity-15 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:16px_16px]\" />\n        </div>\n\n        {/* Floating Interior Document Sheets (Stack of Papers) */}\n        <motion.div\n          animate={isHovered ? { rotateX: -18, y: -16 } : { rotateX: 0, y: 0 }}\n          transition={{ type: 'spring', stiffness: 280, damping: 20 }}\n          className=\"absolute inset-x-4 top-3 bottom-4 rounded-xl bg-white/70 dark:bg-zinc-800/80 border border-zinc-200/80 dark:border-white/15 p-3 flex flex-col justify-between shadow-md origin-bottom\"\n        >\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-1.5 text-[11px] font-mono text-zinc-600 dark:text-zinc-300\">\n              <FileText className=\"w-3.5 h-3.5 text-indigo-500\" />\n              <span>manifest.json</span>\n            </div>\n            <span className=\"text-[10px] font-mono px-1.5 py-0.5 rounded bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 font-semibold\">\n              v2.4\n            </span>\n          </div>\n          <div className=\"space-y-1\">\n            <div className=\"h-1.5 w-3/4 rounded bg-zinc-300 dark:bg-zinc-700/80\" />\n            <div className=\"h-1.5 w-1/2 rounded bg-zinc-200 dark:bg-zinc-800\" />\n          </div>\n        </motion.div>\n\n        <motion.div\n          animate={isHovered ? { rotateX: -28, y: -8 } : { rotateX: 0, y: 0 }}\n          transition={{ type: 'spring', stiffness: 280, damping: 20, delay: 0.02 }}\n          className=\"absolute inset-x-3 top-4 bottom-4 rounded-xl bg-white/80 dark:bg-zinc-850/90 border border-zinc-200/80 dark:border-white/15 p-3 flex flex-col justify-between shadow-md origin-bottom\"\n        >\n          <div className=\"flex items-center justify-between\">\n            <div className=\"flex items-center gap-1.5 text-[11px] font-mono text-zinc-700 dark:text-zinc-200\">\n              <Code2 className=\"w-3.5 h-3.5 text-cyan-500\" />\n              <span>component.tsx</span>\n            </div>\n            <ArrowUpRight className=\"w-3 h-3 text-zinc-400\" />\n          </div>\n          <div className=\"space-y-1\">\n            <div className=\"h-1.5 w-4/5 rounded bg-zinc-300 dark:bg-zinc-700/80\" />\n            <div className=\"h-1.5 w-2/3 rounded bg-zinc-200 dark:bg-zinc-800\" />\n          </div>\n        </motion.div>\n\n        {/* Front Glassmorphic Fold Flap with 3D Rotate Effect */}\n        <motion.div\n          animate={isHovered ? { rotateX: -46, y: 2 } : { rotateX: 0, y: 0 }}\n          transition={{ type: 'spring', stiffness: 280, damping: 22 }}\n          style={{ transformOrigin: 'bottom center' }}\n          className={cn(\n            'absolute bottom-0 w-full h-[142px] rounded-2xl rounded-tr-none border border-white/30 dark:border-white/15 backdrop-blur-2xl p-4 flex flex-col justify-between shadow-xl',\n            'bg-gradient-to-b from-white/40 via-white/20 to-white/30 dark:from-zinc-900/70 dark:via-zinc-900/50 dark:to-zinc-950/80',\n            \"after:absolute after:content-[''] after:bottom-[99%] after:right-0 after:w-36 after:h-4 after:bg-white/30 dark:after:bg-zinc-900/60 after:backdrop-blur-2xl after:rounded-t-xl after:border-t after:border-r after:border-white/25 dark:after:border-white/15\"\n          )}\n        >\n          <div className=\"flex items-center justify-between relative z-10\">\n            <div className=\"flex items-center gap-2\">\n              <div className=\"w-8 h-8 rounded-xl bg-indigo-500/15 dark:bg-indigo-500/20 border border-indigo-500/30 flex items-center justify-center text-indigo-600 dark:text-indigo-400\">\n                {icon || <Folder className=\"w-4 h-4\" />}\n              </div>\n              <span className=\"text-xs font-bold text-zinc-900 dark:text-white\">\n                {title}\n              </span>\n            </div>\n            <span className=\"text-[11px] font-mono px-2 py-0.5 rounded-full bg-zinc-200/80 dark:bg-white/10 text-zinc-700 dark:text-zinc-300 font-semibold border border-zinc-300/60 dark:border-white/10\">\n              {count} items\n            </span>\n          </div>\n\n          <div className=\"flex flex-wrap items-center gap-1.5 relative z-10\">\n            {tags.map((tag) => (\n              <span\n                key={tag}\n                className=\"text-[10px] font-mono px-2 py-0.5 rounded-md bg-white/60 dark:bg-black/30 border border-zinc-200/60 dark:border-white/10 text-zinc-600 dark:text-zinc-400\"\n              >\n                {tag}\n              </span>\n            ))}\n          </div>\n\n          <div className=\"absolute inset-0 rounded-2xl bg-gradient-to-tr from-transparent via-white/15 to-transparent pointer-events-none\" />\n        </motion.div>\n      </div>\n    </div>\n  )\n}\n\nexport default GlassFolder\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}