Meteors
A lightweight, highly aesthetic animated meteor shower effect that streams diagonal glowing celestial light beams across cards, badges, hero containers, and call-to-action sections.
Palette:
Meteors Stream
Meteor Stream Engine
Hardware-accelerated CSS keyframe streaks streaming seamlessly across cards and hero containers.
Card Micro-Motion
Zero JavaScript Runtime
Pure CSS keyframe transforms with randomized distribution and automatic prefers-reduced-motion support.
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/meteors
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| number | number | 20 | Total number of animated meteor streaks to generate |
| color | string | '#94A3B8' | Luminous head color and halo glow tint |
| trailColor | string | '#64748B' | Base color of the gradient fading tail |
| tailLength | number | 60 | Length in pixels of each meteor streak tail |
| angle | number | 215 | Flight trajectory angle in degrees (215° is down-left) |
| minDelay | number | 0.2 | Minimum animation delay in seconds |
| maxDelay | number | 1.2 | Maximum animation delay in seconds |
| minDuration | number | 2 | Minimum animation duration in seconds |
| maxDuration | number | 8 | Maximum animation duration in seconds |
| className | string | — | Additional CSS classes for container positioning |
| children | ReactNode | — | Optional content rendered above or inside the meteor container |