# Afterlight documentation

> Play Afterlight, use its controls and keyboard shortcuts, share scenes, understand how the WebGL and Web Audio engine works, and run it locally.

Project page: https://dbaney.com/projects/afterlight/

## Play

Open [Afterlight](https://baney75.github.io/afterlight/). Hold and drag the light, then release it to let the field settle. Choose **Nebula**, **Bloom** or **Tidal**, and adjust flow, energy and color.

| Control | What it does |
| --- | --- |
| Send a pulse | Makes an expanding wave. |
| Sound | Turns on the ambient synth; gestures play notes. |
| Save image | Downloads a PNG without the controls. |
| Share scene | Copies a link that restores the world, palette, variation, flow and energy. |
| Hide controls | Gives the artwork the whole screen. |

## Keyboard

| Key | Action |
| --- | --- |
| 1, 2, 3 | Change world |
| P | Send a pulse |
| R | New variation |
| S | Toggle sound |
| Space | Pause |
| H | Hide controls |
| Arrow keys | Pull the light (when the field is focused) |
| Esc | Restore controls or close a dialog |

Shortcuts do not override form controls or browser shortcuts. Reduced motion starts paused; press **Resume motion** to animate. Hidden tabs stop rendering and suspend sound. If WebGL cannot start, a simpler Canvas 2D artwork appears.

## How it works

Seeded particle positions feed custom WebGL shaders that morph between three forms, color by position and respond to an attractor and an expanding pulse. A separate Web Audio graph produces the pad and gesture notes. Scene settings live in the URL fragment.

| File | Role |
| --- | --- |
| `src/engine.js` | Rendering, fallback, animation lifecycle and image export |
| `src/audio.js` | Opt-in synthesis and audio lifecycle |
| `src/state.js` | Bounded, versioned URL state |
| `src/main.js` | Controls, input, sharing and accessibility |

## Run locally

Requires Node.js 22.12 or newer.

```sh
git clone https://github.com/baney75/afterlight.git
cd afterlight
npm ci
npm run dev
```

```sh
npm test
npx playwright install chromium
npm run test:browser
npm run build
```

Browser tests cover scene changes, pause and reduced motion, URL restoration, image export, missing WebGL, sound lifecycle and layouts at desktop, phone and landscape sizes. `dist/` is a static site that can be hosted in a subdirectory.