{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progressive-blur",
  "type": "registry:ui",
  "title": "Progressive Blur",
  "description": "The Progressive Blur component adds a smooth blur gradient effect to scrollable content, indicating more content below or above.",
  "files": [
    {
      "path": "registry/magicui/progressive-blur.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface ProgressiveBlurProps {\n  className?: string\n  height?: string\n  position?: \"top\" | \"bottom\" | \"both\"\n  blurLevels?: number[]\n  children?: React.ReactNode\n}\n\nexport function ProgressiveBlur({\n  className,\n  height = \"30%\",\n  position = \"bottom\",\n  blurLevels = [0.5, 1, 2, 4, 8, 16, 32, 64],\n}: ProgressiveBlurProps) {\n  // Create array with length equal to blurLevels.length - 2 (for before/after pseudo elements)\n  const divElements = Array(blurLevels.length - 2).fill(null)\n\n  return (\n    <div\n      className={cn(\n        \"gradient-blur pointer-events-none absolute inset-x-0 z-10\",\n        className,\n        position === \"top\"\n          ? \"top-0\"\n          : position === \"bottom\"\n            ? \"bottom-0\"\n            : \"inset-y-0\"\n      )}\n      style={{\n        height: position === \"both\" ? \"100%\" : height,\n      }}\n    >\n      {/* First blur layer (pseudo element) */}\n      <div\n        className=\"absolute inset-0\"\n        style={{\n          zIndex: 1,\n          backdropFilter: `blur(${blurLevels[0]}px)`,\n          WebkitBackdropFilter: `blur(${blurLevels[0]}px)`,\n          maskImage:\n            position === \"bottom\"\n              ? `linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%)`\n              : position === \"top\"\n                ? `linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%)`\n                : `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`,\n          WebkitMaskImage:\n            position === \"bottom\"\n              ? `linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%)`\n              : position === \"top\"\n                ? `linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 12.5%, rgba(0,0,0,1) 25%, rgba(0,0,0,0) 37.5%)`\n                : `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`,\n        }}\n      />\n\n      {/* Middle blur layers */}\n      {divElements.map((_, index) => {\n        const blurIndex = index + 1\n        const startPercent = blurIndex * 12.5\n        const midPercent = (blurIndex + 1) * 12.5\n        const endPercent = (blurIndex + 2) * 12.5\n\n        const maskGradient =\n          position === \"bottom\"\n            ? `linear-gradient(to bottom, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${endPercent + 12.5}%)`\n            : position === \"top\"\n              ? `linear-gradient(to top, rgba(0,0,0,0) ${startPercent}%, rgba(0,0,0,1) ${midPercent}%, rgba(0,0,0,1) ${endPercent}%, rgba(0,0,0,0) ${endPercent + 12.5}%)`\n              : `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`\n\n        return (\n          <div\n            key={`blur-${index}`}\n            className=\"absolute inset-0\"\n            style={{\n              zIndex: index + 2,\n              backdropFilter: `blur(${blurLevels[blurIndex]}px)`,\n              WebkitBackdropFilter: `blur(${blurLevels[blurIndex]}px)`,\n              maskImage: maskGradient,\n              WebkitMaskImage: maskGradient,\n            }}\n          />\n        )\n      })}\n\n      {/* Last blur layer (pseudo element) */}\n      <div\n        className=\"absolute inset-0\"\n        style={{\n          zIndex: blurLevels.length,\n          backdropFilter: `blur(${blurLevels[blurLevels.length - 1]}px)`,\n          WebkitBackdropFilter: `blur(${blurLevels[blurLevels.length - 1]}px)`,\n          maskImage:\n            position === \"bottom\"\n              ? `linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%)`\n              : position === \"top\"\n                ? `linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%)`\n                : `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`,\n          WebkitMaskImage:\n            position === \"bottom\"\n              ? `linear-gradient(to bottom, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%)`\n              : position === \"top\"\n                ? `linear-gradient(to top, rgba(0,0,0,0) 87.5%, rgba(0,0,0,1) 100%)`\n                : `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%)`,\n        }}\n      />\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}