Models 44

GPT-5 Nano

by OpenAIReasoningClean
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
23.6 s
Cost
$0.0015
Output tokens
3,633
Spent thinking
256 tokens
Speed
168 tok/s
Console errors
0
First token after
1.9 s
First visible text after
5.2 s
Prompt tokens
347
Code size
10.0 KB
Finish reason
stop
Served by
OpenAI
Model id
openai/gpt-5-nano
Reasoning sent
{"effort":"low"}
Max output
128,000 tokens
Generated
Nov 12, 2026

What it was asked

The prompt
“draw me an SVG of an astronaut cat skateboarding on the moon”
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.svg · 273 lines

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
  :root {
    --bg: #0b1020;
    --moon: #d0d0d0;
    --moon-dark: #a5a5a5;
    --grass: #2a2a2a;
    --surface: #8a8a8a;
    --sunset: #1e90ff;
  }
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #050b1d;
    font-family: system-ui, Arial, sans-serif;
    color: #fff;
    overflow: hidden;
  }
  /* Canvas-like stage using inline SVG filling viewport */
  .stage {
    width: 100%;
    height: 100vh;
    display: block;
  }

  /* Subtle parallax stars for depth */
  .star {
    fill: white;
    opacity: 0.9;
  }
  @keyframes twinkle {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
  }
  .twinkle {
    animation: twinkle 4s infinite;
    transform-origin: center;
  }

  /* Overlay prompt */
  .overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(6, 10, 20, 0.65);
    backdrop-filter: blur(2px);
    z-index: 10;
  }
  .panel {
    background: rgba(8, 12, 22, 0.92);
    border: 1px solid rgba(180,180,190,0.25);
    padding: 22px 28px;
    border-radius: 12px;
    text-align: center;
    width: min(520px, 90vw);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  }
  .panel h1 {
    font-size: 1.6rem;
    margin: 0 0 8px;
  }
  .panel p {
    margin: 0;
    color: #d9e3ff;
    opacity: 0.95;
  }
  .start-hint {
    margin-top: 14px;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(#2a2a2a, #1b1b1b);
    border: 1px solid #444;
    color: #fff;
    font-family: monospace;
  }

  /* Responsive sizing helpers inside SVG will handle scaling, but we ensure no overflow on small screens */
  svg { max-width: 100%; height: auto; display: block; }

  /* Simple motion smoothing for mobile */
  @media (prefers-reduced-motion: reduce) {
    .twinkle { animation: none; }
  }
</style>
</head>
<body>
  <!-- SVG Stage: 1200x800 coordinate system; scalable with viewBox -->
  <svg class="stage" viewBox="0 0 1200 800" role="img" aria-label="An astronaut cat skateboarding on the moon">
    <!-- Background space gradient -->
    <defs>
      <linearGradient id="space" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#0a1022"/>
        <stop offset="60%" stop-color="#0a163b"/>
        <stop offset="100%" stop-color="#041033"/>
      </linearGradient>
      <!-- Subtle lunar glow -->
      <radialGradient id="moonGlow" cx="50%" cy="50%" r="60%">
        <stop offset="0%" stop-color="rgba(255,255,255,0.28)"/>
        <stop offset="60%" stop-color="rgba(255,255,255,0.08)"/>
        <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
      </radialGradient>
      <!-- Ground shadow -->
      <radialGradient id="shadow" cx="50%" cy="40%" r="60%">
        <stop offset="0%" stop-color="rgba(0,0,0,0.0)"/>
        <stop offset="100%" stop-color="rgba(0,0,0,0.28)"/>
      </radialGradient>
    </defs>

    <!-- Stars (animated via CSS) -->
    <g aria-label="stars" id="stars" pointer-events="none" opacity="0.95">
      <!-- A handful of tiny stars at various positions -->
      <circle class="star twinkle" cx="60" cy="80" r="1.2" style="animation-delay:0s"/>
      <circle class="star twinkle" cx="200" cy="120" r="1.0" style="animation-delay:0.5s"/>
      <circle class="star twinkle" cx="320" cy="60" r="1.4" style="animation-delay:1s"/>
      <circle class="star twinkle" cx="780" cy="110" r="1.1" style="animation-delay:0.2s"/>
      <circle class="star twinkle" cx="980" cy="90" r="1.3" style="animation-delay:1.4s"/>
      <circle class="star twinkle" cx="1100" cy="60" r="1.0" style="animation-delay:0.7s"/>
      <circle class="star twinkle" cx="1140" cy="140" r="0.9" style="animation-delay:0.9s"/>
      <!-- scattered random stars -->
      <circle class="star twinkle" cx="180" cy="260" r="0.7" style="animation-delay:0.15s"/>
      <circle class="star twinkle" cx="520" cy="240" r="1.0" style="animation-delay:0.4s"/>
      <circle class="star twinkle" cx="980" cy="260" r="0.8" style="animation-delay:0.25s"/>
    </g>

    <!-- Deep space gradient background -->
    <rect x="0" y="0" width="1200" height="800" fill="url(#space)"/>

    <!-- Earth far away -->
    <circle cx="1060" cy="120" r="60" fill="#1e90ff" opacity="0.85"/>
    <circle cx="1055" cy="110" r="30" fill="#e6f4ff" opacity="0.5"/>

    <!-- Moon main surface -->
    <ellipse cx="600" cy="640" rx="520" ry="140" fill="url(#moonGlow)"/>
    <ellipse cx="600" cy="640" rx="520" ry="170" fill="url(#shadow)" />

    <!-- Moon disc (big gray circle) -->
    <circle cx="600" cy="600" r="320" fill="var(--moon)" stroke="#6a6a6a" stroke-width="6"/>

    <!-- Craters on the moon -->
    <ellipse cx="520" cy="560" rx="60" ry="40" fill="#8b8b8b" opacity="0.6"/>
    <ellipse cx="700" cy="590" rx="50" ry="30" fill="#8a8a8a" opacity="0.6"/>
    <ellipse cx="640" cy="540" rx="70" ry="50" fill="#7d7d7d" opacity="0.5"/>
    <ellipse cx="380" cy="620" rx="40" ry="28" fill="#8f8f8f" opacity="0.6"/>
    <ellipse cx="760" cy="640" rx="30" ry="20" fill="#8b8b8b" opacity="0.5"/>

    <!-- Ground line to show moon edge -->
    <path d="M0,700 Q300,640 600,700 T1200,700" fill="none" stroke="#6d6d6d" stroke-width="6" opacity="0.3"/>

    <!-- Skateboard + wheels (group with id for animation) -->
    <g id="kit" transform="translate(0,0)">
      <!-- Skateboard board will be moved by JS; initial pos near bottom-left quadrant -->
      <g id="boardGroup" transform="translate(120,520)">
        <!-- skateboard deck -->
        <rect x="0" y="0" width="210" height="20" rx="6" ry="6" fill="#3b3b3b" stroke="#000" stroke-width="2"/>
        <!-- decorative stripes -->
        <rect x="6" y="4" width="40" height="12" rx="3" fill="#6bdcff" opacity="0.9"/>
        <rect x="60" y="4" width="40" height="12" rx="3" fill="#ffda5a" opacity="0.9"/>
        <rect x="110" y="4" width="40" height="12" rx="3" fill="#6bdcff" opacity="0.9"/>

        <!-- wheels -->
        <circle cx="40" cy="22" r="12" fill="#333" stroke="#111" stroke-width="3"/>
        <circle cx="170" cy="22" r="12" fill="#333" stroke="#111" stroke-width="3"/>
        <!-- wheel axles -->
        <line x1="40" y1="22" x2="40" y2="42" stroke="#222" stroke-width="3" />
        <line x1="170" y1="22" x2="170" y2="42" stroke="#222" stroke-width="3" />
      </g>

      <!-- astronaut cat sitting/standing on board; we'll attach relative to boardGroup via transform -->
      <g id="cat" transform="translate(170,-60)">
        <!-- helmet -->
        <ellipse cx="0" cy="0" rx="40" ry="28" fill="#e5f4ff" stroke="#6aa4d8" stroke-width="3"/>
        <circle cx="0" cy="-4" r="18" fill="#8bd7ff" opacity="0.5"/>
        <!-- visor -->
        <rect x="-40" y="-16" width="80" height="22" rx="6" fill="#1b2e4a" stroke="#0a1a38" stroke-width="3" />
        <rect x="-38" y="-14" width="76" height="18" rx="4" fill="rgba(255,255,255,0.25)" />

        <!-- suit body -->
        <ellipse cx="0" cy="18" rx="34" ry="44" fill="#c9d9ff" stroke="#5a7bd8" stroke-width="4"/>
        <!-- arms -->
        <path d="M-34,18 Q-60,-8 -62,-22" fill="none" stroke="#a7c4ff" stroke-width="8" stroke-linecap="round"/>
        <path d="M34,18 Q60,-8 62,-22" fill="none" stroke="#a7c4ff" stroke-width="8" stroke-linecap="round"/>

        <!-- backpack/jetpack -->
        <rect x="-14" y="30" width="28" height="26" rx="6" fill="#7a8aff" stroke="#4051d8" stroke-width="2"/>

        <!-- tail (cute) -->
        <path d="M-18,40 q-14,18 -28,4" fill="none" stroke="#7a8aff" stroke-width="6" stroke-linecap="round"/>

        <!-- neck and head connection -->
        <ellipse cx="0" cy="0" rx="22" ry="18" fill="rgba(230,240,255,0.0)" />

      </g>
    </g>

    <!-- Lunar glow beneath cat for depth -->
    <ellipse cx="200" cy="690" rx="120" ry="20" fill="rgba(255,255,255,0.08)"/>

  </svg>

  <!-- Overlay prompt: click or press to start -->
  <div class="overlay" id="overlay" aria-hidden="false">
    <div class="panel">
      <h1>Astronaut Cat Skateboarding on the Moon</h1>
      <p>Click or press any key to start the demo. The cat will glide along the moon’s surface in autonomous mode.</p>
      <div class="start-hint" aria-label="Start demo">Click to start • Space to begin</div>
    </div>
  </div>

<script>
(function(){
  const overlay = document.getElementById('overlay');
  const boardGroup = document.getElementById('boardGroup');
  const cat = document.getElementById('cat');
  const stage = document.querySelector('.stage');
  let started = false;
  let t = 0;
  let posX = 120; // starting x for board group
  let speed = 60; // px per second
  const bounds = { minX: -50, maxX: 1030 };

  function start() {
    if (started) return;
    started = true;
    overlay.style.display = 'none';
    lastTime = performance.now();
    requestAnimationFrame(loop);
  }

  // Start on click or any key while overlay visible
  overlay.addEventListener('click', start);
  window.addEventListener('keydown', (e)=> {
    if (!started && (e.key.length === 1 || e.code)) start();
  });

  // Prepare to autoplay: initial pose is visible even before start
  let lastTime = 0;
  function loop(now) {
    if (!started) return;
    const dt = Math.min(0.033, (now - lastTime) / 1000);
    lastTime = now;
    t += dt;

    // Simple autonomous motion: move boardGroup across the moon, with gentle up/down bob
    posX += speed * dt;
    if (posX > bounds.maxX) {
      posX = bounds.minX;
    }

    // Subtle bobbing for life
    const bob = Math.sin(t * 2.0) * 3; // px
    // Update transform of boardGroup
    boardGroup.setAttribute('transform', `translate(${posX}, 520 + ${bob})`);
    // Optional: rotate cat a touch to indicate attitude
    const tilt = Math.sin(t * 3) * 2;
    cat.setAttribute('transform', `translate(${170}, ${-60 + bob}) rotate(${tilt})`);
    requestAnimationFrame(loop);
  }

  // Start if user interacts before the first paint
  window.addEventListener('pointerdown', start, { once: true });

})();
</script>
</body>
</html>
Reasoning trace (256 tokens)
**Creating an animated SVG**

I need to create a single HTML file with an SVG illustration of an astronaut cat skateboarding on the moon. It should have some animation that auto-plays, but also show an overlay saying, "Click or press a key to start" until the user interacts. After the click, the animation should feature the cat in an astronaut suit skating along the lunar surface with stars and Earth in the background. I'll use inline SVG for the graphics, along with CSS and JavaScript for animations.**Designing the animated scene**

I'm planning to store fixed x and y positions for the cat and skateboard on the ground. The skateboard will be represented as a line with wheels, and the cat will sit on top. For the background, I'll create a gradient of dark blue with stars that twinkle using small circles through CSS animation. I want to include a "Start" overlay div with instructions that disappears upon click or keydown to begin the animation. I'll ensure everything is responsive and use a viewBox of 0 0 1200 800. I'll craft the code carefully to avoid errors.
Raw response
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Astronaut Cat Skateboarding on the Moon</title>
<style>
  :root {
    --bg: #0b1020;
    --moon: #d0d0d0;
    --moon-dark: #a5a5a5;
    --grass: #2a2a2a;
    --surface: #8a8a8a;
    --sunset: #1e90ff;
  }
  html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #050b1d;
    font-family: system-ui, Arial, sans-serif;
    color: #fff;
    overflow: hidden;
  }
  /* Canvas-like stage using inline SVG filling viewport */
  .stage {
    width: 100%;
    height: 100vh;
    display: block;
  }

  /* Subtle parallax stars for depth */
  .star {
    fill: white;
    opacity: 0.9;
  }
  @keyframes twinkle {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
  }
  .twinkle {
    animation: twinkle 4s infinite;
    transform-origin: center;
  }

  /* Overlay prompt */
  .overlay {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(6, 10, 20, 0.65);
    backdrop-filter: blur(2px);
    z-index: 10;
  }
  .panel {
    background: rgba(8, 12, 22, 0.92);
    border: 1px solid rgba(180,180,190,0.25);
    padding: 22px 28px;
    border-radius: 12px;
    text-align: center;
    width: min(520px, 90vw);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  }
  .panel h1 {
    font-size: 1.6rem;
    margin: 0 0 8px;
  }
  .panel p {
    margin: 0;
    color: #d9e3ff;
    opacity: 0.95;
  }
  .start-hint {
    margin-top: 14px;
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    background: linear-gradient(#2a2a2a, #1b1b1b);
    border: 1px solid #444;
    color: #fff;
    font-family: monospace;
  }

  /* Responsive sizing helpers inside SVG will handle scaling, but we ensure no overflow on small screens */
  svg { max-width: 100%; height: auto; display: block; }

  /* Simple motion smoothing for mobile */
  @media (prefers-reduced-motion: reduce) {
    .twinkle { animation: none; }
  }
</style>
</head>
<body>
  <!-- SVG Stage: 1200x800 coordinate system; scalable with viewBox -->
  <svg class="stage" viewBox="0 0 1200 800" role="img" aria-label="An astronaut cat skateboarding on the moon">
    <!-- Background space gradient -->
    <defs>
      <linearGradient id="space" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" stop-color="#0a1022"/>
        <stop offset="60%" stop-color="#0a163b"/>
        <stop offset="100%" stop-color="#041033"/>
      </linearGradient>
      <!-- Subtle lunar glow -->
      <radialGradient id="moonGlow" cx="50%" cy="50%" r="60%">
        <stop offset="0%" stop-color="rgba(255,255,255,0.28)"/>
        <stop offset="60%" stop-color="rgba(255,255,255,0.08)"/>
        <stop offset="100%" stop-color="rgba(255,255,255,0)"/>
      </radialGradient>
      <!-- Ground shadow -->
      <radialGradient id="shadow" cx="50%" cy="40%" r="60%">
        <stop offset="0%" stop-color="rgba(0,0,0,0.0)"/>
        <stop offset="100%" stop-color="rgba(0,0,0,0.28)"/>
      </radialGradient>
    </defs>

    <!-- Stars (animated via CSS) -->
    <g aria-label="stars" id="stars" pointer-events="none" opacity="0.95">
      <!-- A handful of tiny stars at various positions -->
      <circle class="star twinkle" cx="60" cy="80" r="1.2" style="animation-delay:0s"/>
      <circle class="star twinkle" cx="200" cy="120" r="1.0" style="animation-delay:0.5s"/>
      <circle class="star twinkle" cx="320" cy="60" r="1.4" style="animation-delay:1s"/>
      <circle class="star twinkle" cx="780" cy="110" r="1.1" style="animation-delay:0.2s"/>
      <circle class="star twinkle" cx="980" cy="90" r="1.3" style="animation-delay:1.4s"/>
      <circle class="star twinkle" cx="1100" cy="60" r="1.0" style="animation-delay:0.7s"/>
      <circle class="star twinkle" cx="1140" cy="140" r="0.9" style="animation-delay:0.9s"/>
      <!-- scattered random stars -->
      <circle class="star twinkle" cx="180" cy="260" r="0.7" style="animation-delay:0.15s"/>
      <circle class="star twinkle" cx="520" cy="240" r="1.0" style="animation-delay:0.4s"/>
      <circle class="star twinkle" cx="980" cy="260" r="0.8" style="animation-delay:0.25s"/>
    </g>

    <!-- Deep space gradient background -->
    <rect x="0" y="0" width="1200" height="800" fill="url(#space)"/>

    <!-- Earth far away -->
    <circle cx="1060" cy="120" r="60" fill="#1e90ff" opacity="0.85"/>
    <circle cx="1055" cy="110" r="30" fill="#e6f4ff" opacity="0.5"/>

    <!-- Moon main surface -->
    <ellipse cx="600" cy="640" rx="520" ry="140" fill="url(#moonGlow)"/>
    <ellipse cx="600" cy="640" rx="520" ry="170" fill="url(#shadow)" />

    <!-- Moon disc (big gray circle) -->
    <circle cx="600" cy="600" r="320" fill="var(--moon)" stroke="#6a6a6a" stroke-width="6"/>

    <!-- Craters on the moon -->
    <ellipse cx="520" cy="560" rx="60" ry="40" fill="#8b8b8b" opacity="0.6"/>
    <ellipse cx="700" cy="590" rx="50" ry="30" fill="#8a8a8a" opacity="0.6"/>
    <ellipse cx="640" cy="540" rx="70" ry="50" fill="#7d7d7d" opacity="0.5"/>
    <ellipse cx="380" cy="620" rx="40" ry="28" fill="#8f8f8f" opacity="0.6"/>
    <ellipse cx="760" cy="640" rx="30" ry="20" fill="#8b8b8b" opacity="0.5"/>

    <!-- Ground line to show moon edge -->
    <path d="M0,700 Q300,640 600,700 T1200,700" fill="none" stroke="#6d6d6d" stroke-width="6" opacity="0.3"/>

    <!-- Skateboard + wheels (group with id for animation) -->
    <g id="kit" transform="translate(0,0)">
      <!-- Skateboard board will be moved by JS; initial pos near bottom-left quadrant -->
      <g id="boardGroup" transform="translate(120,520)">
        <!-- skateboard deck -->
        <rect x="0" y="0" width="210" height="20" rx="6" ry="6" fill="#3b3b3b" stroke="#000" stroke-width="2"/>
        <!-- decorative stripes -->
        <rect x="6" y="4" width="40" height="12" rx="3" fill="#6bdcff" opacity="0.9"/>
        <rect x="60" y="4" width="40" height="12" rx="3" fill="#ffda5a" opacity="0.9"/>
        <rect x="110" y="4" width="40" height="12" rx="3" fill="#6bdcff" opacity="0.9"/>

        <!-- wheels -->
        <circle cx="40" cy="22" r="12" fill="#333" stroke="#111" stroke-width="3"/>
        <circle cx="170" cy="22" r="12" fill="#333" stroke="#111" stroke-width="3"/>
        <!-- wheel axles -->
        <line x1="40" y1="22" x2="40" y2="42" stroke="#222" stroke-width="3" />
        <line x1="170" y1="22" x2="170" y2="42" stroke="#222" stroke-width="3" />
      </g>

      <!-- astronaut cat sitting/standing on board; we'll attach relative to boardGroup via transform -->
      <g id="cat" transform="translate(170,-60)">
        <!-- helmet -->
        <ellipse cx="0" cy="0" rx="40" ry="28" fill="#e5f4ff" stroke="#6aa4d8" stroke-width="3"/>
        <circle cx="0" cy="-4" r="18" fill="#8bd7ff" opacity="0.5"/>
        <!-- visor -->
        <rect x="-40" y="-16" width="80" height="22" rx="6" fill="#1b2e4a" stroke="#0a1a38" stroke-width="3" />
        <rect x="-38" y="-14" width="76" height="18" rx="4" fill="rgba(255,255,255,0.25)" />

        <!-- suit body -->
        <ellipse cx="0" cy="18" rx="34" ry="44" fill="#c9d9ff" stroke="#5a7bd8" stroke-width="4"/>
        <!-- arms -->
        <path d="M-34,18 Q-60,-8 -62,-22" fill="none" stroke="#a7c4ff" stroke-width="8" stroke-linecap="round"/>
        <path d="M34,18 Q60,-8 62,-22" fill="none" stroke="#a7c4ff" stroke-width="8" stroke-linecap="round"/>

        <!-- backpack/jetpack -->
        <rect x="-14" y="30" width="28" height="26" rx="6" fill="#7a8aff" stroke="#4051d8" stroke-width="2"/>

        <!-- tail (cute) -->
        <path d="M-18,40 q-14,18 -28,4" fill="none" stroke="#7a8aff" stroke-width="6" stroke-linecap="round"/>

        <!-- neck and head connection -->
        <ellipse cx="0" cy="0" rx="22" ry="18" fill="rgba(230,240,255,0.0)" />

      </g>
    </g>

    <!-- Lunar glow beneath cat for depth -->
    <ellipse cx="200" cy="690" rx="120" ry="20" fill="rgba(255,255,255,0.08)"/>

  </svg>

  <!-- Overlay prompt: click or press to start -->
  <div class="overlay" id="overlay" aria-hidden="false">
    <div class="panel">
      <h1>Astronaut Cat Skateboarding on the Moon</h1>
      <p>Click or press any key to start the demo. The cat will glide along the moon’s surface in autonomous mode.</p>
      <div class="start-hint" aria-label="Start demo">Click to start • Space to begin</div>
    </div>
  </div>

<script>
(function(){
  const overlay = document.getElementById('overlay');
  const boardGroup = document.getElementById('boardGroup');
  const cat = document.getElementById('cat');
  const stage = document.querySelector('.stage');
  let started = false;
  let t = 0;
  let posX = 120; // starting x for board group
  let speed = 60; // px per second
  const bounds = { minX: -50, maxX: 1030 };

  function start() {
    if (started) return;
    started = true;
    overlay.style.display = 'none';
    lastTime = performance.now();
    requestAnimationFrame(loop);
  }

  // Start on click or any key while overlay visible
  overlay.addEventListener('click', start);
  window.addEventListener('keydown', (e)=> {
    if (!started && (e.key.length === 1 || e.code)) start();
  });

  // Prepare to autoplay: initial pose is visible even before start
  let lastTime = 0;
  function loop(now) {
    if (!started) return;
    const dt = Math.min(0.033, (now - lastTime) / 1000);
    lastTime = now;
    t += dt;

    // Simple autonomous motion: move boardGroup across the moon, with gentle up/down bob
    posX += speed * dt;
    if (posX > bounds.maxX) {
      posX = bounds.minX;
    }

    // Subtle bobbing for life
    const bob = Math.sin(t * 2.0) * 3; // px
    // Update transform of boardGroup
    boardGroup.setAttribute('transform', `translate(${posX}, 520 + ${bob})`);
    // Optional: rotate cat a touch to indicate attitude
    const tilt = Math.sin(t * 3) * 2;
    cat.setAttribute('transform', `translate(${170}, ${-60 + bob}) rotate(${tilt})`);
    requestAnimationFrame(loop);
  }

  // Start if user interacts before the first paint
  window.addEventListener('pointerdown', start, { once: true });

})();
</script>
</body>
</html>
```