Meteors

) } `,__src__:"registry/miami/example/meteors-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Meteors "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/meteors'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" MeteorDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Meteors"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" number"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"30"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Meteors"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,n.jsx)(e.figure,{__src__:"registry/default/example/meteors-demo.tsx","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`import Meteors from '~/components/ui/meteors' export function MeteorDemo() { return (

Meteors

) } `,__src__:"registry/default/example/meteors-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Meteors "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" '~/components/ui/meteors'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" MeteorDemo"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"bg-background relative flex size-full max-w-lg items-center justify-center overflow-hidden rounded-lg border p-20 md:shadow-xl"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Meteors"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" number"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"30"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"} />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"p"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"z-10 whitespace-pre-wrap text-center text-5xl font-medium tracking-tighter text-black dark:text-white"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Meteors"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,n.jsxs)(e.h3,{id:"installation",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(d,{defaultValue:"cli",children:[(0,n.jsxs)(p,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(c,{value:"cli",children:(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"bash","data-theme":"github-dark",__rawString__:`npx nyxb@latest add meteors `,__npmCommand__:`npx nyxb@latest add meteors `,__yarnCommand__:`npx nyxb@latest add meteors `,__pnpmCommand__:`pnpm dlx nyxb@latest add meteors `,__bunCommand__:`bunx --bun nyxb@latest add meteors `,children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npx"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" nyxb@latest"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" add"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" meteors"})]})})})})}),(0,n.jsx)(c,{value:"manual",children:(0,n.jsxs)(s,{children:[(0,n.jsx)(e.p,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"ts","data-theme":"github-dark",__rawString__:`// tailwind.config.ts module.exports = { theme: { extend: { animation: { meteor: "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,n.jsxs)(e.code,{"data-language":"ts","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"// tailwind.config.ts"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"module"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"exports"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" theme: {"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" extend: {"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" animation: {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" meteor: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"meteor 5s linear infinite"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" keyframes: {"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" meteor: {"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "0%"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:": { transform: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"rotate(215deg) translateX(0)"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", opacity: "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "70%"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:": { opacity: "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"1"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' "100%"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:": {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" transform: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"rotate(215deg) translateX(-500px)"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" opacity: "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),(0,n.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"text","data-theme":"github-dark",__rawString__:`components/ui/meteors.tsx `,children:(0,n.jsx)(e.code,{"data-language":"text","data-theme":"github-dark",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{children:"components/ui/meteors.tsx"})})})})}),(0,n.jsxs)(o,{name:"meteors",children:[(0,n.jsx)(e.figure,{__src__:"registry/miami/ui/meteors.tsx",__style__:"miami","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import clsx from 'clsx' import { useEffect, useState } from 'react' interface MeteorsProps { number?: number } export function Meteors({ number = 20 }: MeteorsProps) { const [meteorStyles, setMeteorStyles] = useState>( [], ) useEffect(() => { const styles = [...new Array(number)].map(() => ({ top: -5, left: \`\${Math.floor(Math.random() * window.innerWidth)}px\`, animationDelay: \`\${Math.random() * 1 + 0.2}s\`, animationDuration: \`\${Math.floor(Math.random() * 8 + 2)}s\`, })) setMeteorStyles(styles) }, [number]) return ( <> {[...meteorStyles].map((style, idx) => ( // Meteor Head {/* Meteor Tail */}

))} ) } export Meteors `,__src__:"registry/miami/ui/meteors.tsx",__style__:"miami",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" clsx "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'clsx'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useEffect, useState } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" MeteorsProps"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" number"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" number"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Meteors"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"number"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 20"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" MeteorsProps"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"meteorStyles"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setMeteorStyles"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Array"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"React"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"CSSProperties"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">>("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" [],"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" styles"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"...new"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Array"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(number)]."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" top: "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"5"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" left: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"floor"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"random"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"innerWidth"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}px`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" animationDelay: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"random"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 0.2"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}s`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" animationDuration: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"floor"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"random"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 8"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 2"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}s`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }))"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setMeteorStyles"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(styles)"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [number])"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {["}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"meteorStyles]."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"idx"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Meteor Head"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{idx}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"clsx"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" style"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{style}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/* Meteor Tail */"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Meteors"})]})]})})}),(0,n.jsx)(e.figure,{__src__:"registry/default/ui/meteors.tsx",__style__:"default","data-rehype-pretty-code-figure":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e",color:"#e1e4e8"},tabIndex:"0","data-language":"tsx","data-theme":"github-dark",__rawString__:`'use client' import clsx from 'clsx' import { useEffect, useState } from 'react' interface MeteorsProps { number?: number } export function Meteors({ number = 20 }: MeteorsProps) { const [meteorStyles, setMeteorStyles] = useState>( [], ) useEffect(() => { const styles = [...new Array(number)].map(() => ({ top: -5, left: \`\${Math.floor(Math.random() * window.innerWidth)}px\`, animationDelay: \`\${Math.random() * 1 + 0.2}s\`, animationDuration: \`\${Math.floor(Math.random() * 8 + 2)}s\`, })) setMeteorStyles(styles) }, [number]) return ( <> {[...meteorStyles].map((style, idx) => ( // Meteor Head {/* Meteor Tail */}

))} ) } export Meteors `,__src__:"registry/default/ui/meteors.tsx",__style__:"default",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"github-dark",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'use client'"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" clsx "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'clsx'"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { useEffect, useState } "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'react'"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"interface"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" MeteorsProps"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:" number"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"?:"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" number"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Meteors"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"number"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 20"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" MeteorsProps"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"meteorStyles"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"setMeteorStyles"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"] "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useState"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Array"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"React"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"CSSProperties"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">>("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" [],"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" useEffect"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" styles"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ["}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"...new"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" Array"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(number)]."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ({"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" top: "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"-"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"5"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" left: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"floor"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"random"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" window"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"innerWidth"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}px`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" animationDelay: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"random"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 1"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 0.2"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}s`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" animationDuration: "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"`${"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"floor"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"("}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Math"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"random"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"() "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"*"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 8"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" +"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:" 2"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:")"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"}s`"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }))"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" setMeteorStyles"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(styles)"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, [number])"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <>"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {["}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"meteorStyles]."}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"map"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(("}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"style"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(e.span,{style:{color:"#FFAB70"},children:"idx"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:" // Meteor Head"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"span"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{idx}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"clsx"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" 'pointer-events-none absolute left-1/2 top-1/2 h-0.5 w-0.5 rotate-[215deg] animate-meteor rounded-[9999px] bg-slate-500 shadow-[0_0_0_1px_#ffffff10]'"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )}"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" style"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{style}"})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" >"})}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#6A737D"},children:"/* Meteor Tail */"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"pointer-events-none absolute top-1/2 -z-10 h-px w-[50px] -translate-y-1/2 bg-gradient-to-r from-slate-500 to-transparent"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ))}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Meteors"})]})]})})})]})]})})]}),` `,(0,n.jsxs)(e.h2,{id:"props",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,n.jsxs)(e.h3,{id:"meteors",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#meteors",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Meteors"]}),` `,(0,n.jsxs)(e.table,{children:[(0,n.jsx)(e.thead,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.th,{children:"Prop"}),(0,n.jsx)(e.th,{children:"Type"}),(0,n.jsx)(e.th,{children:"Description"}),(0,n.jsx)(e.th,{children:"Default"})]})}),(0,n.jsx)(e.tbody,{children:(0,n.jsxs)(e.tr,{children:[(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"number"}),(0,n.jsx)(e.td,{children:"Number of meteors"}),(0,n.jsx)(e.td,{children:"20"})]})})]})]})}function m(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,{...l,children:(0,n.jsx)(F,{...l})}):F(l)}function a(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return M(w);})(); ;return Component;