Circuit Trace Generators

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Circuit Trace Generators: interactive playground</title>
<style>
  :root { color-scheme: dark; }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: #0d1117;
    color: #c9d4e3;
    font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  .wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }
  header h1 { margin: 0 0 6px; font-size: 26px; color: #eaf2ff; letter-spacing: -0.01em; }
  header p { margin: 0 0 4px; color: #8b97a8; max-width: 70ch; }
  .accent { color: #00e6dc; }
  .demo { margin-top: 34px; }
  .demo h2 { margin: 0 0 4px; font-size: 19px; color: #eaf2ff; }
  .demo .meta { margin: 0 0 12px; color: #8b97a8; font-size: 13.5px; }
  .demo .meta code { color: #64abff; background: #151b25; padding: 1px 5px; border-radius: 4px; }
  .frame {
    width: 100%;
    height: 78vh;
    min-height: 560px;
    border: 1px solid #1e2633;
    border-radius: 12px;
    background: #0d1117;
    display: block;
  }
  .open { margin-top: 10px; font-size: 13.5px; }
  .open a { color: #00e6dc; text-decoration: none; }
  .open a:hover { text-decoration: underline; }
  footer { margin-top: 46px; color: #5c6675; font-size: 12.5px; border-top: 1px solid #1e2633; padding-top: 16px; }
</style>
</head>
<body>
<div class="wrap">
  <header>
    <h1>Circuit Trace Generators <span class="accent">·</span> interactive playground</h1>
    <p>Both routers and the tiling reveal, live and embedded below. These are the real engines from this
    page's <code>src/</code>, served by the wiki, so they need no container and stay up.</p>
    <p>Drag the sliders, switch presets, and move the pointer over each board.</p>
  </header>

  <section class="demo">
    <h2>1 · Tiling router <span class="accent">·</span> repeating torus tile</h2>
    <p class="meta">Occupancy-grid A* router on a torus. Twelve generation knobs, a cursor-fed signal fountain, and five animation presets. Engine: <code>circuit-background.js</code>.</p>
    <iframe class="frame" src="./index-classic.html" title="Tiling router, live interactive demo" loading="lazy"></iframe>
    <p class="open">▶ <a href="./index-classic.html" target="_blank" rel="noopener">Open this demo full screen</a></p>
  </section>

  <section class="demo">
    <h2>2 · Tiling reveal <span class="accent">·</span> progressive route growth</h2>
    <p class="meta">Etch, Flood, Sweep, Bloom, and Scatter grow the same torus tile before an exact static-SVG handoff. Entry: <code>circuit-background-reveal.js</code>.</p>
    <iframe class="frame" src="./index-reveal.html" title="Tiling reveal, live interactive demo" loading="lazy"></iframe>
    <p class="open">▶ <a href="./index-reveal.html" target="_blank" rel="noopener">Open this demo full screen</a></p>
  </section>

  <section class="demo">
    <h2>3 · Field router <span class="accent">·</span> continuous packed field</h2>
    <p class="meta">Version 9 adds obstacles, flow or scroll reveal, append-only generation, and five ambient systems. Entry: <code>circuit-background-v9.js</code>.</p>
    <iframe class="frame" src="./index.html" title="Field router, live interactive demo" loading="lazy"></iframe>
    <p class="open">▶ <a href="./index.html" target="_blank" rel="noopener">Open this demo full screen</a></p>
  </section>

  <footer>
    Hosted on the Adom Wiki via the page render endpoint. The engines are the real files under this page's src/.
  </footer>
</div>
</body>
</html>