Play

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

Terminal

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

Terminal

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.