# Raceway — WebGL Background for React

> 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; idles on its own when untouched — ghost steering and the occasional boost.

- Page: https://crucibleui.com/components/backgrounds/raceway
- Category: [backgrounds](https://crucibleui.com/backgrounds)
- Tier: pro (one-time purchase, see https://crucibleui.com/pricing)
- Engine: ogl
- npm dependencies: ogl

## Install

```bash
npx shadcn@latest add @crucible/raceway
```

Pro install requires adding the token-bearing `@crucible` registry to components.json (issued at https://crucibleui.com/account after purchase).

Import from `@/components/crucible/raceway`.

Backgrounds render `absolute inset-0 -z-10`. Their parent must be a stacking context — wrap in `relative isolate` and put your content in a `relative z-10` child, or the background disappears behind an opaque ancestor.

## Props (`RacewayProps`)

| 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. |
| `idle?` | `boolean` | `true` | Idle autoplay: after ~1.5s with no real pointer, a seeded ghost steers the corridor through slow drifts and every several seconds punches a short boost (with the release ghost), so thumbnails and heroes never sit still; the real pointer takes over instantly. Never runs under reduced motion. |
| `paused?` | `boolean` | `false` | Freeze the animation at its current frame. |
| `ref?` | `React.Ref<RacewayHandle>` | — | React 19 ref prop → {@link RacewayHandle}. |

Also accepts: `React.ComponentPropsWithoutRef<"div">`.

## Usage example

`DemoScene` is a site-only preview harness, not part of the component — replace it with your own layout.

```tsx
import { Raceway } from "@/components/crucible/raceway";
import { DemoScene } from "@/components/registry/demo-scene";

export default function RacewayDemo() {
  return (
    <DemoScene
      background={<Raceway />}
      headline="Night shift"
      subhead="A tunnel of light trails rushing past. Click and hold anywhere to accelerate, then release."
    />
  );
}
```

## Accessibility & performance

Honors `prefers-reduced-motion` with a designed static frame or fade (never a blank box) and passes `className` through. Pauses offscreen and on hidden tabs, clamps device pixel ratio, and tears down its GL/canvas context on unmount.