crucıble

Sunset

A vaporwave / retrowave sunset: a big banded retro sun (its lower half cut by thickening scanline gaps) sits on the horizon over a neon perspective grid receding across a dark reflective ocean, under a chrome gradient sky (magenta → indigo → cyan) with twinkling stars, a silhouetted mountain range, and the sun's wavering reflection on the water. Original OGL fragment shader with a passive grid scroll and breathing glow, screen-space-anti-aliased grid, exponential-toned, dithered, DPR-clamped, offscreen-paused, reduced-motion-safe.

oglpro

Installation

CLI

npx shadcn@latest add @crucible/sunset

Manual — install dependencies, then copy the source

npm install ogl

Props

PropTypeDefaultDescription
colors[string, string, string]a magenta-sun / indigo-sky / cyan-grid vaporwave palette. Pass e.g. ["#ff7a3c", "#3a1d5e", "#ff2d95"] for a sunset-orange scene with a magenta gridThree signature tones: [sun, sky, grid]. sun is the retro sun's upper band and its horizon glow (the sun grades from warm amber at its base up to this hue), sky the indigo body of the gradient sky and its reflection in the ocean, grid the neon line color of the perspective floor and the cool top of the sky.
speednumber1Passive-motion speed multiplier — grid scroll toward the viewer, sun-glow breathing, star twinkle. 1 = default, 2 = twice as fast, 0 = frozen scene.
intensitynumber1Overall luminosity of the sun glow, neon grid, star field, and horizon haze, 0–2. 1 = default; lower banks the neon into a moody dusk, higher blazes into full retrowave.
pausedbooleanFreeze the animation at an aesthetic static sunset 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.