{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "fuzzy-overlay",
  "type": "registry:block",
  "title": "Fuzzy overlay",
  "description": "Fuzzy overlay",
  "files": [
    {
      "path": "components/usages/fuzzyoverlayusage.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { motion } from \"motion/react\";\r\n\r\nexport default function FuzzyOverlayUsage() {\r\n\treturn (\r\n\t\t// NOTE: An overflow of hidden will be required on a wrapping\r\n\t\t// element to see expected results\r\n\t\t<div className=\"relative overflow-hidden\">\r\n\t\t\t<ExampleContent />\r\n\t\t\t<FuzzyOverlay />\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst FuzzyOverlay = () => {\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tinitial={{ transform: \"translateX(-10%) translateY(-10%)\" }}\r\n\t\t\tanimate={{\r\n\t\t\t\ttransform: \"translateX(10%) translateY(10%)\",\r\n\t\t\t}}\r\n\t\t\ttransition={{\r\n\t\t\t\trepeat: Infinity,\r\n\t\t\t\tduration: 0.2,\r\n\t\t\t\tease: \"linear\",\r\n\t\t\t\trepeatType: \"mirror\",\r\n\t\t\t}}\r\n\t\t\t// You can download these PNGs here:\r\n\t\t\t// https://www.hover.dev/black-noise.png\r\n\t\t\t// https://www.hover.dev/noise.png\r\n\t\t\tstyle={{\r\n\t\t\t\tbackgroundImage: 'url(\"/black-noise.png\")',\r\n\t\t\t\t// backgroundImage: 'url(\"/noise.png\")',\r\n\t\t\t}}\r\n\t\t\tclassName=\"pointer-events-none absolute -inset-full opacity-15\"\r\n\t\t/>\r\n\t);\r\n};\r\n\r\nconst ExampleContent = () => {\r\n\treturn (\r\n\t\t<div className=\"relative grid h-screen place-content-center space-y-6 bg-background p-8\">\r\n\t\t\t<p className=\"text-center text-6xl font-black text-secondary\">\r\n\t\t\t\tFuzzy Overlay Usage\r\n\t\t\t</p>\r\n\t\t\t<p className=\"text-center text-secondary\">\r\n\t\t\t\tThis is a basic example of using a lo-fi fuzzy overlay 📺\r\n\t\t\t</p>\r\n\t\t\t<div className=\"flex items-center justify-center gap-3\">\r\n\t\t\t\t<button className=\"text-secondary w-fit px-4 py-2 font-semibold text-secondary transition-colors hover:bg-background\">\r\n\t\t\t\t\tPricing\r\n\t\t\t\t</button>\r\n\t\t\t\t<button className=\"w-fit bg-background px-4 py-2 font-semibold text-secondary transition-colors hover:bg-background\">\r\n\t\t\t\t\tTry it free\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/fuzzyoverlayusage.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { motion } from \"motion/react\";\r\n\r\nexport default function FuzzyOverlayUsage() {\r\n\treturn (\r\n\t\t// NOTE: An overflow of hidden will be required on a wrapping\r\n\t\t// element to see expected results\r\n\t\t<div className=\"relative overflow-hidden\">\r\n\t\t\t<ExampleContent />\r\n\t\t\t<FuzzyOverlay />\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst FuzzyOverlay = () => {\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tinitial={{ transform: \"translateX(-10%) translateY(-10%)\" }}\r\n\t\t\tanimate={{\r\n\t\t\t\ttransform: \"translateX(10%) translateY(10%)\",\r\n\t\t\t}}\r\n\t\t\ttransition={{\r\n\t\t\t\trepeat: Infinity,\r\n\t\t\t\tduration: 0.2,\r\n\t\t\t\tease: \"linear\",\r\n\t\t\t\trepeatType: \"mirror\",\r\n\t\t\t}}\r\n\t\t\t// You can download these PNGs here:\r\n\t\t\t// https://www.hover.dev/black-noise.png\r\n\t\t\t// https://www.hover.dev/noise.png\r\n\t\t\tstyle={{\r\n\t\t\t\tbackgroundImage: 'url(\"/black-noise.png\")',\r\n\t\t\t\t// backgroundImage: 'url(\"/noise.png\")',\r\n\t\t\t}}\r\n\t\t\tclassName=\"pointer-events-none absolute -inset-full opacity-15\"\r\n\t\t/>\r\n\t);\r\n};\r\n\r\nconst ExampleContent = () => {\r\n\treturn (\r\n\t\t<div className=\"relative grid h-screen place-content-center space-y-6 bg-background p-8\">\r\n\t\t\t<p className=\"text-center text-6xl font-black text-secondary\">\r\n\t\t\t\tFuzzy Overlay Usage\r\n\t\t\t</p>\r\n\t\t\t<p className=\"text-center text-secondary\">\r\n\t\t\t\tThis is a basic example of using a lo-fi fuzzy overlay 📺\r\n\t\t\t</p>\r\n\t\t\t<div className=\"flex items-center justify-center gap-3\">\r\n\t\t\t\t<button className=\"text-secondary w-fit px-4 py-2 font-semibold text-secondary transition-colors hover:bg-background\">\r\n\t\t\t\t\tPricing\r\n\t\t\t\t</button>\r\n\t\t\t\t<button className=\"w-fit bg-background px-4 py-2 font-semibold text-secondary transition-colors hover:bg-background\">\r\n\t\t\t\t\tTry it free\r\n\t\t\t\t</button>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/fuzzy-overlay.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { cn } from \"@/registry/utilities/cn\";\r\nimport { motion } from \"motion/react\";\r\n\r\nconst FuzzyOverlay = ({ className }: { className?: string }) => {\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tinitial={{ transform: \"translateX(-10%) translateY(-10%)\" }}\r\n\t\t\tanimate={{\r\n\t\t\t\ttransform: \"translateX(10%) translateY(10%)\",\r\n\t\t\t}}\r\n\t\t\ttransition={{\r\n\t\t\t\trepeat: Infinity,\r\n\t\t\t\tduration: 0.2,\r\n\t\t\t\tease: \"linear\",\r\n\t\t\t\trepeatType: \"mirror\",\r\n\t\t\t}}\r\n\t\t\t// You can download these PNGs here:\r\n\t\t\t// https://www.hover.dev/black-noise.png\r\n\t\t\t// https://www.hover.dev/noise.png\r\n\t\t\tstyle={{\r\n\t\t\t\tbackgroundImage: 'url(\"/dist/local/black-noise.png\")',\r\n\t\t\t\t// backgroundImage: 'url(\"local/noise.png\")',\r\n\t\t\t}}\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"pointer-events-none absolute -inset-full opacity-0\",\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t/>\r\n\t);\r\n};\r\n\r\nexport default FuzzyOverlay;\r\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"
    }
  ]
}