{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "edge-blur-demo",
  "type": "registry:component",
  "registryDependencies": [
    "edge-blur"
  ],
  "files": [
    {
      "path": "registry/default/example/edge-blur-demo.tsx",
      "content": "\"use client\"\n\nimport { BottomBlur, EdgeBlur, TopBlur } from \"@/registry/default/ui/edge-blur\"\n\nconst SCROLL_PARAGRAPH_KEYS = [\n  \"s-a\",\n  \"s-b\",\n  \"s-c\",\n  \"s-d\",\n  \"s-e\",\n  \"s-f\",\n  \"s-g\",\n  \"s-h\",\n  \"s-i\",\n  \"s-j\",\n  \"s-k\",\n  \"s-l\",\n] as const\n\nconst SMALL_ROW_KEYS = [\n  \"b-1\",\n  \"b-2\",\n  \"b-3\",\n  \"b-4\",\n  \"b-5\",\n  \"b-6\",\n  \"b-7\",\n  \"b-8\",\n] as const\n\nexport default function EdgeBlurDemo() {\n  return (\n    <div className=\"flex flex-col items-center gap-10 rounded-md px-4 py-6 md:px-0 dark:bg-stone-950\">\n      <div className=\"max-w-xl space-y-2 text-center\">\n        <h2 className=\"text-foreground text-2xl font-bold tracking-tight\">\n          Edge blur\n        </h2>\n        <p className=\"text-muted-foreground text-sm\">\n          Stacked backdrop-blur layers with a gradient mask. Blurs sit{\" \"}\n          <em>outside</em> the scroll layer so they stay pinned to the frame;\n          only the inner panel scrolls.{\" \"}\n          <code className=\"bg-muted rounded px-1 py-0.5 text-xs\">\n            transform-gpu\n          </code>{\" \"}\n          on the frame keeps{\" \"}\n          <code className=\"bg-muted rounded px-1 py-0.5 text-xs\">fixed</code>{\" \"}\n          blurs inside this preview instead of the viewport.\n        </p>\n      </div>\n\n      <div className=\"bg-muted/30 relative isolate h-[420px] w-full max-w-lg transform-gpu overflow-hidden rounded-xl border shadow-sm\">\n        <div className=\"absolute inset-0 z-0 overflow-y-auto\">\n          <div className=\"from-background via-muted/40 to-background min-h-[700px] space-y-3 bg-gradient-to-b p-6 pt-8 pb-28\">\n            {SCROLL_PARAGRAPH_KEYS.map((key, i) => (\n              <p\n                key={key}\n                className=\"text-foreground/90 text-sm leading-relaxed\"\n              >\n                Paragraph {i + 1}. Layers use{\" \"}\n                <code className=\"bg-background/80 rounded px-1 py-0.5 text-xs\">\n                  pointer-events-none\n                </code>{\" \"}\n                so the scroll container still receives wheel and touch events.\n              </p>\n            ))}\n          </div>\n        </div>\n        <EdgeBlur position=\"top\" height={72} />\n        <EdgeBlur position=\"bottom\" height={96} />\n      </div>\n\n      <div className=\"grid w-full max-w-2xl grid-cols-1 gap-4 sm:grid-cols-2\">\n        <div className=\"bg-card relative isolate h-44 transform-gpu overflow-hidden rounded-lg border\">\n          <section\n            aria-label=\"Demo panel with bottom edge blur\"\n            className=\"text-muted-foreground absolute inset-0 z-0 overflow-y-auto p-4 text-xs\"\n          >\n            {SMALL_ROW_KEYS.map((key, i) => (\n              <p key={key} className=\"mb-2\">\n                Bottom blur row {i + 1}\n              </p>\n            ))}\n          </section>\n          <BottomBlur height={56} />\n        </div>\n        <div className=\"bg-card relative isolate h-44 transform-gpu overflow-hidden rounded-lg border\">\n          <section\n            aria-label=\"Demo panel with top edge blur\"\n            className=\"text-muted-foreground absolute inset-0 z-0 overflow-y-auto p-4 pt-8 text-xs\"\n          >\n            {SMALL_ROW_KEYS.map((key, i) => (\n              <p key={`top-${key}`} className=\"mb-2\">\n                Top blur row {i + 1}\n              </p>\n            ))}\n          </section>\n          <TopBlur height={56} />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}