āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/adityakishore0/scrollx-ui/components/backgroundmeteors ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<ComponentPreview name="backgroundmeteors-demo" className="p-0" description="" />
<Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />
<Step>Copy and paste the following code into your project.</Step>
<p> <code>backgroundmeteors.tsx</code> </p> <ComponentSource name="backgroundmeteors" /> </Steps> </TabsContent> </Tabs>import BackgroundMeteors from "@/components/ui/backgroundmeteors";
<BackgroundMeteors>
<h1 className="text-xl text-center text-gray-800 dark:text-gray-100">
Welcome to the Meteor Show
</h1>
</BackgroundMeteors>
BackgroundMeteors is a React component that creates an animated background featuring vertical meteor-like beams falling from the top to the bottom of the screen over a grid pattern. It supports light and dark mode styling and automatically regenerates beams to keep the animation continuous.
<PropsTable rows={[ { prop: "children", type: "ReactNode", default: "ā", description: "Content rendered centered above the meteor animation." } ]} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā