Claude Fable 5

AnthropicJuly 2026

open raw ↗pit it against…

What it wrote

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Starforge</title>
<meta name="description" content="Starforge — an incremental odyssey. Forge stardust, build a cosmos, collapse the universe.">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>✦</text></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;800&family=Outfit:wght@400;600&family=JetBrains+Mono:wght@400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>

<canvas id="starfield" aria-hidden="true"></canvas>
<div id="fx-layer" aria-hidden="true"></div>

<div id="app">
  <header class="topbar">
    <div class="brand">
      <span class="brand-mark" aria-hidden="true">✦</span>
      <span class="brand-name">STARFORGE</span>
      <span class="tagline">an incremental odyssey</span>
    </div>
    <div class="topbar-right">
      <div class="chip chip-dm" id="chip-dm" hidden title="Dark matter — permanent production bonus">◈ <span id="chip-dm-val">0</span></div>
      <button class="btn btn-icon" id="btn-mute" title="Toggle sound" aria-label="Toggle sound">🔊</button>
      <button class="btn" id="btn-save" title="Save your progress now">Save</button>
    </div>
  </header>

  <main class="layout">

    <section class="clicker-zone" aria-label="The forge">
      <div class="counter">
        <div class="stardust-count mono" id="stardust">0</div>
        <div class="stardust-label">stardust</div>
        <div class="sps mono" id="sps">0 / sec</div>
      </div>

      <div class="buff-bar" id="buff-bar" hidden>
        <span id="buff-label">☄️ Frenzy ×7</span>
        <div class="buff-track"><div class="buff-fill" id="buff-fill"></div></div>
      </div>

      <div class="star-wrap">
        <button id="star" aria-label="Forge stardust">
          <span class="star-rays" aria-hidden="true"></span>
          <span class="star-halo" aria-hidden="true"></span>
          <span class="star-core" aria-hidden="true"></span>
        </button>
      </div>

      <div class="click-power mono" id="click-power">+1 per forge</div>
    </section>

    <section class="panel" aria-label="Control deck">
      <nav class="tabs" role="tablist">
        <button class="tab active" data-tab="shop" role="tab">Cosmos</button>
        <button class="tab" data-tab="upgrades" role="tab">Upgrades <span class="badge" id="upg-badge">0</span></button>
        <button class="tab" data-tab="ascend" role="tab">Collapse</button>
        <button class="tab" data-tab="codex" role="tab">Codex</button>
      </nav>

      <div class="tab-page active" id="tab-shop">
        <div class="buy-modes" id="buy-modes" aria-label="Buy amount">
          <span class="buy-modes-label">Buy</span>
          <button class="bm active" data-mode="1">×1</button>
          <button class="bm" data-mode="10">×10</button>
          <button class="bm" data-mode="max">Max</button>
        </div>
        <div id="shop"></div>
      </div>

      <div class="tab-page" id="tab-upgrades">
        <div id="upgrades"></div>
        <h3 class="section-h">Acquired</h3>
        <div id="owned-upgrades" class="owned-grid"></div>
      </div>

      <div class="tab-page" id="tab-ascend">
        <div class="ascend-head">
          <div class="dm-glyph" aria-hidden="true">◈</div>
          <h2 class="ascend-title">Collapse the universe</h2>
          <p class="ascend-copy">
            End this cosmos and crush everything you have forged into <strong>dark matter</strong>.
            Stardust, celestial bodies, and upgrades reset — but each dark matter grants a permanent
            <strong>+2%</strong> to production and forge power, forever.
          </p>
        </div>
        <div class="dm-stats">
          <div class="dm-stat"><span class="dm-stat-label">Held</span><span class="mono dm-stat-val" id="dm-held">0 ◈</span></div>
          <div class="dm-stat"><span class="dm-stat-label">Current bonus</span><span class="mono dm-stat-val" id="dm-bonus">+0%</span></div>
          <div class="dm-stat"><span class="dm-stat-label">On collapse</span><span class="mono dm-stat-val gold" id="dm-pending">+0 ◈</span></div>
        </div>
        <div class="dm-progress">
          <div class="dm-track"><div class="dm-fill" id="dm-fill"></div></div>
          <div class="dm-next" id="dm-next">Forge more stardust to condense dark matter.</div>
        </div>
        <button class="btn-collapse" id="btn-collapse" disabled>Collapse</button>
        <div class="collapse-count" id="collapse-count"></div>
      </div>

      <div class="tab-page" id="tab-codex">
        <h3 class="section-h">Observatory log</h3>
        <dl class="stats-list" id="stats-list"></dl>
        <h3 class="section-h">Achievements <span class="ach-count mono" id="ach-count"></span></h3>
        <div class="achs" id="achs"></div>
        <h3 class="section-h">Archive</h3>
        <div class="save-row">
          <button class="btn" id="btn-export">Export save</button>
          <button class="btn" id="btn-import">Import save</button>
          <button class="btn btn-danger" id="btn-wipe">Wipe save</button>
        </div>
        <p class="footnote">Autosaves every 15 seconds. Your cosmos keeps forging while you are away (up to 12 hours).</p>
      </div>
    </section>

  </main>
</div>

<div id="toasts" aria-live="polite"></div>
<div id="comet" role="button" aria-label="Catch the golden comet" hidden><span>☄️</span></div>
<div id="flash" aria-hidden="true"></div>

<div id="offline-modal" hidden>
  <div class="modal-card">
    <div class="modal-glyph" aria-hidden="true">✦</div>
    <h2>Welcome back, forgemaster</h2>
    <p id="offline-text"></p>
    <button class="btn btn-gold" id="offline-ok">Collect</button>
  </div>
</div>

<script src="game.js"></script>
</body>
</html>