Meteors because they're cool

I don't know what to write so I'll just paste something cool here. One more sentence because lorem ipsum is just unacceptable. Won't ChatGPT the shit out of this.

{/* Meaty part - Meteor effect */}

); } `,__src__:"src/registry/default/example/meteors-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"Meteors"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"../ui/meteors"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" MeteorsDemo"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'""'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'" w-full relative max-w-xs"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"absolute inset-0 h-full w-full bg-gradient-to-r from-blue-500 to-teal-500 transform scale-[0.80] bg-red-500 rounded-full blur-3xl"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"relative shadow-xl bg-gray-900 border border-gray-800 px-4 py-8 h-full overflow-hidden rounded-2xl flex flex-col justify-end items-start"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-5 w-5 rounded-full border flex items-center justify-center mb-4 border-gray-500"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"svg"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"xmlns"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"fill"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"none"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"viewBox"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0 0 24 24"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeWidth"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1.5"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"stroke"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"currentColor"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"h-2 w-2 text-gray-300"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"path"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeLinecap"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"round"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"strokeLinejoin"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"round"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"d"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"h1"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"font-bold text-xl text-white mb-4 relative z-50"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" Meteors because they"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"&"}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"apos"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:"re cool"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"font-normal text-base text-slate-500 mb-4 relative z-50"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" I don"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"&"}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"apos"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:"t know what to write so I"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"&"}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"apos"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:"ll just paste something"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" cool here. One more sentence because lorem ipsum is just"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" unacceptable. Won"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"&"}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"apos"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:"t ChatGPT the shit out of this."})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"button"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"border px-4 py-1 rounded-lg border-gray-500 text-gray-300"'}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" Explore"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#54617B",fontStyle:"italic"},children:"/* Meaty part - Meteor effect */"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"Meteors"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"/>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(c,{children:[(0,e.jsx)(r,{children:"Install dependencies"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:"npm "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"i"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"framer-motion"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:"tailwind-merge"})]})})})}),(0,e.jsx)(r,{children:"Add util file"}),(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"utils/cn.ts"}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"clsx"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"tailwind-merge"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" cn"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(..."}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"[])"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:" twMerge"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"));"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})})]})})]}),(0,e.jsxs)(r,{children:["Add this into your ",(0,e.jsx)(l.code,{children:"tailwind.config.ts"})," file "]}),(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"default",children:"tailwind.config.js"}),(0,e.jsx)(l.pre,{"data-language":"js","data-theme":"default",__withMeta__:!0,__rawString__:` theme: { extend: { animation: { "meteor-effect": "meteor 5s linear infinite", }, keyframes: { meteor: { "0%": { transform: "rotate(215deg) translateX(0)", opacity: "1" }, "70%": { opacity: "1" }, "100%": { transform: "rotate(215deg) translateX(-500px)", opacity: "0", }, }, }, }, }, `,children:(0,e.jsxs)(l.code,{"data-language":"js","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" theme"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" extend"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" animation"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"meteor-effect"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"meteor 5s linear infinite"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" keyframes"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" meteor"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0%"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"transform"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"rotate(215deg) translateX(0)"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"70%"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"1"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"100%"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"transform"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"rotate(215deg) translateX(-500px)"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"0"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"},"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})]}),(0,e.jsx)(r,{children:"Copy the source code"}),(0,e.jsx)(l.p,{children:(0,e.jsx)(l.code,{children:"components/ui/meteors.tsx"})}),(0,e.jsx)(t,{name:"meteors",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { cn } from "@/utils/cn"; import clsx from "clsx"; import React from "react"; export const Meteors = ({ number, className, }: { number?: number; className?: string; }) => { const meteors = new Array(number || 20).fill(true); return ( <> {meteors.map((el, idx) => ( ))} ); }; `,__src__:"src/registry/default/ui/meteors.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"@/utils/cn"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"clsx"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"Meteors"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#B78AFF"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#22ECDB"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"meteors"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"new"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"Array"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"number"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"||"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"20"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"fill"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E35535"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"meteors"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"el"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#F38CEC"},children:"idx"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"span"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"key"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"meteor"'}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"idx"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"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-[215deg]"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:`"before:content-[''] before:absolute before:top-1/2 before:transform before:-translate-y-[50%] before:w-[50px] before:h-[1px] before:bg-gradient-to-r before:from-[#64748b] before:to-transparent"`}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF738A"},children:"className"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"style"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"={{"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"top"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"left"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"floor"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"random"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"400"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"400"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"400"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"px"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"animationDelay"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"random"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.8"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"0.2"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"s"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E1"},children:"animationDuration"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"floor"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"Math"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#69C3FF"},children:"random"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"*"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"-"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF955C"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#EACD61"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#3CEC85"},children:'"s"'}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"}}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"))}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#69C3FFAA"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B5BDCC"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#D3D8E160"},children:"};"})})]})})})})]}),` `,(0,e.jsxs)(l.h2,{id:"props",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:"Prop name"}),(0,e.jsx)(l.th,{children:"Type"}),(0,e.jsx)(l.th,{children:"Description"})]})}),(0,e.jsxs)(l.tbody,{children:[(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"className"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"string"})}),(0,e.jsx)(l.td,{children:"The class name of the child component."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"number"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"number"})}),(0,e.jsx)(l.td,{children:"The number of meteors you want in the card"})]})]})]})]})}function N(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(p,n)})):p(n)}var b=N;function a(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return A(g);})(); ;return Component;

Aceternity UI