Build guide · Site 10 of 25

An endless highway, two planes deep.

NEON SPRAWL is one of 25 sites built by Formwork. The road runs forever — but it's only two pieces of terrain, leap-frogging past the camera on a seamless loop.

The idea

Every synthwave cover has the same three ingredients: a huge striped sun, a neon wireframe valley, and purple. So the sun is pure CSS, the terrain is real 3D, and everything glows.

The stack

• Sun / sky A CSS radial gradient with a repeating-gradient stripe mask.
• Terrain three.js (r160) wireframe planes via an import-map — no bundler.
• Depth Exponential fog tinted magenta so the grid melts into the horizon.
• Type Orbitron (display) with layered neon text-shadows.
• Host Static files on GitHub Pages.

Signature technique: the infinite loop

Two identical terrain planes sit end-to-end. Every frame both slide toward the camera; the moment one passes behind the lens it jumps two tile-lengths back to lead again:

for (const p of [planeA, planeB]) {
  p.position.z += SPEED * dt;
  if (p.position.z > TILE) p.position.z -= 2 * TILE; // leap-frog
}

The seam is invisible because the height function tiles perfectly — it only uses sine waves whose period divides the tile length, so a plane's back edge always matches the next plane's front edge:

const k1 = 2*Math.PI/TILE * 3, k2 = 2*Math.PI/TILE * 5; // whole cycles per tile
const roll = Math.sin(z*k1)*0.8 + Math.sin(z*k2)*0.5;   // → height(z) == height(z+TILE)

The valley stays flat (so the "road" reads) and mountains only rise past a certain |x|.

Details that matter

• Layering — the hero is transparent so the fixed CSS sun + 3D canvas show through; lower sections are opaque and scroll over them.
• Neon type — three stacked text-shadows (tight white, wide magenta, wider magenta) make letters look lit from within.
• Performance — devicePixelRatio capped at 1.5; delta-timed motion so speed is frame-rate independent.
• Reduced motion / no WebGL — the grid renders one still frame, or the CSS sky stands alone.

Ship it on GitHub Pages

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-neon --public --source=. --push
gh api --method POST /repos/OWNER/formwork-neon/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

Two planes, a handful of sine waves, and a CSS sun — an entire endless night drive.