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 */}

); } `,__rawStringJsx__:`import React from "react"; import { Meteors } from "../ui/meteors"; export function MeteorsDemo() { return (

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)(r.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" Meteors"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "../ui/meteors"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" MeteorsDemo"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'""'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative w-full max-w-xl"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"absolute inset-0 h-full w-full scale-[0.80] transform rounded-full bg-red-500 bg-gradient-to-r from-blue-500 to-teal-500 blur-3xl"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative flex h-full flex-col items-start justify-end overflow-hidden rounded-2xl border border-gray-800 bg-gray-900 px-4 py-8 shadow-xl"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"div"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"mb-4 flex h-5 w-5 items-center justify-center rounded-full border border-gray-500"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"svg"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" xmlns"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" fill"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"none"'})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" viewBox"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"0 0 24 24"'})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" strokeWidth"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"1.5"'})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" stroke"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"currentColor"'})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"h-2 w-2 text-gray-300"'})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"path"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" strokeLinecap"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"round"'})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" strokeLinejoin"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"round"'})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" d"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"'})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"h1"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative z-50 mb-4 text-xl font-bold text-white"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Meteors because they"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"&"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"apos"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"re cool"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"p"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"relative z-50 mb-4 text-base font-normal text-slate-500"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" I don"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"&"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"apos"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"t know what to write so I"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"&"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"apos"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"ll just paste something"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" cool here. One more sentence because lorem ipsum is just"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" unacceptable. Won"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"&"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"apos"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:"t ChatGPT the shit out of this."})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"button"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"rounded-lg border border-gray-500 px-4 py-1 text-gray-300"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:">"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" Explore"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"/* Meaty part - Meteor effect */"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"Meteors"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" number"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"20"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" />"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})}),` `,(0,e.jsxs)(r.h2,{id:"installation",children:[(0,e.jsx)(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(r.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(o,{defaultValue:"manual",children:[(0,e.jsxs)(t,{children:[(0,e.jsx)(l,{value:"cli",children:"CLI"}),(0,e.jsx)(l,{value:"manual",children:"Manual"})]}),(0,e.jsx)(n,{value:"cli",children:(0,e.jsxs)(b,{children:[(0,e.jsx)(d,{children:"Run the following command"}),(0,e.jsx)(r.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(r.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npx shadcn@latest add https://ui.aceternity.com/registry/meteors.json `,__npmCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/meteors.json `,__yarnCommand__:`npx shadcn@latest add https://ui.aceternity.com/registry/meteors.json `,__pnpmCommand__:`pnpm dlx shadcn@latest add https://ui.aceternity.com/registry/meteors.json `,__bunCommand__:`bun x --bun shadcn@latest add https://ui.aceternity.com/registry/meteors.json `,children:(0,e.jsx)(r.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npx"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" shadcn@latest"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" add"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" https://ui.aceternity.com/registry/meteors.json"})]})})})}),(0,e.jsx)(d,{children:"Choose your Tailwind CSS version"}),(0,e.jsxs)(o,{defaultValue:"v4",children:[(0,e.jsxs)(t,{children:[(0,e.jsx)(l,{value:"v4",children:"Tailwind CSS v4"}),(0,e.jsx)(l,{value:"v3",children:"Tailwind CSS v3"})]}),(0,e.jsxs)(n,{value:"v4",children:[(0,e.jsx)("p",{children:"For Tailwind CSS v4, add this to your CSS file:"}),(0,e.jsx)(r.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(r.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"css","data-theme":"BeardedTheme Arc",__rawString__:`@theme inline { --animate-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)(r.code,{"data-language":"css","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"@theme"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" inline "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" --animate-meteor-effect: meteor 5s linear infinite;"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" @keyframes"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" meteor"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 0% "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transform"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" rotate"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"215deg"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" translateX"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 70% "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 100% "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transform"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" rotate"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"215deg"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" translateX"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"-500px"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})})]}),(0,e.jsxs)(n,{value:"v3",children:[(0,e.jsx)("p",{children:"For Tailwind CSS v3, add this to your tailwind.config.js:"}),(0,e.jsx)(r.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(r.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"js","data-theme":"BeardedTheme Arc",__rawString__:`/** @type {import('tailwindcss').Config} */ module.exports = { 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", }, }, }, }, }, }; `,__rawStringJsx__:`/** @type {import('tailwindcss').Config} */ module.exports = { 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)(r.code,{"data-language":"js","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"/** "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"@type"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B78AFF","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"import('tailwindcss').Config"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" */"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"module"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"exports"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" theme"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" extend"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" animation"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "meteor-effect"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "meteor 5s linear infinite"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" keyframes"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" meteor"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0%"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transform"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "rotate(215deg) translateX(0)"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "1"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "70%"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "1"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "100%"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transform"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "rotate(215deg) translateX(-500px)"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})]})]})]})}),(0,e.jsx)(n,{value:"manual",children:(0,e.jsxs)(b,{children:[(0,e.jsx)(d,{children:"Install dependencies"}),(0,e.jsx)(r.figure,{"data-rehype-pretty-code-figure":"",children:(0,e.jsx)(r.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"bash","data-theme":"BeardedTheme Arc",__rawString__:`npm i motion clsx tailwind-merge `,children:(0,e.jsx)(r.code,{"data-language":"bash","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"npm"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" i"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" motion"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" clsx"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:" tailwind-merge"})]})})})}),(0,e.jsx)(d,{children:"Add util file"}),(0,e.jsxs)(r.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(r.figcaption,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"BeardedTheme Arc",children:"lib/utils.ts"}),(0,e.jsx)(r.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,e.jsxs)(r.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" clsx"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "clsx"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "tailwind-merge"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" function"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" cn"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(..."}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"inputs"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" ClassValue"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"[])"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" twMerge"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"clsx"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"inputs"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"));"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})]}),(0,e.jsx)(d,{children:"Add the animation to your CSS"}),(0,e.jsxs)(o,{defaultValue:"v4",children:[(0,e.jsxs)(t,{children:[(0,e.jsx)(l,{value:"v4",children:"Tailwind CSS v4"}),(0,e.jsx)(l,{value:"v3",children:"Tailwind CSS v3"})]}),(0,e.jsx)(n,{value:"v4",children:(0,e.jsxs)(r.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(r.figcaption,{"data-rehype-pretty-code-title":"","data-language":"css","data-theme":"BeardedTheme Arc",children:"app/globals.css"}),(0,e.jsx)(r.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"css","data-theme":"BeardedTheme Arc",__rawString__:`@theme inline { --animate-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)(r.code,{"data-language":"css","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"@theme"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" inline "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" --animate-meteor-effect: meteor 5s linear infinite;"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" "})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" @keyframes"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" meteor"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 0% "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transform"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" rotate"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"215deg"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" translateX"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"0"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 70% "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B5BDCC",color:"var(--shiki-bearded)"},children:" 100% "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"{"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transform"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" rotate"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"215deg"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" translateX"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"-500px"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})})]})})]})}),(0,e.jsx)(n,{value:"v3",children:(0,e.jsxs)(r.figure,{"data-rehype-pretty-code-figure":"",children:[(0,e.jsx)(r.figcaption,{"data-rehype-pretty-code-title":"","data-language":"js","data-theme":"BeardedTheme Arc",children:"tailwind.config.js"}),(0,e.jsx)(r.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"js","data-theme":"BeardedTheme Arc",__rawString__:`/** @type {import('tailwindcss').Config} */ module.exports = { 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", }, }, }, }, }, }; `,__rawStringJsx__:`/** @type {import('tailwindcss').Config} */ module.exports = { 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)(r.code,{"data-language":"js","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"/** "}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"@type"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B78AFF","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"import('tailwindcss').Config"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:"}"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" */"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"module"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"exports"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" theme"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" extend"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" animation"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "meteor-effect"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "meteor 5s linear infinite"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" keyframes"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" meteor"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0%"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transform"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "rotate(215deg) translateX(0)"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "1"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "70%"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "1"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "100%"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" transform"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "rotate(215deg) translateX(-500px)"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "0"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" },"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})]})})]}),(0,e.jsx)(d,{children:"Copy the source code"}),(0,e.jsx)(r.p,{children:(0,e.jsx)(r.code,{children:"components/ui/meteors.tsx"})}),(0,e.jsx)(h,{name:"meteors",children:(0,e.jsx)(r.figure,{__src__:"/src/registry/default/ui/meteors.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,e.jsx)(r.pre,{className:"BeardedTheme Arc",style:{"--shiki-bearded":"#d3d8e1","--shiki-bearded-bg":"#1c2433"},tabIndex:"0","data-language":"tsx","data-theme":"BeardedTheme Arc",__rawString__:`"use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; 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) => { const meteorCount = number || 20; // Calculate position to evenly distribute meteors across container width const position = idx * (800 / meteorCount) - 400; // Spread across 800px range, centered return ( ); })} ); }; `,__rawStringJsx__:`"use client"; import { cn } from "@/lib/utils"; import { motion } from "motion/react"; import React from "react"; export const Meteors = ({ number, className }) => { const meteors = new Array(number || 20).fill(true); return ( {meteors.map((el, idx) => { const meteorCount = number || 20; // Calculate position to evenly distribute meteors across container width const position = idx * (800 / meteorCount) - 400; // Spread across 800px range, centered return ( ); })} ); }; `,__src__:"/src/registry/default/ui/meteors.tsx",__style__:"default",children:(0,e.jsxs)(r.code,{"data-language":"tsx","data-theme":"BeardedTheme Arc",style:{display:"grid"},children:[(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"use client"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" cn"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "@/lib/utils"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" motion"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "motion/react"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"import"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" React"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" from"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "react"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:"export"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" Meteors"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ({"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" number"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}:"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" number"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" number"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"?:"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:" string"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"})"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" meteors"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" new"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:" Array"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:"number"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ||"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 20"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")."}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"fill"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#E35535",color:"var(--shiki-bearded)"},children:"true"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:");"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#B78AFF",color:"var(--shiki-bearded)"},children:"motion.div"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" initial"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" animate"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" opacity"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 1"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" transition"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" duration"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 0.5"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"meteors"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"map"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"(("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:"el"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#F38CEC",color:"var(--shiki-bearded)"},children:" idx"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" =>"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" {"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" meteorCount"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" number"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" ||"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 20"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Calculate position to evenly distribute meteors across container width"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#22ECDB",color:"var(--shiki-bearded)"},children:" const"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" position"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ="}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" idx"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"800"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" /"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" meteorCount"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 400"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:";"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Spread across 800px range, centered"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:" "}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" return"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" <"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"span"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" key"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:'"meteor"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" idx"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"}"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"cn"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "animate-meteor-effect absolute h-0.5 w-0.5 rotate-[45deg] rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:` "before:absolute before:top-1/2 before:h-[1px] before:w-[50px] before:-translate-y-[50%] before:transform before:bg-gradient-to-r before:from-[#64748b] before:to-transparent before:content-['']"`}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" className"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" )}"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" style"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"={{"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" top"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "-40px"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Start above the container"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" left"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF738A",color:"var(--shiki-bearded)"},children:" position"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "px"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" animationDelay"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"random"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 5"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "s"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Random delay between 0-5s"})]}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E1",color:"var(--shiki-bearded)"},children:" animationDuration"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:":"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" Math"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"floor"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"Math"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"."}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FF",color:"var(--shiki-bearded)"},children:"random"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"()"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" *"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" ("}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:"10"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" -"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 5"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#FF955C",color:"var(--shiki-bearded)"},children:" 5"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:")"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#EACD61",color:"var(--shiki-bearded)"},children:" +"}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#3CEC85",color:"var(--shiki-bearded)"},children:' "s"'}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:","}),(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#54617B","--shiki-bearded-font-style":"italic",color:"var(--shiki-bearded)"},children:" // Keep some randomness in duration"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" }}"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" >"})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" })}"})}),` `,(0,e.jsxs)(r.span,{"data-line":"",children:[(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#69C3FFAA",color:"var(--shiki-bearded)"},children:" "})]}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:" );"})}),` `,(0,e.jsx)(r.span,{"data-line":"",children:(0,e.jsx)(r.span,{style:{"--shiki-bearded":"#D3D8E160",color:"var(--shiki-bearded)"},children:"};"})})]})})})})]})})]}),` `,(0,e.jsxs)(r.h2,{id:"props",children:[(0,e.jsx)(r.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(r.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(r.table,{children:[(0,e.jsx)(r.thead,{children:(0,e.jsxs)(r.tr,{children:[(0,e.jsx)(r.th,{children:"Prop name"}),(0,e.jsx)(r.th,{children:"Type"}),(0,e.jsx)(r.th,{children:"Description"})]})}),(0,e.jsxs)(r.tbody,{children:[(0,e.jsxs)(r.tr,{children:[(0,e.jsx)(r.td,{children:(0,e.jsx)(r.code,{children:"className"})}),(0,e.jsx)(r.td,{children:(0,e.jsx)(r.code,{children:"string"})}),(0,e.jsx)(r.td,{children:"The class name of the child component."})]}),(0,e.jsxs)(r.tr,{children:[(0,e.jsx)(r.td,{children:(0,e.jsx)(r.code,{children:"number"})}),(0,e.jsx)(r.td,{children:(0,e.jsx)(r.code,{children:"number"})}),(0,e.jsx)(r.td,{children:"The number of meteors you want in the card"})]})]})]})]})}function D(i={}){let{wrapper:r}=i.components||{};return r?(0,e.jsx)(r,{...i,children:(0,e.jsx)(v,{...i})}):v(i)}function s(i,r){throw new Error("Expected "+(r?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(_);})(); ;return Component;

Best Free Testimonial Components for your Tailwind CSS and React project

Aceternity UI