127 Components
Shooting Stars
BackgroundsAtmospheric meteor shower background that spawns diagonal shooting stars with glowing heads and transparent gradient tails at configurable intervals.
Shooting Stars · 35° Trajectory
Meteor Shower Streaking
Randomized diagonal meteors with bright heads and linear-gradient tails that fade out smoothly over a 1-second lifecycle.
Max Concurrent: 6 · Frequency: 2.5/s
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:lucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/shooting-stars.json"
Props
TypeScript props supported by <ShootingStars />.
| Prop | Type | Default | Description |
|---|---|---|---|
| frequency | number | 2.5 | Average number of shooting stars spawned per second. |
| angle | number | 35 | Diagonal travel angle in degrees. |
| color | string | "#FFFFFF" | Hex or RGB color of the meteor head and tail. |
| maxConcurrent | number | 6 | Maximum number of shooting stars visible at the same time. |
| children | React.ReactNode | — | Optional foreground content rendered above the meteor shower. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Spawns meteors at randomized coordinates and intervals with a glowing head and fading linear-gradient tail.
- Configurable trajectory `angle`, `frequency`, `color`, and `maxConcurrent` limit.
- Automatically cleans up each meteor after its ~1-second lifecycle.
Keyboard & Accessibility
- Marks decorative `<canvas>` and starfield layers with `aria-hidden='true'`.
- Maintains crisp white text legibility over the `#05070F` space backdrop.
- Interactive 'Spawn Meteor' trigger is keyboard accessible.