{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "glass-card",
  "type": "registry:ui",
  "title": "Frosted Acrylic Glass Card",
  "description": "Multi-layer frosted glass card with noise texture and rim lighting.",
  "category": "cards",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "tags": [
    "card",
    "glass",
    "frosted",
    "acrylic"
  ],
  "files": [
    {
      "path": "registry/cards/glass-card/glass-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/glass-card.tsx",
      "content": "import React from 'react'\nimport { motion } from 'framer-motion'\nimport { cn } from '@/lib/utils'\n\nexport interface GlassCardProps {\n  children?: React.ReactNode\n  title?: string\n  subtitle?: string\n  className?: string\n}\n\nexport const GlassCard: React.FC<GlassCardProps> = ({\n  children,\n  title = 'Hermetic WASM Isolate',\n  subtitle = 'MEMORY PROTECTION RING-0',\n  className,\n}) => {\n  return (\n    <div\n      className={cn(\n        'group relative overflow-hidden rounded-[2rem] border border-white/10 bg-white/[0.03] p-1.5 shadow-2xl backdrop-blur-2xl transition-all duration-300 hover:border-white/20',\n        className\n      )}\n    >\n      <div className=\"relative rounded-[calc(2rem-0.375rem)] border border-white/5 bg-zinc-950/70 p-6 shadow-[inset_0_1px_1px_rgba(255,255,255,0.15)]\">\n        <div className=\"flex items-center justify-between border-b border-white/5 pb-3\">\n          <span className=\"font-mono text-[10px] tracking-wider text-zinc-600 dark:text-zinc-400\">{subtitle}</span>\n          <div className=\"flex gap-1\">\n            <span className=\"h-2 w-2 rounded-full bg-white/20\" />\n            <span className=\"h-2 w-2 rounded-full bg-white/20\" />\n          </div>\n        </div>\n\n        <h4 className=\"mt-3 text-lg font-bold text-zinc-900 dark:text-white tracking-tight\">{title}</h4>\n        \n        <div className=\"mt-2 text-xs text-zinc-300\">\n          {children || 'Air-gapped execution blocks outbound socket leaks while monitoring CPU allocation quotas.'}\n        </div>\n\n        <div className=\"mt-4 flex items-center justify-between pt-3 border-t border-white/5 font-mono text-[10px] text-zinc-500\">\n          <span>Glass Filter: blur(24px)</span>\n          <span className=\"text-emerald-400\">Isolated</span>\n        </div>\n      </div>\n    </div>\n  )\n}\n"
    }
  ],
  "tailwind": {
    "required": true
  },
  "framework": [
    "react",
    "nextjs",
    "vite"
  ]
}