{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "meteors",
  "type": "registry:block",
  "title": "Meteors",
  "description": "Meteors",
  "files": [
    {
      "path": "components/usages/meteorsusage.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { Meteors } from \"@/registry/open-source/meteors\";\r\n\r\nexport default function MeteorsDemo() {\r\n\treturn (\r\n\t\t<div className=\"\">\r\n\t\t\t<div className=\"relative w-full max-w-xl\">\r\n\t\t\t\t<div className=\"absolute inset-0 h-full w-full scale-[0.80] transform rounded-full bg-red-500 bg-linear-to-r from-blue-500 to-teal-500 blur-3xl\" />\r\n\t\t\t\t<div className=\"relative flex h-full flex-col items-start justify-end overflow-hidden rounded-2xl border border-gray-800 bg-background px-4 py-8 shadow-xl\">\r\n\t\t\t\t\t<div className=\"mb-4 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500\">\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\r\n\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\tclassName=\"h-2 w-2 text-secondary\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\r\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\r\n\t\t\t\t\t\t\t\td=\"M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<h1 className=\"relative z-50 mb-4 text-xl font-bold text-secondary\">\r\n\t\t\t\t\t\tMeteors because they&apos;re cool\r\n\t\t\t\t\t</h1>\r\n\r\n\t\t\t\t\t<p className=\"relative z-50 mb-4 text-base font-normal text-slate-500\">\r\n\t\t\t\t\t\tI don&apos;t know what to write so I&apos;ll just paste\r\n\t\t\t\t\t\tsomething cool here. One more sentence because lorem ipsum is\r\n\t\t\t\t\t\tjust unacceptable. Won&apos;t ChatGPT the shit out of this.\r\n\t\t\t\t\t</p>\r\n\r\n\t\t\t\t\t<button className=\"rounded-lg border border-gray-500 px-4 py-1 text-secondary\">\r\n\t\t\t\t\t\tExplore\r\n\t\t\t\t\t</button>\r\n\r\n\t\t\t\t\t{/* Meaty part - Meteor effect */}\r\n\t\t\t\t\t<Meteors number={20} />\r\n\t\t\t\t</div>\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/meteorsusage.tsx",
      "content": "import React from \"react\";\r\n\r\nimport { Meteors } from \"@/registry/open-source/meteors\";\r\n\r\nexport default function MeteorsDemo() {\r\n\treturn (\r\n\t\t<div className=\"\">\r\n\t\t\t<div className=\"relative w-full max-w-xl\">\r\n\t\t\t\t<div className=\"absolute inset-0 h-full w-full scale-[0.80] transform rounded-full bg-red-500 bg-linear-to-r from-blue-500 to-teal-500 blur-3xl\" />\r\n\t\t\t\t<div className=\"relative flex h-full flex-col items-start justify-end overflow-hidden rounded-2xl border border-gray-800 bg-background px-4 py-8 shadow-xl\">\r\n\t\t\t\t\t<div className=\"mb-4 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500\">\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\r\n\t\t\t\t\t\t\tstrokeWidth=\"1.5\"\r\n\t\t\t\t\t\t\tstroke=\"currentColor\"\r\n\t\t\t\t\t\t\tclassName=\"h-2 w-2 text-secondary\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\r\n\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\r\n\t\t\t\t\t\t\t\td=\"M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<h1 className=\"relative z-50 mb-4 text-xl font-bold text-secondary\">\r\n\t\t\t\t\t\tMeteors because they&apos;re cool\r\n\t\t\t\t\t</h1>\r\n\r\n\t\t\t\t\t<p className=\"relative z-50 mb-4 text-base font-normal text-slate-500\">\r\n\t\t\t\t\t\tI don&apos;t know what to write so I&apos;ll just paste\r\n\t\t\t\t\t\tsomething cool here. One more sentence because lorem ipsum is\r\n\t\t\t\t\t\tjust unacceptable. Won&apos;t ChatGPT the shit out of this.\r\n\t\t\t\t\t</p>\r\n\r\n\t\t\t\t\t<button className=\"rounded-lg border border-gray-500 px-4 py-1 text-secondary\">\r\n\t\t\t\t\t\tExplore\r\n\t\t\t\t\t</button>\r\n\r\n\t\t\t\t\t{/* Meaty part - Meteor effect */}\r\n\t\t\t\t\t<Meteors number={20} />\r\n\t\t\t\t</div>\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/meteors.tsx",
      "content": "import React from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\n\n// https://ui.aceternity.com/components/meteors\n\nexport const Meteors = ({\n\tnumber,\n\tclassName,\n}: {\n\tnumber?: number;\n\tclassName?: string;\n}) => {\n\tconst meteors = new Array(number || 20).fill(true);\n\treturn (\n\t\t<>\n\t\t\t{meteors.map((el, idx) => (\n\t\t\t\t<span\n\t\t\t\t\tkey={\"meteor\" + idx}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"animate-meteor-effect absolute top-1/2 left-1/2 h-0.5 w-0.5 rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10] rotate-215\",\n\t\t\t\t\t\t\"before:content-[''] before:absolute before:top-1/2 before:transform before:-translate-y-[50%] before:w-[50px] before:h-px before:bg-linear-to-r before:from-[#64748b] before:to-transparent\",\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\tleft: Math.floor(Math.random() * (400 - -400) + -400) + \"px\",\n\t\t\t\t\t\tanimationDelay: Math.random() * (0.8 - 0.2) + 0.2 + \"s\",\n\t\t\t\t\t\tanimationDuration:\n\t\t\t\t\t\t\tMath.floor(Math.random() * (10 - 2) + 2) + \"s\",\n\t\t\t\t\t}}\n\t\t\t\t></span>\n\t\t\t))}\n\t\t</>\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"
    }
  ]
}