# Hero Background Studio

A single-file (`index.html`) studio for animated landing-page hero backgrounds.
It uses plain WebGL2, no frameworks, no build step. Open the file directly, or serve the folder
(`python3 -m http.server`) and visit `http://localhost:8000`.

## Presets

| # | Preset | Preset-specific sliders |
|---|--------|-------------------------|
| 1 | **Mesh gradient**: four drifting colour anchors, domain-warped | Warp scale, Warp amount, Edge sharpness |
| 2 | **Liquid metal**: chrome reflections on a warped flow field | Scale, Distortion, Relief |
| 3 | **Grainy aurora**: northern-light curtains, stars, film grain | Scale, Intensity, Curtain height |
| 4 | **Dithered dots**: 8×8 ordered-dither halftone | Cell size, Contrast, Dot size |
| 5 | **Flowing noise lines**: animated topographic contours | Scale, Line density, Thickness |

Every preset also has **Speed** and **Grain** sliders, plus 3–4 **colour pickers**.
Changes show up live. Each preset keeps its own settings while you switch between them.

## Controls

- **Sidebar → Presets**: click one to switch (presets crossfade).
- **Auto-cycle**: when the page is idle it moves to the next preset every **4 s**. A progress bar
  under the active preset shows the countdown. Any interaction with the sidebar or keyboard pauses it;
  cycling resumes after 5 s of inactivity. You can switch it off with the toggle or <kbd>Space</kbd>.
- **Hero copy**: shows or hides the sample headline, CTA and nav, so you can see the bare background.
- **Randomize**: random parameters and a colour palette for the current preset.
- **Reset**: restores the current preset's defaults.
- **Hide UI**: hides the studio sidebar for a clean view or a screen recording.
- **Export snippet**: builds a self-contained HTML document with the canvas, the GLSL and a tiny
  WebGL2 runtime for the current preset and its current settings, and copies it to the clipboard.
  The dialog also shows the code and has a **Download .html** button.

### Keyboard

| Key | Action |
|-----|--------|
| <kbd>1</kbd>–<kbd>5</kbd> | Select preset |
| <kbd>←</kbd> / <kbd>→</kbd> | Previous / next preset |
| <kbd>Space</kbd> | Toggle auto-cycle |
| <kbd>H</kbd> | Hide / show the studio sidebar |
| <kbd>E</kbd> | Export the current preset |
| <kbd>R</kbd> | Randomize the current preset |
| <kbd>Esc</kbd> | Close the export dialog |

### URL parameters

- `?p=2` or `?p=aurora`: start on a given preset (0-based index or id: `mesh`, `metal`, `aurora`, `dots`, `lines`)
- `?cycle=0`: start with auto-cycle off
- `?ui=0`: start with the sidebar hidden (handy for recordings)

## Performance

Each preset is a single full-screen-triangle fragment shader built from cheap 2D simplex noise.
The device pixel ratio is capped at 2. The FPS chip in the sidebar shows the frame rate and
render scale. If frames take too long, the render scale drops automatically (down to 0.5×) to hold
the frame rate. Exported snippets respect `prefers-reduced-motion` and show a CSS gradient fallback
when WebGL2 is unavailable.