{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"progressive-blur","type":"registry:component","description":"Progressive blur component.","files":[{"path":"components/ui/progressive-blur.tsx","type":"registry:component","content":"\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { type HTMLMotionProps, motion } from \"motion/react\";\n\nexport const GRADIENT_ANGLES = {\n\ttop: 0,\n\tright: 90,\n\tbottom: 180,\n\tleft: 270,\n};\n\nexport type ProgressiveBlurProps = {\n\tdirection?: keyof typeof GRADIENT_ANGLES;\n\tblurLayers?: number;\n\tclassName?: string;\n\tblurIntensity?: number;\n} & HTMLMotionProps<\"div\">;\n\nexport function ProgressiveBlur({\n\tdirection = \"bottom\",\n\tblurLayers = 8,\n\tclassName,\n\tblurIntensity = 0.25,\n\t...props\n}: ProgressiveBlurProps) {\n\tconst layers = Math.max(blurLayers, 2);\n\tconst segmentSize = 1 / (blurLayers + 1);\n\n\treturn (\n\t\t<div className={cn(\"relative\", className)}>\n\t\t\t{Array.from({ length: layers }).map((_, index) => {\n\t\t\t\tconst angle = GRADIENT_ANGLES[direction];\n\t\t\t\tconst gradientStops = [\n\t\t\t\t\tindex * segmentSize,\n\t\t\t\t\t(index + 1) * segmentSize,\n\t\t\t\t\t(index + 2) * segmentSize,\n\t\t\t\t\t(index + 3) * segmentSize,\n\t\t\t\t].map(\n\t\t\t\t\t(pos, posIndex) =>\n\t\t\t\t\t\t`rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`\n\t\t\t\t);\n\n\t\t\t\tconst gradient = `linear-gradient(${angle}deg, ${gradientStops.join(\n\t\t\t\t\t\", \"\n\t\t\t\t)})`;\n\n\t\t\t\treturn (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-0 rounded-[inherit]\"\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmaskImage: gradient,\n\t\t\t\t\t\t\tWebkitMaskImage: gradient,\n\t\t\t\t\t\t\tbackdropFilter: `blur(${index * blurIntensity}px)`,\n\t\t\t\t\t\t\tWebkitBackdropFilter: `blur(${index * blurIntensity}px)`,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</div>\n\t);\n}\n"}],"dependencies":["motion"]}