Nebula
A deep-space interstellar gas cloud: domain-warped fbm shader billowing luminous folds through a cool indigo-violet-into-teal gradient, with dark dust lanes, a twinkling starfield, and a soft depth glow. Original OGL fragment shader, hard-dithered, DPR-clamped, offscreen-paused, reduced-motion-safe; a ghost pointer keeps it moving when untouched.
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/nebulaManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string, string] | Four tones: [void, violet, teal, core]. void is the deep-space base the gas floats on (near-black indigo), violet and teal are the two hue families the gas drifts between, core is the whisper of magenta at the brightest emission cores. Any hex string. | |
| speed | number | 1 | Drift speed multiplier. 1 = default (very slow), 2 = twice as fast. |
| intensity | number | 1 | Emission brightness / bloom of the gas, 0–2. 1 = default. Higher lifts the luminous cores; lower reads as thinner, more distant gas. |
| dust | number | 1 | Strength of the dark dust lanes threading through the gas, 0–1. 0 removes the absorption filaments entirely; 1 = full contrast structure. |
| idle | boolean | true | Idle autoplay: after ~1.5s with no real pointer, a seeded ghost pointer leans the gas on a slow drift so it never looks dead in thumbnails and heroes; the real pointer takes over instantly. Never runs under reduced motion. |
| paused | boolean | Freeze the animation at its current frame. | |
Also accepts all props of React.ComponentPropsWithoutRef<"div"> — they pass through to the underlying element. | |||
Honors prefers-reduced-motion with a designed static fallback, pauses offscreen and on hidden tabs, and passes className through.