127 Components
Planet Horizon
BackgroundsOrbital sunrise-from-space hero background featuring a twinkling starfield, a giant curved planetary sphere with a multi-layered glowing atmospheric limb, and an animated anamorphic solar flare cresting along the terminator.
Orbital Sunrise
Atmospheric Limb
Curved planetary horizon with Rayleight atmospheric scattering
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/planet-horizon.json"
Props
TypeScript props supported by <PlanetHorizon />.
| Prop | Type | Default | Description |
|---|---|---|---|
| atmosphereColor | string | "#38BDF8" | Hex color of the glowing planetary atmospheric limb. |
| flareColor | string | "#FDE047" | Hex color of the cresting solar flare core and diffraction rays. |
| flarePosition | number | 0.5 | Normalized position (0 to 1) of the sun along the horizon when autoplay is disabled. |
| autoplay | boolean | true | Whether the solar flare smoothly orbits along the planetary horizon. |
| starDensity | number | 140 | Number of twinkling background stars rendered above the planet. |
| children | React.ReactNode | — | Optional foreground hero content rendered over the horizon. |
| className | string | — | Additional CSS classes for the root container. |
Key Features
- Curved planetary sphere with multi-layered radial exosphere and razor-thin bright limb edge
- Animated solar crest with horizontal anamorphic lens flare streaks and chromatic iris ghosts
- Twinkling deep-space starfield automatically occluded by the planetary body
- Supports both continuous orbital autoplay and manual solar flare scrubbing from 0 to 1
- Built-in atmospheric theme presets (Terra Dawn, Exoplanet Violet, Martian Amber)
Keyboard & Accessibility
- Canvas is marked aria-hidden so foreground hero copy and CTAs remain cleanly navigable
- Includes play/pause orbital motion toggle for users who prefer stationary lighting