127 Components
Sunrise Horizon
BackgroundsLayered atmospheric sky background that interpolates zenith, horizon, and solar glow gradients along a continuous solar arc from dawn to noon to dusk.
Sunrise Horizon · --time: 0.18
Dynamic Atmospheric Sky
Layered zenith, horizon, and solar radial gradients interpolated smoothly along a solar arc.
Solar Arc
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/sunrise-horizon.json"
Props
TypeScript props supported by <SunriseHorizon />.
| Prop | Type | Default | Description |
|---|---|---|---|
| time | number | "dawn" | "noon" | "dusk" | "dawn" | Time of day from 0 to 1, or a named preset ('dawn', 'noon', 'dusk'). |
| autoplay | boolean | true | Continuously animates the solar arc through the day cycle. |
| sunSize | number | 92 | Diameter of the sun orb in pixels. |
| grain | boolean | true | Overlays a subtle atmospheric grain texture. |
| children | React.ReactNode | — | Optional foreground content rendered above the horizon. |
| className | string | — | Additional Tailwind CSS classes for the container. |
Key Features
- Interpolates deep navy, violet, amber, and sky-blue stops via a normalized `time` value (0 to 1) or named presets ('dawn', 'noon', 'dusk').
- Translates the sun orb and radial horizon bloom along a sinusoidal arc behind SVG mountain silhouettes.
- Includes interactive Dawn/Noon/Dusk preset buttons and a live solar-arc scrubber out of the box.
Keyboard & Accessibility
- Decorative sky layers and SVG silhouettes are marked with `aria-hidden='true'`.
- Interactive time scrubber and play/pause controls include explicit `aria-label` attributes.
- Supports pausing continuous sky animation at any time.