Raceway
A warp-tunnel light highway: cold-white light trails stream out of a central vanishing point and cool to steel-blue at the frame edges, one narrow cyan fast lane, the whole corridor bending through slow curves. Click and hold to accelerate — the FOV widens, streaks smear into long exposures, and release ghosts a dimmer copy one frame behind (shutter-drag) before snapping to cruise. Original OGL fragment shader, DPR-clamped, offscreen-paused, reduced-motion-safe.
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/racewayManual — install dependencies, then copy the source
npm install oglProps
| Prop | Type | Default | Description |
|---|---|---|---|
| colors | [string, string, string] | ["#e8f0ff", "#3466a0", "#26d8f0"] | Three tones: [core, edge, fast]. core is the hot streak core (cold white), edge is the color streaks cool toward at the frame edges (steel-blue), fast is the narrow "fast-lane" accent (cyan). Any hex. |
| speed | number | 1 | Cruise speed multiplier. 1 = default, 2 = twice as fast. |
| intensity | number | 1 | Overall brightness / exposure of the light trails. 1 = default. Higher blows the brightest streaks further into bloom. |
| density | number | 26 | Angular streak density (spokes around the vanishing point). |
| streakLength | number | 0.55 | Cruise streak length as a fraction of the gap between streaks, 0–1. Longer reads as more motion blur even before you accelerate. |
| curve | number | 1 | How much the tunnel bends/sways through curves. 0 = dead straight, 1 = default, higher corkscrews harder. |
| acceleration | number | 1.9 | Click-and-hold acceleration multiplier — how much faster the flow rushes while the pointer is held down. |
| paused | boolean | false | 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.