{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"motion-primitives-progressive-blur","type":"registry:component","title":"Progressive Blur","description":"Tailark motion primitives progressive-blur component","dependencies":["motion"],"registryDependencies":["@tailark/core-utils"],"files":[{"path":"core/motion-primitives/progressive-blur.tsx","type":"registry:component","target":"@ui/motion-primitives/progressive-blur.tsx","content":"'use client'\nimport { cn } from '@/lib/utils'\nimport { LazyMotion, domAnimation, m, type HTMLMotionProps } from 'motion/react'\n\nconst GRADIENT_ANGLES = {\n    top: 0,\n    right: 90,\n    bottom: 180,\n    left: 270,\n}\n\nexport type ProgressiveBlurProps = {\n    direction?: keyof typeof GRADIENT_ANGLES\n    blurLayers?: number\n    className?: string\n    blurIntensity?: number\n} & HTMLMotionProps<'div'>\n\nexport function ProgressiveBlur({ direction = 'bottom', blurLayers = 8, className, blurIntensity = 0.25, ...props }: ProgressiveBlurProps) {\n    const layers = Math.max(blurLayers, 2)\n    const segmentSize = 1 / (blurLayers + 1)\n\n    return (\n        <LazyMotion features={domAnimation}>\n        <div className={cn('relative', className)}>\n            {Array.from({ length: layers }).map((_, index) => {\n                const angle = GRADIENT_ANGLES[direction]\n                const gradientStops = [index * segmentSize, (index + 1) * segmentSize, (index + 2) * segmentSize, (index + 3) * segmentSize].map((pos, posIndex) => `rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`)\n\n                const gradient = `linear-gradient(${angle}deg, ${gradientStops.join(', ')})`\n\n                return (\n                    <m.div\n                        key={index}\n                        className=\"pointer-events-none absolute inset-0 rounded-[inherit]\"\n                        style={{\n                            maskImage: gradient,\n                            WebkitMaskImage: gradient,\n                            backdropFilter: `blur(${index * blurIntensity}px)`,\n                        }}\n                        {...props}\n                    />\n                )\n            })}\n        </div>\n    \n        </LazyMotion>)\n}\n"}]}