║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Meteors date: 2023-07-13 description: A meteor shower effect. author: dillionverma published: true video: https://cdn.magicui.design/meteors.mp4

<ComponentPreview name="meteors-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/meteors

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="meteors" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the required CSS animations</Step>

Add the following animations to your global CSS file.

@theme inline {
  --animate-meteor: meteor 5s linear infinite;

  @keyframes meteor {
    0% {
      transform: rotate(var(--angle)) translateX(0);
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      transform: rotate(var(--angle)) translateX(-500px);
      opacity: 0;
    }
  }
}

</Steps> </TabsContent> </Tabs>

Usage

import { Meteors } from "@/components/ui/meteors"

<div className="relative h-[500px] w-full overflow-hidden">
  <Meteors />
</div>

Props

Meteors

| Prop | Type | Default | Description | | ------------- | -------- | ------- | ------------------------------------------------------- | | number | number | 20 | Number of meteors | | minDelay | number | 0.2 | Minimum delay in seconds before meteor animation starts | | maxDelay | number | 1.2 | Maximum delay in seconds before meteor animation starts | | minDuration | number | 2 | Minimum duration in seconds for meteor animation | | maxDuration | number | 10 | Maximum duration in seconds for meteor animation | | angle | number | 215 | Angle in degrees for meteor trajectory | | className | string | - | Optional additional CSS classes |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║