Match hero circuit animation prototype

2026-08-22 11:49:09 -07:00
parent 1b5d05b794
commit feff0577ad
4 changed files with 244 additions and 61 deletions
@@ -9,10 +9,10 @@
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500&family=Playfair+Display:ital,wght@0,600;0,700;1,500;1,600&display=swap" rel="stylesheet">
  <link rel="icon" href="{{ '/static/favicon.svg'|url }}" type="image/svg+xml">
-  <link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=14">
+  <link rel="stylesheet" href="{{ '/static/style.css'|url }}?v=15">
  <script src="{{ '/static/tags.js'|url }}?v=1" defer></script>
  <script src="{{ '/static/activity.js'|url }}?v=1" defer></script>
-  <script src="{{ '/static/hero-circuit.js'|url }}?v=1" defer></script>
+  <script src="{{ '/static/hero-circuit.js'|url }}?v=2" defer></script>
  <script src="{{ '/static/narration.js'|url }}?v=1" defer></script>
 </head>
 <body>
@@ -6,7 +6,7 @@

  <div class="circuit-brand-block">
    <p class="circuit-brand-kicker">{{ this.eyebrow }}</p>
-    <h1>{{ this.summary }}</h1>
+    <h1>{{ this.summary|replace(' Signals', '<br>Signals')|safe }}</h1>
    <div class="circuit-dek">{{ this.body }}</div>
    <p class="circuit-status"><span aria-hidden="true"></span> network active / routes resolving</p>
  </div>
@@ -22,6 +22,15 @@
        <path d="M250 670 H390 V690 H520"/><path d="M535 680 H770 V700"/>
        <path d="M805 685 H930 V665 H1035"/><path d="M1035 690 H1165"/>
      </g>
+      <g class="circuit-ambient-packets">
+        <path d="M35 95 H185 V125 H410"/><path class="circuit-live-alt" d="M55 150 H155 V185 H300"/>
+        <path class="circuit-live-gold" d="M300 45 V115 H455"/><path class="circuit-live-alt" d="M465 65 H610 V100 H690"/>
+        <path d="M705 55 H835 V90 H930"/><path class="circuit-live-gold" d="M900 115 H1050 V80 H1160"/>
+        <path d="M1010 230 H1140 V335 H1085"/><path class="circuit-live-alt" d="M940 430 H1095 V465 H1165"/>
+        <path d="M45 455 H170 V475 H250"/><path class="circuit-live-gold" d="M40 585 H130 V555 H205"/>
+        <path class="circuit-live-alt" d="M250 670 H390 V690 H520"/><path d="M535 680 H770 V700"/>
+        <path class="circuit-live-gold" d="M805 685 H930 V665 H1035"/><path d="M1035 690 H1165"/>
+      </g>
      <g class="circuit-ghost">
        <path d="M70 350 H510 V180 H720 V140 H805"/>
        <path d="M180 390 H565 V320 H865"/>
@@ -33,6 +42,17 @@
        <path d="M790 605 H885 V590 H930"/>
        <path d="M970 540 H1030 V515 H1060"/>
      </g>
+      <g class="circuit-base">
+        <path d="M70 350 H510 V180 H720 V140 H805"/>
+        <path d="M180 390 H565 V320 H865"/>
+        <path d="M95 425 H470 V470 H720"/>
+        <path d="M90 505 H260 V530 H345"/>
+        <path d="M190 560 H350 V585 H430"/>
+        <path d="M430 610 H515 V630 H585"/>
+        <path d="M610 650 H700 V655 H755"/>
+        <path d="M790 605 H885 V590 H930"/>
+        <path d="M970 540 H1030 V515 H1060"/>
+      </g>
      <g class="circuit-traces">
        <path d="M45 200 H260 V255 H390"/><path d="M110 240 H185 V300 H410"/>
        <path d="M975 180 H1125 V285 H1080"/><path d="M955 375 H1110 V410 H1160"/>
@@ -62,15 +82,15 @@
  </div>

  <nav class="circuit-routes" aria-label="Signal routes">
-    <a class="circuit-node circuit-node-main" data-route-node="projects" href="{{ '/projects'|url }}"><span>Projects</span><i aria-hidden="true">_</i></a>
-    <a class="circuit-node circuit-node-main" data-route-node="articles" href="{{ '/articles'|url }}"><span>Articles</span><i aria-hidden="true">_</i></a>
-    <a class="circuit-node circuit-node-main" data-route-node="blog" href="{{ '/blog'|url }}"><span>Blog</span><i aria-hidden="true">_</i></a>
-    <a class="circuit-node circuit-node-sub" data-route-node="github" href="https://github.com/Labyricorn" rel="me">GitHub</a>
-    <a class="circuit-node circuit-node-sub" data-route-node="gitea" href="https://git.labyricorn.com/">Gitea</a>
-    <a class="circuit-node circuit-node-sub" data-route-node="linkedin" href="https://www.linkedin.com/in/christopher-chambers-694b7a86/">LinkedIn</a>
-    <a class="circuit-node circuit-node-sub" data-route-node="twitch" href="https://www.twitch.tv/labyricorn">Twitch</a>
-    <a class="circuit-node circuit-node-sub" data-route-node="youtube" href="https://www.youtube.com/@labyricorn">YouTube</a>
-    <a class="circuit-node circuit-node-sub" data-route-node="kofi" href="https://ko-fi.com/labyricorn">Ko-fi</a>
+    <a class="circuit-node circuit-node-main" data-route-node="projects" data-route-text="PROJECTS" href="{{ '/projects'|url }}" aria-label="Projects"><span data-route-output>Projects</span><i aria-hidden="true">_</i></a>
+    <a class="circuit-node circuit-node-main" data-route-node="articles" data-route-text="ARTICLES" href="{{ '/articles'|url }}" aria-label="Articles"><span data-route-output>Articles</span><i aria-hidden="true">_</i></a>
+    <a class="circuit-node circuit-node-main" data-route-node="blog" data-route-text="BLOG" href="{{ '/blog'|url }}" aria-label="Blog"><span data-route-output>Blog</span><i aria-hidden="true">_</i></a>
+    <a class="circuit-node circuit-node-sub" data-route-node="github" data-route-text="GITHUB" href="https://github.com/Labyricorn" aria-label="GitHub" rel="me"><span data-route-output>GitHub</span></a>
+    <a class="circuit-node circuit-node-sub" data-route-node="gitea" data-route-text="GITEA" href="https://git.labyricorn.com/" aria-label="Gitea"><span data-route-output>Gitea</span></a>
+    <a class="circuit-node circuit-node-sub" data-route-node="linkedin" data-route-text="LINKEDIN" href="https://www.linkedin.com/in/christopher-chambers-694b7a86/" aria-label="LinkedIn"><span data-route-output>LinkedIn</span></a>
+    <a class="circuit-node circuit-node-sub" data-route-node="twitch" data-route-text="TWITCH" href="https://www.twitch.tv/labyricorn" aria-label="Twitch"><span data-route-output>Twitch</span></a>
+    <a class="circuit-node circuit-node-sub" data-route-node="youtube" data-route-text="YOUTUBE" href="https://www.youtube.com/@labyricorn" aria-label="YouTube"><span data-route-output>YouTube</span></a>
+    <a class="circuit-node circuit-node-sub" data-route-node="kofi" data-route-text="KO-FI" href="https://ko-fi.com/labyricorn" aria-label="Ko-fi"><span data-route-output>Ko-fi</span></a>
  </nav>

  <div class="circuit-legend" aria-hidden="true"><span>◆ live packet</span><span>— Labyricorn bus</span></div>