{
  "name": "progressive-blur-basic",
  "type": "registry:ui",
  "componentName": "progressive-blur",
  "description": "Basic implementation of the progressive blur effect.",
  "files": [
    {
      "path": "progressive-blur-basic.tsx",
      "content": "import { ProgressiveBlur } from '@/components/core/progressive-blur';\n\nexport function ProgressiveBlurBasic() {\n  return (\n    <div className='relative my-4 aspect-square w-[300px] overflow-hidden rounded-[4px]'>\n      <img\n        src='https://cdn.cosmos.so/c4653e73-d082-42e9-87d2-5377d7e6a7f3?format=jpeg'\n        alt='Benjamin Spiers - Moonlight 2023'\n        className='absolute inset-0'\n      />\n      <ProgressiveBlur\n        className='pointer-events-none absolute bottom-0 left-0 h-[50%] w-full'\n        blurIntensity={6}\n      />\n      <div className='absolute bottom-0 left-0'>\n        <div className='flex flex-col items-start gap-0 px-5 py-4'>\n          <p className='text-base font-medium text-white'>Benjamin Spiers</p>\n          <span className='mb-2 text-base text-zinc-300'>Moonlight 2023</span>\n          <p className='text-base text-white'>Oil on linen. 40cm by 30cm</p>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    },
    {
      "path": "components/core/progressive-blur.tsx",
      "content": "'use client';\nimport { cn } from '@/lib/utils';\nimport { HTMLMotionProps, motion } from 'motion/react';\n\nexport const 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({\n  direction = 'bottom',\n  blurLayers = 8,\n  className,\n  blurIntensity = 0.25,\n  ...props\n}: ProgressiveBlurProps) {\n  const layers = Math.max(blurLayers, 2);\n  const segmentSize = 1 / (blurLayers + 1);\n\n  return (\n    <div className={cn('relative', className)}>\n      {Array.from({ length: layers }).map((_, index) => {\n        const angle = GRADIENT_ANGLES[direction];\n        const gradientStops = [\n          index * segmentSize,\n          (index + 1) * segmentSize,\n          (index + 2) * segmentSize,\n          (index + 3) * segmentSize,\n        ].map(\n          (pos, posIndex) =>\n            `rgba(255, 255, 255, ${posIndex === 1 || posIndex === 2 ? 1 : 0}) ${pos * 100}%`\n        );\n\n        const gradient = `linear-gradient(${angle}deg, ${gradientStops.join(\n          ', '\n        )})`;\n\n        return (\n          <motion.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              WebkitBackdropFilter: `blur(${index * blurIntensity}px)`,\n            }}\n            {...props}\n          />\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}