{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bottom-blur",
  "type": "registry:block",
  "title": "Bottom blur",
  "description": "Bottom blur",
  "files": [
    {
      "path": "components/usages/bottomblurusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { BottomBlurOut } from \"@/registry/open-source/bottom-blur\";\r\n\r\nexport default function BottomBlurOutUsage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"relative w-52 dark:text-secondary\">\r\n\t\t\t\t{Array.from({ length: 20 }).map((_, index) => (\r\n\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>\r\n\t\t\t\t\t<div key={index + \"bottom-blur\"}>\r\n\t\t\t\t\t\tSunt id fugiat dolor nostrud aute eiusmod ea sint. Ea laborum\r\n\t\t\t\t\t\tdo irure et. Ea elit incididunt velit veniam anim ullamco elit\r\n\t\t\t\t\t\tsunt. Ea veniam nisi elit nostrud eu sit ut non Lorem\r\n\t\t\t\t\t\tadipisicing non ut excepteur. Sint elit cupidatat\r\n\t\t\t\t\t\treprehenderit nulla ipsum enim Lorem cillum velit veniam. Esse\r\n\t\t\t\t\t\telit sit irure Lorem. Esse aliqua incididunt amet est\r\n\t\t\t\t\t\tvoluptate esse adipisicing culpa commodo est.\r\n\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\tsrc=\"https://plus.unsplash.com/premium_photo-1727558768347-eefa5276de9d?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyfHx8ZW58MHx8fHx8\"\r\n\t\t\t\t\t\t\talt=\"random\"\r\n\t\t\t\t\t\t\twidth=\"auto\"\r\n\t\t\t\t\t\t\theight={100}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t))}\r\n\t\t\t\t<BottomBlurOut />\r\n\t\t\t</div>\r\n\t\t\t;\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/bottomblurusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { BottomBlurOut } from \"@/registry/open-source/bottom-blur\";\r\n\r\nexport default function BottomBlurOutUsage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<div className=\"relative w-52 dark:text-secondary\">\r\n\t\t\t\t{Array.from({ length: 20 }).map((_, index) => (\r\n\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>\r\n\t\t\t\t\t<div key={index + \"bottom-blur\"}>\r\n\t\t\t\t\t\tSunt id fugiat dolor nostrud aute eiusmod ea sint. Ea laborum\r\n\t\t\t\t\t\tdo irure et. Ea elit incididunt velit veniam anim ullamco elit\r\n\t\t\t\t\t\tsunt. Ea veniam nisi elit nostrud eu sit ut non Lorem\r\n\t\t\t\t\t\tadipisicing non ut excepteur. Sint elit cupidatat\r\n\t\t\t\t\t\treprehenderit nulla ipsum enim Lorem cillum velit veniam. Esse\r\n\t\t\t\t\t\telit sit irure Lorem. Esse aliqua incididunt amet est\r\n\t\t\t\t\t\tvoluptate esse adipisicing culpa commodo est.\r\n\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\tsrc=\"https://plus.unsplash.com/premium_photo-1727558768347-eefa5276de9d?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyfHx8ZW58MHx8fHx8\"\r\n\t\t\t\t\t\t\talt=\"random\"\r\n\t\t\t\t\t\t\twidth=\"auto\"\r\n\t\t\t\t\t\t\theight={100}\r\n\t\t\t\t\t\t/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t))}\r\n\t\t\t\t<BottomBlurOut />\r\n\t\t\t</div>\r\n\t\t\t;\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/bottom-blur.tsx",
      "content": "// credit:\n// https://cuicui.day/other/creative-effects\n\nexport const BottomBlurOut = () => {\n  return (\n    <div className=\"gradient-blur fixed z-10 pointer-events-none before:absolute before:inset-0 after:absolute after:inset-0 before:z-1 h-[7%] bottom-0 inset-x-0 before:backdrop-blur-[0.5px] after:backdrop-blur-[32px]\">\n      <style>{gradientBlurCss}</style>\n      {Array.from({ length: 5 }).map((_, index) => (\n        <div\n          // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>\n          key={`${index}-bottom-blur-out`}\n          className=\"absolute inset-0\"\n          style={{\n            zIndex: index + 2,\n            backdropFilter: `blur(${2 ** index}px)`,\n            WebkitBackdropFilter: `blur(${2 ** index}px)`,\n          }}\n        />\n      ))}\n    </div>\n  );\n};\n\nconst gradientBlurCss = `\n.gradient-blur:before {\n    -webkit-mask: linear-gradient(180deg, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%);\n    mask: linear-gradient(180deg, transparent 0%, #000 12.5%, #000 25%, transparent 37.5%);\n}\n\n.gradient-blur > div:nth-of-type(1) {\n    -webkit-mask: linear-gradient(180deg, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);\n    mask: linear-gradient(180deg, transparent 12.5%, #000 25%, #000 37.5%, transparent 50%);\n}\n\n.gradient-blur > div:nth-of-type(2) {\n    -webkit-mask: linear-gradient(180deg, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);\n    mask: linear-gradient(180deg, transparent 25%, #000 37.5%, #000 50%, transparent 62.5%);\n}\n\n.gradient-blur > div:nth-of-type(3) {\n    -webkit-mask: linear-gradient(180deg, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);\n    mask: linear-gradient(180deg, transparent 37.5%, #000 50%, #000 62.5%, transparent 75%);\n}\n\n.gradient-blur > div:nth-of-type(4) {\n    -webkit-mask: linear-gradient(180deg, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);\n    mask: linear-gradient(180deg, transparent 50%, #000 62.5%, #000 75%, transparent 87.5%);\n}\n\n.gradient-blur > div:nth-of-type(5) {\n    -webkit-mask: linear-gradient(180deg, transparent 62.5%, #000 75%, #000 87.5%, transparent);\n    mask: linear-gradient(180deg, transparent 62.5%, #000 75%, #000 87.5%, transparent);\n}\n\n.gradient-blur:after {\n    -webkit-mask: linear-gradient(180deg, transparent 75%, #000 87.5%, #000);\n    mask: linear-gradient(180deg, transparent 75%, #000 87.5%, #000);\n}\n`;\n",
      "type": "registry:ui"
    }
  ]
}