127 Components
Horizon Light
BackgroundsWebGL planetary horizon limb shader with a razor-sharp incandescent core, volumetric FBM atmospheric corona, interactive solar apex tracking, and 8-bit dithered bloom.
GLSL Planetary Limb SDF · 4-Octave FBM
Atmospheric Scatter & Solar Corona
Planetary horizon light with volumetric god-rays.
Move your pointer across the horizon arc to shift the solar apex in real time. Rendered via a signed-distance planetary sphere and 8-bit dithered atmospheric bloom.
APEX ELEVATION: 43%
Horizon Arc
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:clsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/horizon-light.json"
Props
TypeScript props supported by <HorizonLight />.
| Prop | Type | Default | Description |
|---|---|---|---|
| primaryColor | string | "#FF4D1C" | Primary atmospheric scatter color (International Vermilion by default). |
| secondaryColor | string | "#FF8A3D" | Inner solar corona glow color. |
| deepColor | string | "#6E1404" | Outer deep atmospheric bloom color. |
| coreColor | string | "#FFF3E0" | Razor-sharp incandescent planetary limb core color. |
| horizonHeight | number | 0.43 | Vertical position of the planetary horizon apex (0.2 to 0.75). |
| intensity | number | 1.0 | Multiplier for atmospheric bloom and limb brightness. |
| speed | number | 1.0 | Animation speed multiplier for volumetric god-rays. |
| interactive | boolean | true | Whether pointer movement shifts the solar apex along the horizon curve. |
| themeMode | "dark" | "light" | "auto" | "dark" | Selects dark eclipse mode, warm bone light mode, or syncs with page theme. |
Key Features
- Signed-distance planetary sphere (SDF) creating a crisp curved horizon limb
- 4-octave Fractional Brownian Motion (FBM) polar god-rays radiating from the solar apex
- Damped pointer tracking that gently shifts the solar apex along the curved arc
- Supports both Eclipse Dark (#0c0c0b) and Architectural Bone Light (#f4f1ea) shader surfaces
- High-frequency optical filmic dither to eliminate 8-bit gradient banding
Keyboard & Accessibility
- Respects prefers-reduced-motion by freezing temporal ray animation
- Canvas is marked aria-hidden so screen readers focus strictly on foreground content