{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-progressive-blur",
  "title": "Progressive Blur Demo",
  "description": "Scrollable content with progressive blur overlays at the top and bottom edges.",
  "registryDependencies": [
    "@unlumen-ui/progressive-blur"
  ],
  "files": [
    {
      "path": "registry/demo/components/unlumen/progressive-blur/index.tsx",
      "content": "\"use client\";\n\nimport {\n  ProgressiveBlur,\n  type ProgressiveBlurProps,\n} from \"@/components/unlumen-ui/primitives/progressive-blur\";\n\nconst LINES = [\n  \"The quick brown fox jumps over the lazy dog.\",\n  \"Pack my box with five dozen liquor jugs.\",\n  \"How vexingly quick daft zebras jump!\",\n  \"The five boxing wizards jump quickly.\",\n  \"Sphinx of black quartz, judge my vow.\",\n  \"Two driven jocks help fax my big quiz.\",\n  \"Five quacking zephyrs jolt my wax bed.\",\n  \"The jay, pig, fox, zebra and my wolves quack!\",\n  \"Blowzy red vixens fight for a quick jump.\",\n  \"Jumpy halfback vows to protect the dizzy quarterback.\",\n  \"Bright vixens jump; dozy fowl quack.\",\n  \"Quick wafting zephyrs vex bold Jim.\",\n  \"Quick zephyrs blow, vexing daft Jim.\",\n  \"Sex-charged fop blew my junk TV quiz.\",\n  \"How quickly daft jumping zebras vex.\",\n  \"Two driven jocks help fax my big quiz.\",\n];\n\ntype ProgressiveBlurDemoProps = Pick<\n  ProgressiveBlurProps,\n  \"strength\" | \"size\" | \"tint\"\n>;\n\nexport const ProgressiveBlurDemo = ({\n  strength = 4,\n  size = \"160px\",\n  tint = true,\n}: ProgressiveBlurDemoProps) => {\n  return (\n    <div className=\"relative h-[500px] w-full  overflow-hidden rounded-lg border border-border bg-background\">\n      {/* Top blur */}\n      <ProgressiveBlur side=\"top\" strength={strength} size={size} tint={tint} />\n\n      {/* Scrollable content */}\n      <div className=\"h-full overflow-y-auto\">\n        <ul className=\"space-y-3\">\n          {LINES.map((line, i) => (\n            <li\n              key={i}\n              className=\"text-4xl p-12 pb-1 text-foreground font-medium tracking-tight\"\n            >\n              {line}\n            </li>\n          ))}\n        </ul>\n      </div>\n\n      {/* Bottom blur */}\n      <ProgressiveBlur\n        side=\"bottom\"\n        strength={strength}\n        size={size}\n        tint={tint}\n      />\n    </div>\n  );\n};\n",
      "type": "registry:example"
    }
  ],
  "meta": {
    "demoProps": {
      "ProgressiveBlurDemo": {
        "strength": {
          "value": 16,
          "min": 4,
          "max": 40,
          "step": 1
        },
        "size": {
          "value": "128px",
          "options": {
            "64px": "64px",
            "96px": "96px",
            "128px": "128px",
            "160px": "160px",
            "200px": "200px"
          }
        },
        "tint": {
          "value": true
        }
      }
    }
  },
  "type": "registry:example"
}