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

Aceternity UI