{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progressive-blur-demo",
  "type": "registry:example",
  "title": "Progressive Blur Demo",
  "description": "Example showing progressive blur effect for scrollable content.",
  "registryDependencies": [
    "@magicui/progressive-blur"
  ],
  "files": [
    {
      "path": "registry/example/progressive-blur-demo.tsx",
      "content": "\"use client\"\n\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { ProgressiveBlur } from \"@/registry/magicui/progressive-blur\"\n\nexport default function ProgressiveBlurDemo() {\n  return (\n    <div className=\"relative w-full rounded-xl border\">\n      <ScrollArea className=\"relative h-[400px] overflow-hidden\">\n        <div className=\"flex flex-col gap-2 p-4\">\n          {Array.from({ length: 20 }).map((_, index) => (\n            <div\n              key={index}\n              className=\"bg-card flex h-20 w-full items-center justify-center rounded-xl border\"\n            >\n              {index}\n            </div>\n          ))}\n        </div>\n        <ProgressiveBlur position=\"bottom\" height=\"40%\" />\n      </ScrollArea>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ]
}