Skip to content

Synthwave Sunset

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

Background, V1 Effects3DSeamless loop, verified255 lines of codev1.0.0

In Light, glass & shine, Craft & heritage

Next: Disco BallSurprise me

Synthwave Sunset preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

12

Grid squares passed per loop.

1
0.12
4

Changes the mountains and the stars.

The preview runs the same code your AI receives. These settings travel with the hand-off.

Info

What it is

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.

Reuse it in your own idea

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

Which part is reusable

src/synthwave-sunset.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

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

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/synthwave-sunset.js
Exports
  • createSynthwaveSunset({ palette?, palms?, scanlines?, speed?, sun?, seed? }) => { scene, camera, material, setSize(width, height), update(time, loopSeconds), dispose() }
  • PALETTES: { outrun, miami, haze, vapor }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer and the full-screen shader.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

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.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — 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.
Tested
Rendered 240 frames on 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)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
One full-screen pass with no textures. Smooth at 1080p on laptop GPUs and most phones. Software WebGL (no GPU) renders slowly.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- synthwave-sunset/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:e1b9648c29d7f679…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT). License details
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.
BinMore like this

Disco Ball

Background3DSeamless loop12 seconds

Lava Lamp

3D object3DSeamless loop15 seconds

Hologram

3D object3DSeamless loop12 seconds

Hourglass

3D object3DSeamless loop16 seconds