An endless neon wireframe landscape under a striped sunset.
A grid of terrain heights from layered noise scrolls toward the camera. Each grid point is projected with a simple perspective divide and connected into glowing lines, with a valley carved down the middle for the road. A striped sun, a gradient sky and stars complete the 1980s look. All of it is plain 2D canvas paths.
Try it. Move the pointer left and right to bank. Hold the pointer down to boost.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an endless 1980s synthwave flyover with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Paint a sky gradient from deep purple to hot pink at the horizon, with twinkling stars.
- Draw a big sun sitting on the horizon with a yellow-to-pink vertical gradient. Cut stripes out of its lower half that thicken toward the bottom.
- Build a terrain grid: about 40 rows and 40 columns of points spaced 2 units apart. Heights come from a small noise function you write yourself, with a flat valley about 7 units wide down the middle for a road.
- Project every point with a perspective divide: screenX = centerX + x * focal / z and screenY = horizonY - (height - cameraHeight) * focal / z.
- Move the camera forward every frame, anchoring rows to world coordinates so hills do not wobble.
- Draw the strips from far to near: fill each strip dark first, then stroke its magenta grid lines, so nearer hills hide the lines behind them.
Once that works, make it beautiful:
- Fade lines into the haze with distance and give the near ones a neon glow with shadowBlur.
- Draw the road in the valley with cyan edges and scrolling center dashes.
- Bank the camera toward the mouse by rotating the whole scene, and boost speed while the mouse is held down.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as palm tree silhouettes, a CRT scanline filter, or a low-poly car to drive.
