master
AdityaAngajala Publish 0.3.0 6d39e2e 2mo ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Procedural Circuit Background</title>
    <style>
      :root {
        color-scheme: dark;
        --bg: #0d1117;
        --surface: #161b22;
        --border: #30363d;
        --text: #e6edf3;
        --muted: #8b949e;
        --accent: #00b8b0;
        --accent-bright: #00e6dc;
      }

      * { box-sizing: border-box; }
      html, body { min-height: 100%; margin: 0; }
      body {
        background: var(--bg);
        color: var(--text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      }

      .hero {
        --circuit-hole: var(--bg);
        position: relative;
        min-height: 100svh;
        overflow: hidden;
        display: grid;
        place-items: center;
        isolation: isolate;
      }

      .circuit-layer {
        position: absolute;
        inset: 0;
        z-index: 0;
      }

      .glow {
        --atmosphere-strength: 1;
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background:
          radial-gradient(ellipse 46% 34% at 50% 45%, rgba(13, 17, 23, .64), rgba(13, 17, 23, .34) 48%, transparent 100%),
          linear-gradient(to top, var(--bg) 0, transparent 13rem);
      }

      .glow::before {
        content: "";
        position: absolute;
        inset: -12%;
        background:
          radial-gradient(ellipse 28% 38% at 22% 48%, rgba(0, 230, 220, .06), transparent 72%),
          radial-gradient(ellipse 34% 42% at 58% 46%, rgba(57, 184, 255, .045), transparent 72%),
          radial-gradient(ellipse 30% 38% at 84% 52%, rgba(140, 107, 247, .045), transparent 72%);
        mix-blend-mode: screen;
        opacity: calc(var(--atmosphere-strength) * .72);
        filter: blur(34px);
      }

      .hero[data-motion="on"][data-animation-system="conductor"] .glow {
        background:
          radial-gradient(circle at 52% 44%, rgba(0, 230, 220, .06), transparent 34%),
          linear-gradient(to top, var(--bg) 0, transparent 12rem);
        animation: atmosphere-breathe 8s ease-in-out infinite alternate;
        will-change: opacity, filter;
      }

      .hero[data-motion="on"][data-animation-system="conductor"] .glow::before {
        inset: -18%;
        background:
          radial-gradient(circle at 28% 38%, rgba(0, 230, 220, .075), transparent 20%),
          radial-gradient(circle at 72% 58%, rgba(100, 171, 255, .055), transparent 24%),
          radial-gradient(circle at 52% 82%, rgba(197, 179, 255, .04), transparent 18%);
        opacity: 1;
        filter: none;
        animation: atmosphere-drift 19s cubic-bezier(.45,.05,.55,.95) infinite alternate;
        will-change: transform;
      }

      @keyframes atmosphere-breathe {
        from { opacity: var(--atmosphere-low, .66); filter: saturate(.82); }
        to { opacity: var(--atmosphere-high, 1); filter: saturate(1.18); }
      }

      @keyframes atmosphere-drift {
        0% { transform: translate3d(-3%, -2%, 0) scale(1); }
        45% { transform: translate3d(4%, 1%, 0) scale(1.08); }
        100% { transform: translate3d(-1%, 5%, 0) scale(1.03); }
      }

      main {
        position: relative;
        z-index: 2;
        width: min(760px, calc(100% - 40px));
        text-align: center;
        padding: 80px 0 180px;
      }

      .hero-copy { position: relative; }

      .eyebrow {
        margin: 0 0 20px;
        color: var(--accent-bright);
        font: 600 12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        letter-spacing: .18em;
        text-transform: uppercase;
      }

      h1 {
        margin: 0;
        font-size: clamp(3.2rem, 10vw, 7.5rem);
        line-height: .9;
        letter-spacing: -.055em;
        color: transparent;
        background: linear-gradient(100deg, #e6edf3 4%, #00e6dc 38%, #39b8ff 66%, #8c6bf7 96%);
        background-clip: text;
        filter: drop-shadow(0 0 .4em rgba(255,255,255,.18));
      }

      .lede {
        max-width: 570px;
        margin: 28px auto 0;
        color: #bac6d3;
        font-size: clamp(1rem, 2vw, 1.25rem);
        line-height: 1.6;
      }

      .hint {
        margin-top: 24px;
        color: var(--muted);
        font: 500 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }

      .controls {
        position: fixed;
        left: 50%;
        bottom: 12px;
        z-index: 5;
        width: min(1180px, calc(100% - 24px));
        transform: translateX(-50%);
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: end;
        gap: 8px;
        padding: 10px;
        border: 1px solid rgba(48, 54, 61, .9);
        border-radius: 12px;
        background: rgba(22, 27, 34, .88);
        box-shadow: 0 18px 70px rgba(0,0,0,.38);
        backdrop-filter: blur(18px);
      }

      label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 10px; }
      label > span { display: flex; justify-content: space-between; gap: 3px; white-space: nowrap; }
      input[type="text"] {
        width: 100%;
        height: 32px;
        padding: 0 8px;
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 8px;
        outline: none;
        background: #0d1117;
        font: 500 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      }
      input[type="text"]:focus { border-color: var(--accent); }
      input[type="range"] { width: 100%; accent-color: var(--accent); }

      button {
        height: 32px;
        padding: 0 11px;
        color: var(--text);
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #21262d;
        font: 700 12px system-ui, sans-serif;
        cursor: pointer;
      }
      button:hover { border-color: #59636e; background: #282e36; }
      button.primary { color: #062d2b; border-color: var(--accent); background: var(--accent); }
      button.primary:hover { background: var(--accent-bright); }

      .preset-bar {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
      }
      .preset-title {
        margin-right: 3px;
        color: var(--muted);
        font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        letter-spacing: .12em;
        text-transform: uppercase;
      }
      .preset-bar button {
        height: 28px;
        padding: 0 10px;
        color: #aab5c1;
        font-size: 11px;
      }
      .preset-bar button[aria-pressed="true"] {
        color: #082f2d;
        border-color: var(--accent);
        background: var(--accent);
      }
      .parameter-panel {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: end;
        gap: 8px;
      }
      .parameter-panel[hidden] { display: none; }
      /* A quiet text toggle, not a button: it opens a drawer, it does not pick a preset. */
      .preset-bar .panel-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        width: auto;
        height: 28px;
        padding: 0 2px;
        margin-left: 4px;
        color: var(--muted);
        border: 0;
        border-radius: 0;
        background: none;
        font: 600 11px system-ui, sans-serif;
      }
      .preset-bar .panel-toggle:hover { color: var(--text); border: 0; background: none; }
      .preset-bar .panel-toggle:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
      .preset-bar .panel-toggle[aria-expanded="true"] { color: var(--accent-bright); }
      .panel-toggle .chevron { display: inline-block; font-size: 9px; line-height: 1; transition: transform .15s ease; }
      .panel-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }

      .animation-bar {
        padding-top: 8px;
        border-top: 1px solid rgba(48, 54, 61, .72);
      }
      .movement-power {
        flex: 1 1 150px;
        max-width: 180px;
        margin-left: 6px;
      }
      .movement-power input { margin: 0; }
      .trace-count {
        margin-left: auto;
        color: var(--accent-bright);
        font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        white-space: nowrap;
      }

      @media (max-width: 1180px) {
        .controls {
          grid-template-columns: repeat(6, minmax(0, 1fr));
          max-height: calc(100svh - 24px);
          overflow-y: auto;
        }
        .parameter-panel { grid-template-columns: repeat(6, minmax(0, 1fr)); }
        .preset-bar { flex-wrap: wrap; }
      }

      @media (max-width: 760px) {
        .controls { grid-template-columns: 1fr 1fr; bottom: 12px; }
        .parameter-panel { grid-template-columns: 1fr 1fr; }
        .controls button { width: 100%; }
        .preset-title { width: 100%; }
        .trace-count { margin-left: 0; }
        main { padding-bottom: 360px; }
      }

      @media (prefers-reduced-motion: reduce) {
        .glow, .glow::before { animation: none; }
        .panel-toggle .chevron { transition: none; }
      }
    </style>
  </head>
  <body>
    <section class="hero" id="hero">
      <div class="circuit-layer" id="circuit"></div>
      <div class="glow" aria-hidden="true"></div>
      <main>
        <div class="hero-copy" data-circuit-reading-zone>
          <p class="eyebrow">Seeded SVG generator</p>
          <h1>Live circuitry</h1>
          <p class="lede">
            A procedural version of the Nitrogen hero pattern: dense routed traces, 45° chamfers,
            annular vias, continuous trace packing, and multiple animation systems for the generated topology.
          </p>
          <p class="hint" id="motionHint">Static circuit · no animation layers</p>
        </div>
      </main>
    </section>

    <form class="controls" id="controls">
      <div class="preset-bar" aria-label="Generator presets">
        <span class="preset-title">Generation</span>
        <button type="button" data-preset="original" aria-pressed="true">Original match</button>
        <button type="button" data-preset="dense" aria-pressed="false">Dense</button>
        <button type="button" data-preset="diagonal" aria-pressed="false">Diagonal sweep</button>
        <button type="button" data-preset="swirl" aria-pressed="false">Broad swirl</button>
        <button type="button" data-preset="sparse" aria-pressed="false">Sparse</button>
        <button type="button" class="panel-toggle" id="parameterToggle" aria-expanded="false" aria-controls="parameterPanel">
          Parameters<span class="chevron" aria-hidden="true">▾</span>
        </button>
        <output class="trace-count" id="traceCount">235 traces</output>
      </div>
      <div class="parameter-panel" id="parameterPanel" hidden>
      <label>
        Seed
        <input id="seed" type="text" value="nitrogen" autocomplete="off" spellcheck="false" />
      </label>
      <label>
        <span>Density <output id="fillValue">74.4%</output></span>
        <input id="fill" type="range" min="0.35" max="0.76" step="0.001" value="0.744" />
      </label>
      <label>
        <span>Avg length <output id="routeLengthValue">1.14×</output></span>
        <input id="routeLength" type="range" min="0.55" max="2.25" step="0.01" value="1.14" />
      </label>
      <label>
        <span>Primary flow <output id="horizontalFlowValue">90%</output></span>
        <input id="horizontalFlow" type="range" min="0.3" max="0.98" step="0.01" value="0.9" />
      </label>
      <label>
        <span>Angle <output id="flowAngleValue">153°</output></span>
        <input id="flowAngle" type="range" min="0" max="180" step="1" value="153" />
      </label>
      <label>
        <span>Diagonal <output id="diagonalFlowValue">100%</output></span>
        <input id="diagonalFlow" type="range" min="0" max="1" step="0.01" value="1" />
      </label>
      <label>
        <span>Long flow <output id="longFlowValue">31%</output></span>
        <input id="longFlow" type="range" min="0" max="0.36" step="0.01" value="0.31" />
      </label>
      <label>
        <span>Swirl <output id="swirlValue">82%</output></span>
        <input id="swirl" type="range" min="0" max="1.4" step="0.01" value="0.82" />
      </label>
      <label>
        <span>Swirl scale <output id="swirlScaleValue">0.72×</output></span>
        <input id="swirlScale" type="range" min="0.25" max="1.4" step="0.01" value="0.72" />
      </label>
      <label>
        <span>Jog size <output id="jogLengthValue">0.42×</output></span>
        <input id="jogLength" type="range" min="0.3" max="1.8" step="0.01" value="0.42" />
      </label>
      <label>
        <span>Channel pull <output id="channelAttractionValue">150%</output></span>
        <input id="channelAttraction" type="range" min="0" max="1.5" step="0.01" value="1.5" />
      </label>
      <label>
        <span>Scale <output id="featureScaleValue">1.37×</output></span>
        <input id="featureScale" type="range" min="0.55" max="2" step="0.01" value="1.37" />
      </label>
      </div>
      <div class="preset-bar animation-bar" aria-label="Animation presets">
        <span class="preset-title">Animation</span>
        <button type="button" data-animation-preset="none" aria-pressed="true">None</button>
        <button type="button" data-animation-preset="growth" aria-pressed="false">Trace growth</button>
        <button type="button" data-animation-preset="reflection" aria-pressed="false">Adom reflection</button>
        <button type="button" data-animation-preset="conductor" aria-pressed="false">Conductor</button>
        <button type="button" data-animation-preset="routed" aria-pressed="false">Routed field</button>
        <button type="button" data-animation-preset="handshake" aria-pressed="false">Handshake</button>
        <label class="movement-power">
          <span>Movement power <output id="livelinessValue">0%</output></span>
          <input id="liveliness" type="range" min="0" max="1.5" step="0.01" value="0" />
        </label>
        <button class="primary" type="submit">Generate</button>
        <button id="download" type="button">Export SVG</button>
      </div>
    </form>

    <script type="module">
      import { ANIMATION_PRESETS, createCircuitBackground } from "./circuit-background-v6.js?v=1";

      const mount = document.querySelector("#circuit");
      const controls = document.querySelector("#controls");
      const generationPresetButtons = [...document.querySelectorAll("[data-preset]")];
      const animationPresetButtons = [...document.querySelectorAll("[data-animation-preset]")];
      const traceCount = document.querySelector("#traceCount");
      const hero = document.querySelector("#hero");
      const glow = document.querySelector(".glow");
      const seed = document.querySelector("#seed");
      const parameterToggle = document.querySelector("#parameterToggle");
      const parameterPanel = document.querySelector("#parameterPanel");
      const motionHint = document.querySelector("#motionHint");
      const download = document.querySelector("#download");

      const geometryParameterIds = ["fill", "routeLength", "horizontalFlow", "flowAngle", "diagonalFlow", "longFlow", "swirl", "swirlScale", "jogLength", "channelAttraction", "featureScale"];
      const animationParameterIds = ["liveliness"];
      const parameterIds = [...geometryParameterIds, ...animationParameterIds];
      const parameters = Object.fromEntries(parameterIds.map((id) => [id, document.querySelector(`#${id}`)]));
      const presets = {
        original: { fill: 0.744, routeLength: 1.14, horizontalFlow: 0.9, flowAngle: 153, diagonalFlow: 1, longFlow: 0.31, swirl: 0.82, swirlScale: 0.72, jogLength: 0.42, channelAttraction: 1.5, featureScale: 1.37 },
        dense: { fill: 0.76, routeLength: 1.29, horizontalFlow: 0.57, flowAngle: 138, diagonalFlow: 0.26, longFlow: 0.3, swirl: 0.43, swirlScale: 0.52, jogLength: 0.85, channelAttraction: 0.69, featureScale: 0.65 },
        diagonal: { fill: 0.591, routeLength: 1.51, horizontalFlow: 0.98, flowAngle: 45, diagonalFlow: 1, longFlow: 0, swirl: 0, swirlScale: 0.75, jogLength: 0.65, channelAttraction: 0.86, featureScale: 1.28 },
        swirl: { fill: 0.58, routeLength: 1.1, horizontalFlow: 0.82, flowAngle: 15, diagonalFlow: 0.72, longFlow: 0.2, swirl: 0.9, swirlScale: 0.9, jogLength: 0.75, channelAttraction: 0.8, featureScale: 1 },
        sparse: { fill: 0.35, routeLength: 1.9, horizontalFlow: 0.45, flowAngle: 0, diagonalFlow: 0.3, longFlow: 0.32, swirl: 0.08, swirlScale: 0.93, jogLength: 0.57, channelAttraction: 0.6, featureScale: 0.88 },
      };
      const animationHints = {
        none: "Static circuit · no animation layers",
        conductor: "Move to shape the current · click anywhere to activate the network",
        adom: "Move to steer the routed field · click to launch a local bloom",
        handshake: "Move to bias the next handshake · click to request a local exchange",
        growth: "A curved routing front grows each trace from its source via to its destination",
        reflection: "Move to catch the light · click to send a quiet reflection across the board",
      };
      const formats = {
        fill: (value) => `${Number((value * 100).toFixed(1))}%`,
        routeLength: (value) => `${value.toFixed(2)}×`,
        horizontalFlow: (value) => `${Math.round(value * 100)}%`,
        flowAngle: (value) => `${Math.round(value)}°`,
        diagonalFlow: (value) => `${Math.round(value * 100)}%`,
        longFlow: (value) => `${Math.round(value * 100)}%`,
        swirl: (value) => `${Math.round(value * 100)}%`,
        swirlScale: (value) => `${value.toFixed(2)}×`,
        jogLength: (value) => `${value.toFixed(2)}×`,
        channelAttraction: (value) => `${Math.round(value * 100)}%`,
        featureScale: (value) => `${value.toFixed(2)}×`,
        liveliness: (value) => `${Math.round(value * 100)}%`,
      };

      const query = new URLSearchParams(location.search);
      const requestedAnimationPreset = query.get("animationPreset");
      const initialAnimationPreset = ANIMATION_PRESETS[requestedAnimationPreset]
        ? requestedAnimationPreset
        : "none";
      let animationOptions = { ...ANIMATION_PRESETS[initialAnimationPreset] };
      if (query.has("seed")) seed.value = query.get("seed").slice(0, 80);
      for (const id of parameterIds) {
        if (!query.has(id)) continue;
        const value = Number(query.get(id));
        if (Number.isFinite(value)) parameters[id].value = String(value);
      }
      // A deep link that tunes parameters should show them, not hide the reason the render differs.
      if (geometryParameterIds.some((id) => query.has(id))) {
        parameterToggle.setAttribute("aria-expanded", "true");
        parameterPanel.hidden = false;
      }
      if (!query.has("liveliness")) parameters.liveliness.value = String(animationOptions.liveliness);
      if (query.has("motion")) {
        animationOptions.motion = !["0", "false", "off"].includes(query.get("motion").toLowerCase());
      }

      function setActiveGenerationPreset(name) {
        for (const button of generationPresetButtons) {
          button.setAttribute("aria-pressed", String(button.dataset.preset === name));
        }
      }

      function setActiveAnimationPreset(name) {
        for (const button of animationPresetButtons) {
          button.setAttribute("aria-pressed", String(button.dataset.animationPreset === name));
        }
      }

      function applyAtmosphere(options) {
        const amount = Math.max(0, Math.min(1.25, options.atmosphereStrength));
        hero.dataset.animationSystem = options.animationSystem;
        hero.dataset.motion = options.motion ? "on" : "off";
        glow.style.setProperty("--atmosphere-strength", String(amount));
        glow.style.setProperty("--atmosphere-low", String(Math.min(1, amount * 0.66)));
        glow.style.setProperty("--atmosphere-high", String(Math.min(1, amount)));
        motionHint.textContent = animationHints[options.animationSystem] || animationHints.none;
      }

      if (geometryParameterIds.some((id) => query.has(id))) setActiveGenerationPreset(null);
      const animationIsCustom = animationParameterIds.some((id) => query.has(id)) || query.has("motion");
      setActiveAnimationPreset(animationIsCustom ? null : initialAnimationPreset);
      applyAtmosphere(animationOptions);

      function optionsFromControls() {
        const options = {
          ...animationOptions,
          seed: seed.value.trim() || "nitrogen",
          traceColor: "#1d2938",
        };
        for (const id of parameterIds) options[id] = Number(parameters[id].value);
        return options;
      }

      function updateOutput(id) {
        const value = Number(parameters[id].value);
        document.querySelector(`#${id}Value`).value = formats[id](value);
      }
      parameterIds.forEach(updateOutput);

      const circuit = createCircuitBackground(mount, optionsFromControls());
      let regenerationTimer;

      function updateTraceCount() {
        traceCount.value = `${circuit.field.traces.length} traces`;
      }
      updateTraceCount();

      function regenerate() {
        window.clearTimeout(regenerationTimer);
        circuit.regenerate(optionsFromControls());
        updateTraceCount();
      }

      for (const id of parameterIds) {
        parameters[id].addEventListener("input", () => {
          if (geometryParameterIds.includes(id)) setActiveGenerationPreset(null);
          else setActiveAnimationPreset(null);
          updateOutput(id);
          window.clearTimeout(regenerationTimer);
          regenerationTimer = window.setTimeout(regenerate, 140);
        });
      }
      for (const button of generationPresetButtons) {
        button.addEventListener("click", () => {
          const name = button.dataset.preset;
          const values = presets[name];
          for (const [id, value] of Object.entries(values)) {
            parameters[id].value = String(value);
            updateOutput(id);
          }
          setActiveGenerationPreset(name);
          regenerate();
        });
      }
      parameterToggle.addEventListener("click", () => {
        const expanded = parameterToggle.getAttribute("aria-expanded") === "true";
        parameterToggle.setAttribute("aria-expanded", String(!expanded));
        parameterPanel.hidden = expanded;
      });
      for (const button of animationPresetButtons) {
        button.addEventListener("click", () => {
          const name = button.dataset.animationPreset;
          animationOptions = { ...ANIMATION_PRESETS[name] };
          parameters.liveliness.value = String(animationOptions.liveliness);
          updateOutput("liveliness");
          applyAtmosphere(animationOptions);
          setActiveAnimationPreset(name);
          regenerate();
        });
      }
      seed.addEventListener("change", regenerate);

      controls.addEventListener("submit", (event) => {
        event.preventDefault();
        regenerate();
      });

      function saveBlob(text, name) {
        const blob = new Blob([text], { type: "image/svg+xml" });
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = name;
        link.click();
        URL.revokeObjectURL(url);
      }

      const slug = () => (seed.value || "seed").replace(/[^a-z0-9_-]+/gi, "-");

      download.addEventListener("click", () => {
        saveBlob(circuit.exportSvg(), `circuit-${slug()}.svg`);
      });

    </script>
  </body>
</html>