# Synthwave Sunset — `synthwave-sunset@1.0.0`

An 80s outrun sunset: a striped sun behind neon-edged mountains and a glowing grid racing to the horizon. Loops perfectly.

The retro-futurist sunset of 80s album covers and synthwave videos: a huge sun striped with gaps that slide down towards the horizon, low-poly mountains with glowing ridge lines and a faint wireframe, a neon grid racing over a dark plain into a hazy horizon with the sun's glow lying on it, stars overhead and palm silhouettes either side. Soft VHS scan lines finish it. Choose the palette (outrun pink and cyan, Miami teal and pink, orange haze or pastel vaporwave), the palms, the grid's speed, the sun's size and the scan lines.

- Kind: background; status: published; digest sha256:e1b9648c29d7f679f884cb7eb1c3325e90eadf2e126c5c3a6ef374ff70a3c84d
- Role: Background (WebGL shader, full frame): a retro neon backdrop for titles, music and gaming content.
- Implementation: three; entry `src/synthwave-sunset.js`
- Files: https://aipixelwizard.com/registry/synthwave-sunset/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/synthwave-sunset.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/synthwave-sunset/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/synthwave-sunset/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `three@0.185.1` (source) — Renderer and the full-screen shader.; `apw-runtime@1.0.0` (demo) — Demo harness.

## Exports
- `createSynthwaveSunset({ palette?, palms?, scanlines?, speed?, sun?, seed? }) => { scene, camera, material, setSize(width, height), update(time, loopSeconds), dispose() }` — The whole sunset as one full-screen shader: render its scene with its camera, after setSize and update.
- `PALETTES: { outrun, miami, haze, vapor }` — The colour sets: sky, horizon, sun, grid, mountains, ridge light and floor.

## Parameters
- `palette` (select one of outrun | miami | haze | vapor, default "outrun") — Palette
- `palms` (boolean, default true) — Palm trees
- `speed` (integer 4–32, default 12) — Grid speed: Grid squares passed per loop.
- `sun` (number 0.6–1.4, default 1) — Sun size
- `scanlines` (number 0–0.4, default 0.12) — Scan lines
- `seed` (integer 1–999, default 4) — Seed: Changes the mountains and the stars.

## Composition
- Inputs: Time within the loop; the palette, palms, speed, sun size and scan lines.
- Outputs: A full frame, drawn by one shader on a full-screen quad.
- Coordinates: Screen space: the horizon sits a little below the middle, the sun centred on it.
- Lighting: Self-lit: every glow is part of the shader.
- Timing: update(time, loopSeconds) sets the loop phase; frames render in any order.
- Works with: kinetic-title, neon-sign, rolling-counter
- No textures: mountains, stars and palms are drawn from functions, antialiased at any size.
- Keep speed a whole number for a seamless loop.

## Output and loop
- 1080×1080, 30 fps, 8 s, procedural
- Seamless loop: yes — The grid passes a whole number of squares per loop, the sun's bands slide two whole bands, the stars twinkle whole cycles and the camera's drift is a sine of the loop, so the last frame meets the first.
- Verified 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)); deterministic: yes; loop check: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.

## Use it
New project: Create a WebGLRenderer, createSynthwaveSunset(), call setSize with the canvas size, then each frame update(time, loopSeconds) and renderer.render(sunset.scene, sunset.camera).

Existing project: Copy src/synthwave-sunset.js and render it into a render target as the background of your scene, or first with autoClear off.

Reuse ideas:
- Music video: the Outrun preset with your artist name in chrome lettering over the sky.
- Stream overlay: Miami nights behind a webcam frame.
- Title card: Neon Sign's lettering over Orange haze.

## Limitations
- The camera faces the sun; the view is fixed apart from a gentle drift.
- No text: add a title with Kinetic Title or Neon Sign.

## License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.
- three.js 0.185.1: MIT (https://github.com/mrdoob/three.js)

Provenance: Adapted from the owner's threejs-sketches/light-atmosphere/neon-grid (MIT), rebuilt for AI Pixel Wizard in October 2026 as one antialiased shader: a banded sun, low-poly mountains with lit ridges and wireframe, a perspective neon grid with haze and the sun's reflection, stars, palms, scan lines, four palettes and the frame/time contract.