Secret scenes: easter eggs that reward the curious

Most people skim. A few people dig. The skimmers will scroll the home page, watch a shader for a second, and move on — and that's fine, the page works for them. But the people who dig, who try keyboard shortcuts you didn't advertise or press-and-hold things to see what happens, are the people who'll remember the site. Easter eggs are for them. They cost a little code and they reward the exact trait — curiosity — that makes someone a good visitor to have.

The rule I hold them to: an easter egg must never block or confuse the main path. It's additive delight, never a gate.

A seventh scene that isn't on the menu

The shader lab has six scenes in its tab row. There's a seventh — Hyperspace, a warp-tunnel starfield — that doesn't show up. It's marked hidden in the scene list, and the host filters hidden scenes out of the visible tabs unless they've been unlocked this session:

const visibleScenes = SCENES.filter((s) => !s.hidden || secretUnlocked);

Until you unlock it, it's simply not there. No greyed-out "locked" tab, no padlock icon teasing you — those would announce the secret and turn it into a chore. A real secret is invisible.

Two ways in, one per platform

On desktop, you unlock it by typing warp. There's no input field — the lab just watches keystrokes globally and keeps a rolling buffer of the last few letters, checking whether it ends with the magic word:

if (e.key.length === 1 && /[a-z]/i.test(e.key)) {
  keyBuffer = (keyBuffer + e.key.toLowerCase()).slice(-8);
  if (keyBuffer.endsWith("warp")) {
    keyBuffer = "";
    unlockSecret();
  }
}

The rolling buffer matters: I match on a suffix, not exact equality, so it triggers no matter what you typed before. The handler also bails out entirely if you're focused in a text input, so typing "warp" while writing a message never fires it.

Phones have no keyboard to lean on, so the mobile path is a gesture: a 700ms long-press on the FPS pill in the corner. A timer starts on pointer-down and, if it survives without the pointer lifting or leaving, calls the same unlock:

function startFpsLongPress() {
  longPressTimer = window.setTimeout(() => {
    unlockSecret();
  }, SECRET_LONGPRESS_MS);
}

Both paths funnel into one unlockSecret function — reveal the scene, switch to it, fire a celebratory haptic pattern, and toast "Hyperspace unlocked." Idempotent, so doing it twice doesn't double-toast.

Don't let the count leak the secret

There's a subtle tell I had to suppress. The keyboard hint strip says you can press 1 through some number to switch scenes. If that number read 7, an attentive visitor would notice there are only six tabs and go hunting for the missing one — the secret would leak through arithmetic. So the hint counts only the visible scenes:

<kbd>1</kbd>–<kbd>{visibleScenes.length}</kbd> scenes

Before the unlock it shows six. After, it shows seven, and the newly revealed scene keeps its true number-key index so pressing 7 jumps to it. The hint never gives the game away, and number keys for hidden scenes are ignored until they're unlocked.

The Konami overlay

The other easter egg lives on the home page, not the lab: the classic Konami code triggers a retro CRT overlay. It's the canonical hidden-trigger pattern — a global keydown listener watching for the up-up-down-down-left-right-left-right-B-A sequence — and it's a nice nod for anyone who reflexively tries it on a developer's site. It's also deferred: the listener mounts on idle rather than at page load, so it doesn't cost anything on the critical path. Nobody types the Konami code in the first second of a visit anyway.

Why bother

None of this is necessary. The lab works without Hyperspace; the home page works without the CRT overlay. But the marginal cost is low — a filter, a keystroke buffer, a long-press timer — and the payoff is specific. The visitor who types warp on a hunch and gets a warp tunnel is the visitor who tells someone about the site.

The discipline that makes it safe is the rule I started with. Easter eggs are strictly additive. The secret scene is filtered out cleanly, so it never confuses the tab row. The number-key count never leaks. The keystroke listener never fires while you're typing in a field. None of it interrupts, gates, or breaks the obvious path through the page. It's delight for the people who go looking, and a no-op for everyone who doesn't — which is exactly the trade an easter egg should make.

The lab, secrets and all, is at /lab. Try typing something.