Circuit Trace Generators

@@ -0,0 +1,67 @@+<!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, 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> seamless 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 · Field router <span class="accent">·</span> continuous packed field</h2>+    <p class="meta">Flow-field and vortex trace packing, sized to the mount. Five geometry presets and four animation systems (none, conductor, routed field, handshake). Entry: <code>circuit-background-v5.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. Private to the adom org, so the demos load for signed-in members.+  </footer>+</div>+</body>+</html>