Firmament
A cold night sky: three parallax layers of stars in icy white, pale blue, and rare cool violet over a blue-violet nebula lit from below, crossed by occasional downward-falling shooting stars with gravity-bent trails. Mouse and scroll parallax, offscreen-paused, reduced-motion-safe.
oglpro
Pro
The preview is live. The source is Pro.
One purchase, lifetime access: every pro component's source, CLI install with your own registry token, and all future drops.
Installation
CLI
npx shadcn@latest add @crucible/firmamentManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string] | a cold night palette: ice blue over blue-violet | Nebula tones: [horizonGlow, zenithSmoke]. The first lights the nebula from below; the second takes over as it climbs. Any hex strings. |
| density | number | 0.45 | Star population, 0–1. 1 fills the sky; 0.3 is sparse. |
| speed | number | 1 | Twinkle and smoke-drift speed multiplier. 1 = default. |
| heat | number | 0.4 | Heat, 0–1. Scales star brightness, nebula glow, and drift energy together: 0 is a banked, dying sky; 1 blazes. |
| parallax | number | 0.6 | Mouse + scroll parallax strength, 0–1. Near star layers shift more than far ones as the pointer moves or the page scrolls. 0 locks the sky. |
| shootingStars | number | 3 | Average shooting stars per minute — each falls DOWNWARD with a gravity-bent trail. 0 disables. |
| paused | boolean | Freeze the animation, holding the current frame. | |
| className | string | Extra classes for the wrapper. Positioned absolute inset-0 -z-10. |
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.