{% extends "main.html" %}

{% block extrahead %}
  {{ super() }}
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&display=swap">
  <meta property="og:title" content="retrokix — Retro consoles you can drive">
  <meta property="og:description" content="Hacker-first multi-console emulator (GBA + NES + SNES). Pip-installable, native libretro cores, HTTP API any LLM can reach. Bring your keyboard, your gamepad, and your AI — they all work together.">
  <meta property="og:type" content="website">
  <meta name="twitter:card" content="summary_large_image">
{% endblock %}

{% block tabs %}
  {{ super() }}
  <section class="gx-hero">
    <div class="gx-hero__inner">
      <div class="gx-hero__copy">
        <div class="gx-hero__eyebrow">
          <span class="gx-pill gx-pill--accent">v0.20.0</span>
          <span class="gx-pill">alpha</span>
          <span class="gx-pill">GBA + NES + SNES</span>
          <span class="gx-pill">MPL-2.0</span>
          <span class="gx-pill">Linux x86_64</span>
        </div>
        <h1 class="gx-hero__title">
          <span class="gx-wordmark" aria-hidden="true">retrokix</span>
          <span class="gx-hero__tagline">Retro consoles you can drive.</span>
        </h1>
        <p class="gx-hero__lead">
          An emulator for hackers, speedrunners, and AI researchers. Plays
          <span class="gx-rot gx-rot--title" data-gx-rot="title">Pokémon Emerald</span>
          in a window with sound and a keyboard — and in the same session
          exposes the framebuffer, memory bus, and input as an HTTP API any
          coding agent can reach.
        </p>
        <p class="gx-hero__lead gx-hero__lead--dim">
          Same emulator. Same session. Same API. Whether you're the player
          or the algorithm, you're in the loop together.
        </p>
        <div class="gx-hero__ctas">
          <a class="gx-btn gx-btn--primary" href="concepts/">
            Read the docs
            <span class="gx-btn__arrow" aria-hidden="true">→</span>
          </a>
          <a class="gx-btn gx-btn--ghost" href="https://github.com/apiad/retrokix">
            <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="currentColor">
              <path d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.8 10.9.6.1.8-.2.8-.6v-2.2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.3-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.7 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.2 1.2.9-.3 1.9-.4 2.9-.4s2 .1 2.9.4c2.2-1.5 3.2-1.2 3.2-1.2.6 1.7.2 2.9.1 3.2.7.8 1.2 1.8 1.2 3.1 0 4.4-2.7 5.4-5.3 5.7.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.5-1.5 7.8-5.8 7.8-10.9C23.5 5.7 18.3.5 12 .5z"/>
            </svg>
            GitHub
          </a>
        </div>
      </div>

      <div class="gx-hero__visual" aria-hidden="true">
        <div class="gx-screen">
          <div class="gx-screen__bezel">
            <div class="gx-screen__lcd">
              <div class="gx-screen__img-stack" data-base="{{ 'games/' | url }}">
              <img class="gx-screen__img is-visible" alt="">
              <img class="gx-screen__img" alt="">
            </div>
            <div class="gx-screen__scanlines"></div>
            <div class="gx-screen__glow"></div>
            </div>
            <div class="gx-screen__dot gx-screen__dot--power"></div>
            <div class="gx-screen__label" data-gx-rot="label">GAME BOY ADVANCE</div>
          </div>
        </div>

        <div class="gx-terminal gx-terminal--curl">
          <div class="gx-terminal__bar">
            <span class="gx-terminal__dot"></span>
            <span class="gx-terminal__dot"></span>
            <span class="gx-terminal__dot"></span>
            <span class="gx-terminal__title">$ curl localhost:8420<span class="gx-rot" data-gx-rot="route">/plugins/emerald_party/party</span></span>
          </div>
          <pre class="gx-terminal__body"><code><span class="gx-rot" data-gx-rot="json"></span><span class="gx-cursor">▍</span></code></pre>
        </div>
      </div>
    </div>
  </section>

  <div class="gx-ticker" id="gx-ticker" aria-label="Top 100 games ranked by Wikipedia fame, shuffled"></div>

  <section class="gx-roster">
    <div class="gx-roster__inner">
      <div class="gx-roster__cell">
        <span class="gx-roster__icon" aria-hidden="true">🎮</span>
        <div>
          <div class="gx-roster__label">Consoles in the wheel</div>
          <div class="gx-roster__value">GBA · NES · SNES</div>
        </div>
      </div>
      <div class="gx-roster__cell">
        <span class="gx-roster__icon" aria-hidden="true">📦</span>
        <div>
          <div class="gx-roster__label">ROMs in the index</div>
          <div class="gx-roster__value">14,000+</div>
        </div>
      </div>
      <div class="gx-roster__cell">
        <span class="gx-roster__icon" aria-hidden="true">⭐</span>
        <div>
          <div class="gx-roster__label">Ranked by</div>
          <div class="gx-roster__value">Wikipedia fame</div>
        </div>
      </div>
      <div class="gx-roster__cell">
        <span class="gx-roster__icon" aria-hidden="true">🚀</span>
        <div>
          <div class="gx-roster__label">Cadence</div>
          <div class="gx-roster__value">New cores weekly</div>
        </div>
      </div>
    </div>
  </section>

  <section class="gx-section gx-section--start">
    <div class="gx-section__inner">
      <p class="gx-eyebrow">Three commands.</p>
      <h2 class="gx-h2"><span class="gx-rot gx-rot--title" data-gx-rot="title">Pokémon Emerald</span>, in a window, with sound.</h2>
      <pre class="gx-codeblock"><code><span class="t-pf">$</span> pip install retrokix
<span class="t-pf">$</span> retrokix download <span class="t-s">"<span class="gx-rot" data-gx-rot="download">pokemon emerald</span>"</span>
<span class="t-pf">$</span> retrokix play <span class="gx-rot" data-gx-rot="rom">emerald</span></code></pre>
      <p class="gx-section__caption">
        The wheel ships a prebuilt <code>mgba_libretro.so</code>. No cmake.
        No apt-get. No <code>$RETROKIX_CORE_PATH</code>.
      </p>
      <div class="gx-alt">
        <span class="gx-alt__label">Or, point-and-click</span>
        <pre class="gx-codeblock gx-codeblock--inline"><code><span class="t-pf">$</span> retrokix browse</code></pre>
        <p class="gx-alt__caption">
          Interactive search-as-you-type over <strong>14,000+ ROMs across GBA + NES + SNES</strong>, ranked by Wikipedia fame with a five-star column.
          Arrow keys to navigate, <kbd>Enter</kbd> to download. ROMs you
          already own show a green <span class="gx-alt__dot">●</span>.
        </p>
      </div>
    </div>
  </section>

  <section class="gx-section gx-section--loop">
    <div class="gx-section__inner">
      <p class="gx-eyebrow">The cooperative loop.</p>
      <h2 class="gx-h2">Bring a keyboard. Bring a gamepad. Bring an LLM.</h2>
      <p class="gx-section__lead">
        Every input source — keyboard, controller, HTTP — drives the
        same runtime via the same lock. They combine by set-union; none
        of them blocks the others. Plug in two pads, plug in an agent,
        keep your hand on the keyboard. All of it works together.
      </p>
      <div class="gx-loop">
        <div class="gx-loop__player">
          <div class="gx-loop__label">Human</div>
          <div class="gx-loop__body">
            <span class="gx-key">↑</span><span class="gx-key">↓</span><span class="gx-key">←</span><span class="gx-key">→</span>
            <span class="gx-key">A</span><span class="gx-key">B</span>
            <span class="gx-key">L</span><span class="gx-key">R</span>
            <span class="gx-key">Select</span><span class="gx-key">Start</span>
          </div>
          <div class="gx-loop__row">
            <span class="gx-key gx-key--mod">Ctrl</span>+<span class="gx-key">1</span>…<span class="gx-key">9</span>
            <span class="gx-loop__hint">save slot</span>
          </div>
          <div class="gx-loop__row">
            <span class="gx-key gx-key--mod">Shift</span>+<span class="gx-key">1</span>…<span class="gx-key">9</span>
            <span class="gx-loop__hint">load slot</span>
          </div>
          <div class="gx-loop__row">
            <span class="gx-key gx-key--mod">L-Shift</span>
            <span class="gx-loop__hint">8× fast-forward</span>
          </div>
          <div class="gx-loop__row">
            <span class="gx-key">F12</span>
            <span class="gx-loop__hint">screenshot</span>
          </div>
          <div class="gx-loop__row">
            <span class="gx-key gx-key--mod">🎮</span>
            <span class="gx-loop__hint">USB / Bluetooth pad — XInput, DualShock, 8BitDo, Steam, clones</span>
          </div>
          <div class="gx-loop__caption">SDL window · keyboard · gamepad · macros · save states</div>
        </div>
        <div class="gx-loop__pipe">
          <span class="gx-loop__pulse"></span>
          <span class="gx-loop__pulse"></span>
          <span class="gx-loop__pulse"></span>
        </div>
        <div class="gx-loop__agent">
          <div class="gx-loop__label">Agent</div>
          <div class="gx-loop__body gx-loop__body--code">
            <code>POST /action</code>
            <code>GET  /frame</code>
            <code>GET  /memory/0x02024284</code>
            <code>POST /buttons</code>
            <code>POST /capture_state</code>
            <code>GET  /savestate/3</code>
            <code>GET  /plugins/emerald_party/party</code>
          </div>
          <div class="gx-loop__caption">HTTP · script · LLM · pipe</div>
        </div>
      </div>
    </div>
  </section>

  <section class="gx-section gx-section--cards">
    <div class="gx-section__inner">
      <p class="gx-eyebrow">What you get.</p>
      <h2 class="gx-h2">One install. Seven surfaces.</h2>
      <div class="gx-cards">
        <article class="gx-card">
          <div class="gx-card__icon">🎮</div>
          <h3 class="gx-card__title">14,000+ ROMs</h3>
          <p class="gx-card__body">
            Fuzzy-searchable No-Intro index across GBA, NES, and SNES,
            ranked by Wikipedia fame with a five-star column.
            <code>retrokix download</code> pulls from the public
            archive.org mirror. Bring games you own.
          </p>
        </article>
        <article class="gx-card">
          <div class="gx-card__icon">🌐</div>
          <h3 class="gx-card__title">HTTP API</h3>
          <p class="gx-card__body">
            Framebuffer, full memory bus, input, cheats, save states,
            an atomic <code>/action</code> for multi-step agent plans,
            and a live <code>/stream</code> over WebSocket.
          </p>
        </article>
        <article class="gx-card">
          <div class="gx-card__icon">🧩</div>
          <h3 class="gx-card__title">Plugins</h3>
          <p class="gx-card__body">
            Python files that hook the play loop <em>and</em> publish HTTP
            routes under <code>/plugins/&lt;name&gt;/…</code>. Bundled Emerald
            party plugin shows the pattern.
          </p>
        </article>
        <article class="gx-card">
          <div class="gx-card__icon">🧪</div>
          <h3 class="gx-card__title">State tracker</h3>
          <p class="gx-card__body">
            Supervised memory inference. Label what's true
            (<code>hp=22, scene=overworld</code>). retrokix intersects across
            captures and finds where each value lives.
          </p>
        </article>
        <article class="gx-card">
          <div class="gx-card__icon">⌨️</div>
          <h3 class="gx-card__title">Macros &amp; cheats</h3>
          <p class="gx-card__body">
            <kbd>Ctrl+R</kbd> records, <kbd>F1</kbd>–<kbd>F9</kbd> replay.
            ~6,700 cheat codes vendored from libretro-database; no network at
            runtime.
          </p>
        </article>
        <article class="gx-card">
          <div class="gx-card__icon">📺</div>
          <h3 class="gx-card__title">GPU shaders</h3>
          <p class="gx-card__body">
            <code>crt-lottes</code> out of the box, custom WGSL when you want
            pretty, via the <code>[gpu]</code> extra.
          </p>
        </article>
        <article class="gx-card">
          <div class="gx-card__icon">📱</div>
          <h3 class="gx-card__title">Browser stream</h3>
          <p class="gx-card__body">
            <code>/stream</code> serves a stylish GBA-bezel viewer page;
            <code>/stream/ws</code> pushes pristine RGBA frames at 30 fps.
            <code>?mode=controller</code> docks an on-screen pad — play
            on your phone, your laptop, anything in between.
          </p>
        </article>
      </div>
    </div>
  </section>

  <section class="gx-section gx-section--audiences">
    <div class="gx-section__inner">
      <p class="gx-eyebrow">Built for three.</p>
      <h2 class="gx-h2">Same emulator. Three audiences.</h2>
      <div class="gx-audiences">
        <article class="gx-audience">
          <header class="gx-audience__hero">
            <span class="gx-audience__icon" aria-hidden="true">🤓</span>
            <span class="gx-audience__tag">The nerdstalgic</span>
          </header>
          <div class="gx-audience__body">
            <p class="gx-audience__lead">You want to <em>remember</em>.</p>
            <ul class="gx-audience__list">
              <li><span class="gx-li__icon">🎮</span> Browse the cartridges from your shelf — <code>retrokix browse</code></li>
              <li><span class="gx-li__icon">🕹️</span> Plug in any USB or Bluetooth pad — XInput, DualShock, 8BitDo, generic clones</li>
              <li><span class="gx-li__icon">💾</span> Save state anywhere — even mid-boss</li>
              <li><span class="gx-li__icon">⏩</span> Fast-forward the grind on <kbd>Left-Shift</kbd> or the left trigger</li>
              <li><span class="gx-li__icon">🍀</span> Pin a cheat to <kbd>F1</kbd> when you're stuck</li>
            </ul>
            <p class="gx-audience__tail">The agent layer doesn't even have to be running.</p>
          </div>
        </article>
        <article class="gx-audience">
          <header class="gx-audience__hero">
            <span class="gx-audience__icon" aria-hidden="true">🏎️</span>
            <span class="gx-audience__tag">The speedrunner</span>
          </header>
          <div class="gx-audience__body">
            <p class="gx-audience__lead">You want to <em>practice</em>.</p>
            <ul class="gx-audience__list">
              <li><span class="gx-li__icon">⌨️</span> Macros bound to any letter — <kbd>Ctrl+R</kbd> records</li>
              <li><span class="gx-li__icon">🎟️</span> ~6,700 cheat codes vendored offline</li>
              <li><span class="gx-li__icon">🎚️</span> Hotkey save slots, 8× on <kbd>Left-Shift</kbd></li>
              <li><span class="gx-li__icon">🤖</span> Bring an AI companion — Claude Code, OpenAI Codex, OpenCode</li>
            </ul>
            <p class="gx-audience__tail">Keyboard, gamepad, and the agent — all in the same loop, never blocking each other.</p>
          </div>
        </article>
        <article class="gx-audience">
          <header class="gx-audience__hero">
            <span class="gx-audience__icon" aria-hidden="true">🧪</span>
            <span class="gx-audience__tag">The scientist</span>
          </header>
          <div class="gx-audience__body">
            <p class="gx-audience__lead">You want a <em>laboratory</em>.</p>
            <ul class="gx-audience__list">
              <li><span class="gx-li__icon">🏟️</span> 3,555 hand-crafted environments — the level designers were genre masters</li>
              <li><span class="gx-li__icon">🥊</span> Tournaments and atomic multi-step actions</li>
              <li><span class="gx-li__icon">🏷️</span> Supervised state-tracker labels — say what's true, retrokix finds where it lives</li>
              <li><span class="gx-li__icon">🧩</span> Plugins that write their own plugins</li>
              <li><span class="gx-li__icon">🔌</span> BYO agent or wire an RL loop on <code>/action</code> + <code>/state</code></li>
            </ul>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section class="gx-section gx-section--cta">
    <div class="gx-section__inner gx-section__inner--narrow">
      <p class="gx-eyebrow">Take it for a spin.</p>
      <h2 class="gx-h2">Three lines, and you're in.</h2>
      <pre class="gx-codeblock gx-codeblock--cta"><code><span class="t-c"># Linux x86_64 — bundled core, no extra setup</span>
<span class="t-pf">$</span> pip install retrokix
<span class="t-pf">$</span> retrokix download <span class="t-s">"<span class="gx-rot" data-gx-rot="download">pokemon emerald</span>"</span>
<span class="t-pf">$</span> retrokix play <span class="gx-rot" data-gx-rot="rom">emerald</span> --listen --plugin <span class="gx-rot" data-gx-rot="plugin">retrokix.plugins.emerald_party</span></code></pre>
      <div class="gx-cta-row">
        <a class="gx-btn gx-btn--primary" href="installing/">Install guide</a>
        <a class="gx-btn gx-btn--ghost" href="cookbook/emerald_party/">
          Cookbook: Emerald party plugin
        </a>
      </div>
    </div>
  </section>
{% endblock %}

{% block content %}{% endblock %}
{% block footer %}
  {{ super() }}
{% endblock %}