diff --git a/web/zebra-spaces.html b/web/zebra-spaces.html
index 233ebd3..68c7710 100644
--- a/web/zebra-spaces.html
+++ b/web/zebra-spaces.html
@@ -32,6 +32,13 @@
     min-width: 0; display: flex; flex-direction: column;
   }
   .controls { min-width: 0; }
+  .game-tabs { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
+  .game-tabs button {
+    background: #fff; color: #000; border: 1px solid #000;
+    padding: 0.3rem 0.8rem; font-family: monospace; font-size: 0.8rem; cursor: pointer;
+  }
+  .game-tabs button.active { background: #000; color: #fff; }
+  .game-tabs button:hover:not(.active) { background: #f0f0f0; }
   .timeline-frame {
     flex: 1; min-height: 80vh; width: 100%;
     border: 1px solid #ddd; background: #fff;
@@ -158,13 +165,19 @@
 <div class="page">
 
 <main class="timeline">
-  <!-- placeholder content for the timeline column until v0.3 lands. unmario.com is
-       framed unsandboxed so its own JS can run; it's same-org, public-domain. If
-       it refuses framing (CSP/X-Frame-Options) the iframe just stays blank — no
-       impact on the controls column. -->
-  <iframe class="timeline-frame"
+  <!-- placeholder content until the v0.3 event timeline lands: a game switcher
+       framing an external playable. Iframes load unsandboxed so the game JS can
+       run; if a target refuses framing (X-Frame-Options / CSP frame-ancestors)
+       the iframe goes blank — no impact on the controls column. -->
+  <div class="game-tabs" id="game-tabs">
+    <button type="button" class="active" data-game="unmario"
+            data-src="https://unmario.com/">unmario</button>
+    <button type="button" data-game="cake"
+            data-src="https://cuppcb.com/games/cake-murder-adventure/">cake murder adventure</button>
+  </div>
+  <iframe id="game-frame" class="timeline-frame"
           src="https://unmario.com/"
-          title="unmario"
+          title="game"
           loading="lazy"
           referrerpolicy="no-referrer"></iframe>
 </main>
@@ -1349,6 +1362,16 @@ $('btn-copy-share').addEventListener('click', async () => {
   const c = new URLSearchParams(location.search).get('code');
   if (c) $('rdv-code').value = c;
 }
+
+/* game-tabs: click a button → swap iframe src + mark active. data-src is
+ * the only source of truth so new games just need a button. */
+$('game-tabs').addEventListener('click', (ev) => {
+  const b = ev.target.closest('button[data-src]');
+  if (!b) return;
+  const frame = $('game-frame');
+  if (frame.src !== b.dataset.src) frame.src = b.dataset.src;
+  for (const el of $('game-tabs').querySelectorAll('button')) el.classList.toggle('active', el === b);
+});
 $('btn-leave').addEventListener('click', async () => {
   wantConnected = false;
   if (sigReconnect){ clearTimeout(sigReconnect); sigReconnect = null; }
@@ -1377,8 +1400,8 @@ logLine('', 'ready — pick a handle, type a rendezvous code, enter the space');
 
 <footer style="margin:2.2rem auto 0;font-size:0.65rem;color:#999;line-height:1.7;word-break:break-all;font-family:monospace">
   <span id="pi-seal" style="color:#777;cursor:default;user-select:none" title="">page integrity</span> &nbsp;·&nbsp; built <span class="stamp-date">2026-05-31</span><br>
-  md5 <span class="stamp-md5">59cff62721b306e556354c7b5f7128c3</span><br>
-  sha256 <span class="stamp-sha">0554de3a7a0dafec83a4933327ea3b9a6c243f0a33976d7d60221c67aa126b47</span><br>
+  md5 <span class="stamp-md5">58a132641bdbf355a8b1981522ba0509</span><br>
+  sha256 <span class="stamp-sha">6dc07c94b3265f75f37fb69955ca1faf9bfaac12a99259948521cf901d740d3e</span><br>
   <span style="color:#bbb">hashes are of this page with these two fields zeroed — to verify, blank them and re-hash</span><br>
   <span style="color:#bbb">one self-contained file — <strong>save a copy</strong> and verify against these hashes; point at your own servers with ?signal= and ?turncred=, or <a href="host-your-own.html" style="color:#999">host your own community</a></span>
 </footer>