Showroom · Make-of

How Lumen Runner was made

A complete, genuinely playable one-button game — physics, scenery, and sound all synthesized in code. The cabinet is the whole page: marquee across the top, CRT filling the viewport, control deck along the bottom, and an attract-mode demo that plays itself until you press start. Zero image and zero audio files.

What it demonstrates

That "game feel" is not art assets — it is a handful of numbers tuned honestly. The runner is a few rectangles; what makes it feel fair and springy is coyote time, a jump buffer, variable jump height, and a speed ramp with a cap. And that presentation is a scene decision: the same game reads twice as good when the machine fills the room. All of it fits in one file you can read in a sitting.

Techniques, honestly named

• The cabinet is the viewport — no page around a widget: a neon marquee strip, the CRT flexing to fill everything between it and the control deck, and an about overlay instead of below-the-fold copy. The bezel's slack space gets cabinet texture and a speaker grille.
• Attract mode — while the title shows, a tiny autopilot plays the real game behind it (same physics, same spawner): it reads the next shard's distance and height and decides when to press and how long to hold. If it ever mistimes, the road ahead is quietly cleared — the demo never loses face, just like the originals. After a game over the cabinet drifts back to attract on its own.
• Adaptive logical resolution — the canvas keeps a fixed logical height (270, or 180 on short screens) for legible pixel text and takes its logical width from the bezel's aspect ratio (clamped), then upscales with image-rendering: pixelated — retro crispness at any viewport shape.
• Game-feel trio — ~100 ms coyote time after leaving the ground, a 120 ms jump buffer so early presses still count, and lighter gravity while rising with the button held for variable jump height.
• Procedural scenery — stars and two parallax mountain ridges come from a seeded PRNG (mulberry32) and tile seamlessly; glow is pre-rendered radial-gradient sprites, not per-frame shadowBlur.
• Synthesized sound — jump, collect, and death sounds are built live from oscillators and filtered noise with the Web Audio API, behind a visible toggle that defaults to off; no AudioContext exists until you opt in.
• CRT in pure CSS — scanlines from a repeating gradient, a radial vignette, rounded glass corners, and a subtle flicker. Under prefers-reduced-motion the flicker, twinkle, blink, and screen shake all switch off and the attract screen becomes a single static frame with a plain start — the game itself stays fully playable.
• Respectful plumbing — one requestAnimationFrame loop that stops when the tab hides (the run auto-pauses), keyboard and touch input both first-class, a focusable canvas with an aria-label, an aria-live region announcing runs and scores, and best score in localStorage only.

Recreate it