127 Components
Asteroid Field
BackgroundsDeep-space parallax asteroid field and meteor shower on Canvas 2D featuring procedural faceted rock polygons across three depth layers, crater shading, ambient dust motes, and high-speed bolide meteors.
Deep Space Parallax
Asteroid Field
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/asteroid-field.json"
Props
TypeScript props supported by <AsteroidField />.
| Prop | Type | Default | Description |
|---|---|---|---|
| asteroidCount | number | 32 | Total number of procedural faceted asteroids across the 3 depth layers. |
| speed | number | 1.0 | Parallax drift velocity multiplier. |
| angle | number | 18 | Drift trajectory angle in degrees. |
| meteorFrequency | number | 0.4 | Spawn probability multiplier for high-speed glowing meteors. |
| colorTheme | "basalt" | "ice" | "iron" | "basalt" | Mineral color palette applied to asteroids, craters, and meteors. |
| children | React.ReactNode | — | Optional foreground UI rendered above the asteroid field. |
| className | string | — | Additional CSS classes for the root container. |
Key Features
- Procedurally generated faceted polygon rocks with directional solar shading and surface craters
- Three distinct parallax depth planes (far, mid, near) rotating and drifting at realistic relative speeds
- High-speed glowing bolide meteors with linear gradient plasma tails
- Three mineral composition palettes: Basalt, Kuiper Ice, and Ferrous Iron
Keyboard & Accessibility
- Decorative canvas is marked aria-hidden so screen readers focus on foreground content
- Velocity slider allows slowing or pausing orbital drift for motion-sensitive users