{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progressive-blur",
  "title": "Progressive Blur",
  "description": "Progressive blur overlay that fades focus toward one edge.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/progressive-blur/progressive-blur.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Side the blur ramps toward. */\nexport type ProgressiveBlurDirection = \"bottom\" | \"left\" | \"right\" | \"top\";\n\n/** Props for {@link ProgressiveBlur}. */\nexport type ProgressiveBlurProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Peak blur radius in pixels at the strongest layer. Defaults to `8`. */\n  blur?: number;\n  /** Side the blur ramps toward. Defaults to `\"bottom\"`. */\n  direction?: ProgressiveBlurDirection;\n  /** Count of stacked blur layers. Defaults to `5`. */\n  layers?: number;\n};\n\nfunction layerMask(direction: ProgressiveBlurDirection, index: number): string {\n  const start = (index / 5) * 100;\n  const mid = ((index + 1) / 5) * 100;\n  return `linear-gradient(to ${direction}, transparent ${String(start)}%, black ${String(mid)}%)`;\n}\n\n/**\n * Stack of layers whose blur ramps progressively toward one side.\n *\n * @example\n * ```tsx\n * <ProgressiveBlur direction=\"bottom\" blur={12} />\n * ```\n */\nexport const ProgressiveBlur = ({\n  blur = 8,\n  className,\n  direction = \"bottom\",\n  layers = 5,\n  ref,\n  ...props\n}: ProgressiveBlurProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const bands = Array.from({ length: layers }, (_, index) => index);\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden\",\n        className,\n      )}\n      ref={ref}\n      {...props}\n    >\n      {bands.map((index) => {\n        const mask = layerMask(direction, index);\n        return (\n          <div\n            className=\"absolute inset-0\"\n            key={index}\n            style={{\n              backdropFilter: `blur(${((index + 1) / layers) * blur}px)`,\n              maskImage: mask,\n              WebkitMaskImage: mask,\n            }}\n          />\n        );\n      })}\n    </div>\n  );\n};\nProgressiveBlur.displayName = \"ProgressiveBlur\";\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}