{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "surface-glass",
  "title": "Surface Glass",
  "description": "Container-level liquid glass: blur, saturation, noise grain, specular rim, graduated shadow ramp.",
  "dependencies": [],
  "files": [
    {
      "path": "registry/core/surface-glass/component.tsx",
      "content": "\"use client\";\n\nimport type { HTMLAttributes } from \"react\";\n\n// tiled SVG noise grain — keeps the glass from reading as a flat blur\nconst NOISE =\n  \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E\\\")\";\n\nexport function GlassPanel({\n  className = \"\",\n  children,\n  ...props\n}: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      className={[\n        \"relative overflow-hidden rounded-md border\",\n        \"border-black/10 dark:border-white/10\",\n        // graduated elevation ramp — depth without a single heavy shadow\n        \"shadow-[0_1px_2px_rgba(0,0,0,0.08),0_4px_8px_-2px_rgba(0,0,0,0.08),0_12px_24px_-6px_rgba(0,0,0,0.1),0_32px_64px_-16px_rgba(0,0,0,0.12)]\",\n        \"dark:shadow-[0_1px_2px_rgba(0,0,0,0.3),0_4px_8px_-2px_rgba(0,0,0,0.3),0_12px_24px_-6px_rgba(0,0,0,0.35),0_32px_64px_-16px_rgba(0,0,0,0.4)]\",\n        className,\n      ].join(\" \")}\n      {...props}\n    >\n      {/* glass fill: blur + saturate the backdrop */}\n      <div\n        aria-hidden\n        className=\"absolute inset-0 bg-white/60 backdrop-blur-xl backdrop-saturate-150 dark:bg-white/[0.06]\"\n      />\n      {/* grain */}\n      <div\n        aria-hidden\n        className=\"absolute inset-0 opacity-[0.05] mix-blend-overlay\"\n        style={{ backgroundImage: NOISE }}\n      />\n      {/* specular rim: lit from above */}\n      <div\n        aria-hidden\n        className=\"absolute inset-0 rounded-[inherit] shadow-[inset_0_1px_0_rgba(255,255,255,0.6),inset_1px_0_0_rgba(255,255,255,0.15),inset_-1px_0_0_rgba(255,255,255,0.15)] dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.12),inset_1px_0_0_rgba(255,255,255,0.04),inset_-1px_0_0_rgba(255,255,255,0.04)]\"\n      />\n      <div className=\"relative\">{children}</div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/surface-glass.tsx"
    }
  ],
  "meta": {
    "collection": "core",
    "tags": [
      "surface",
      "glass",
      "card",
      "container"
    ],
    "instruction": "A liquid-glass container surface built as a layer stack: backdrop blur with saturation boost, tiled SVG noise grain blended over the fill, an inset specular rim lit from above, and a four-step graduated shadow ramp for depth, with children rendered above the glass. Works over any moving or static backdrop, both themes."
  },
  "type": "registry:ui"
}