{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progressive-blur",
  "type": "registry:block",
  "title": "Progressive blur",
  "description": "Progressive blur",
  "files": [
    {
      "path": "components/usages/progressiveblurusage.tsx",
      "content": "import { useState } from \"react\";\n\nimport Image from \"next/image\";\n\nimport { ProgressiveBlur } from \"@/registry/open-source/progressive-blur\";\nimport { motion } from \"motion/react\";\n\nexport default function ProgressiveBlurUsage() {\n\tconst [isHover, setIsHover] = useState(false);\n\n\treturn (\n\t\t<section className=\"flex\">\n\t\t\t<div className=\"relative my-4 aspect-square w-[300px] overflow-hidden rounded-[4px]\">\n\t\t\t\t<Image\n\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\twidth={100}\n\t\t\t\t\theight={100}\n\t\t\t\t\talt=\"Benjamin Spiers - Moonlight 2023\"\n\t\t\t\t\tclassName=\"absolute inset-0\"\n\t\t\t\t/>\n\t\t\t\t<ProgressiveBlur\n\t\t\t\t\tclassName=\"pointer-events-none absolute bottom-0 left-0 h-[50%] w-full\"\n\t\t\t\t\tblurIntensity={6}\n\t\t\t\t/>\n\t\t\t\t<div className=\"absolute bottom-0 left-0\">\n\t\t\t\t\t<div className=\"flex flex-col items-start gap-0 px-5 py-4\">\n\t\t\t\t\t\t<p className=\"text-base font-medium text-secondary\">\n\t\t\t\t\t\t\tBenjamin Spiers\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<span className=\"mb-2 text-base text-secondary\">\n\t\t\t\t\t\t\tMoonlight 2023\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p className=\"text-base text-secondary\">\n\t\t\t\t\t\t\tOil on linen. 40cm by 30cm\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"relative my-4 aspect-square h-[300px] overflow-hidden rounded-[4px]\"\n\t\t\t\tonMouseEnter={() => setIsHover(true)}\n\t\t\t\tonMouseLeave={() => setIsHover(false)}\n\t\t\t>\n\t\t\t\t<Image\n\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\twidth={100}\n\t\t\t\t\theight={100}\n\t\t\t\t\talt=\"John Martin - Pandemonium\"\n\t\t\t\t\tclassName=\"absolute inset-0\"\n\t\t\t\t/>\n\t\t\t\t<ProgressiveBlur\n\t\t\t\t\tclassName=\"pointer-events-none absolute bottom-0 left-0 h-[75%] w-full\"\n\t\t\t\t\tblurIntensity={0.5}\n\t\t\t\t\tanimate={isHover ? \"visible\" : \"hidden\"}\n\t\t\t\t\tvariants={{\n\t\t\t\t\t\thidden: { opacity: 0 },\n\t\t\t\t\t\tvisible: { opacity: 1 },\n\t\t\t\t\t}}\n\t\t\t\t\ttransition={{ duration: 0.2, ease: \"easeOut\" }}\n\t\t\t\t/>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"absolute bottom-0 left-0\"\n\t\t\t\t\tanimate={isHover ? \"visible\" : \"hidden\"}\n\t\t\t\t\tvariants={{\n\t\t\t\t\t\thidden: { opacity: 0 },\n\t\t\t\t\t\tvisible: { opacity: 1 },\n\t\t\t\t\t}}\n\t\t\t\t\ttransition={{ duration: 0.2, ease: \"easeOut\" }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex flex-col items-start gap-0 px-5 py-4\">\n\t\t\t\t\t\t<p className=\"text-base font-medium text-secondary\">\n\t\t\t\t\t\t\tJohn Martin\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<span className=\"text-base text-secondary\">Pandemonium</span>\n\t\t\t\t\t</div>\n\t\t\t\t</motion.div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/progressiveblurusage.tsx",
      "content": "import { useState } from \"react\";\n\nimport Image from \"next/image\";\n\nimport { ProgressiveBlur } from \"@/registry/open-source/progressive-blur\";\nimport { motion } from \"motion/react\";\n\nexport default function ProgressiveBlurUsage() {\n\tconst [isHover, setIsHover] = useState(false);\n\n\treturn (\n\t\t<section className=\"flex\">\n\t\t\t<div className=\"relative my-4 aspect-square w-[300px] overflow-hidden rounded-[4px]\">\n\t\t\t\t<Image\n\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\twidth={100}\n\t\t\t\t\theight={100}\n\t\t\t\t\talt=\"Benjamin Spiers - Moonlight 2023\"\n\t\t\t\t\tclassName=\"absolute inset-0\"\n\t\t\t\t/>\n\t\t\t\t<ProgressiveBlur\n\t\t\t\t\tclassName=\"pointer-events-none absolute bottom-0 left-0 h-[50%] w-full\"\n\t\t\t\t\tblurIntensity={6}\n\t\t\t\t/>\n\t\t\t\t<div className=\"absolute bottom-0 left-0\">\n\t\t\t\t\t<div className=\"flex flex-col items-start gap-0 px-5 py-4\">\n\t\t\t\t\t\t<p className=\"text-base font-medium text-secondary\">\n\t\t\t\t\t\t\tBenjamin Spiers\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<span className=\"mb-2 text-base text-secondary\">\n\t\t\t\t\t\t\tMoonlight 2023\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<p className=\"text-base text-secondary\">\n\t\t\t\t\t\t\tOil on linen. 40cm by 30cm\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName=\"relative my-4 aspect-square h-[300px] overflow-hidden rounded-[4px]\"\n\t\t\t\tonMouseEnter={() => setIsHover(true)}\n\t\t\t\tonMouseLeave={() => setIsHover(false)}\n\t\t\t>\n\t\t\t\t<Image\n\t\t\t\t\tsrc=\"/itjustworks.jpg\"\n\t\t\t\t\twidth={100}\n\t\t\t\t\theight={100}\n\t\t\t\t\talt=\"John Martin - Pandemonium\"\n\t\t\t\t\tclassName=\"absolute inset-0\"\n\t\t\t\t/>\n\t\t\t\t<ProgressiveBlur\n\t\t\t\t\tclassName=\"pointer-events-none absolute bottom-0 left-0 h-[75%] w-full\"\n\t\t\t\t\tblurIntensity={0.5}\n\t\t\t\t\tanimate={isHover ? \"visible\" : \"hidden\"}\n\t\t\t\t\tvariants={{\n\t\t\t\t\t\thidden: { opacity: 0 },\n\t\t\t\t\t\tvisible: { opacity: 1 },\n\t\t\t\t\t}}\n\t\t\t\t\ttransition={{ duration: 0.2, ease: \"easeOut\" }}\n\t\t\t\t/>\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"absolute bottom-0 left-0\"\n\t\t\t\t\tanimate={isHover ? \"visible\" : \"hidden\"}\n\t\t\t\t\tvariants={{\n\t\t\t\t\t\thidden: { opacity: 0 },\n\t\t\t\t\t\tvisible: { opacity: 1 },\n\t\t\t\t\t}}\n\t\t\t\t\ttransition={{ duration: 0.2, ease: \"easeOut\" }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"flex flex-col items-start gap-0 px-5 py-4\">\n\t\t\t\t\t\t<p className=\"text-base font-medium text-secondary\">\n\t\t\t\t\t\t\tJohn Martin\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<span className=\"text-base text-secondary\">Pandemonium</span>\n\t\t\t\t\t</div>\n\t\t\t\t</motion.div>\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/progressive-blur.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { HTMLMotionProps, motion } from \"motion/react\";\n\n// Credit:\n// https://motion-primitives.com/docs/progressive-blur\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, ${\n\t\t\t\t\t\t\tposIndex === 1 || posIndex === 2 ? 1 : 0\n\t\t\t\t\t\t}) ${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\tkey={index + \"progressive-blur\"}\n\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-0 rounded-[inherit]\"\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}}\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",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}