# Sunset — WebGL Background for React

> 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; a ghost pointer keeps it moving when untouched.

- Page: https://crucibleui.com/components/backgrounds/sunset
- 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/sunset
```

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

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

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 (`SunsetProps`)

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `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 grid` | Three 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. |
| `speed?` | `number` | `1` | Passive-motion speed multiplier — grid scroll toward the viewer, sun-glow breathing, star twinkle. 1 = default, 2 = twice as fast, 0 = frozen scene. |
| `intensity?` | `number` | `1` | Overall 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. |
| `idle?` | `boolean` | `true` | Idle autoplay: after ~1.5s with no real pointer, a seeded ghost pointer sways the scene 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 an aesthetic static sunset frame. |

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 { Sunset } from "@/components/crucible/sunset";
import { DemoScene } from "@/components/registry/demo-scene";

export default function SunsetDemo() {
  return (
    <DemoScene
      background={<Sunset />}
      headline="Chase the horizon"
      subhead="A banded retro sun over a neon grid receding across a reflective ocean. Move your cursor to sway the scene."
    />
  );
}
```

## 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.