Skip to main content

​
Overview

The Meteors component creates a visually stunning meteor shower animation effect. Perfect for adding dynamic backgrounds to hero sections, cards, or any UI element that needs a touch of cosmic flair.

​
Installation

Add the following entry to the inline theme in your main.css file: 
@theme inline {
  --animate-meteor-effect: meteor 5s linear infinite;
  @keyframes meteor {
    0% {
      transform: rotate(215deg) translateX(0);
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    100% {
      transform: rotate(215deg) translateX(-500px);
      opacity: 0;
    }
  }
}

​
Usage

<div class="relative overflow-hidden">
  <Meteors :count="20" />
  <div class="relative z-10">
    Your content here
  </div>
</div>

​
Props

​
count
number
default:"20"
The number of meteors to display in the animation.
​
class
string
default:""
Additional CSS classes to apply to the meteors for customization.

​
Credits

Ported from Aceternity UI’s Meteor Effect.

Build docs developers (and LLMs) love

Get started for freeTalk to us