Add listing page circuit heroes

2026-08-23 08:56:42 -07:00
parent b12030aeb0
commit 435322be15
5 changed files with 659 additions and 1 deletions
@@ -0,0 +1,53 @@
+(() => {
+  const heroes = document.querySelectorAll("[data-section-hero]");
+  if (!heroes.length) return;
+
+  const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  if (reducedMotion) return;
+
+  heroes.forEach((hero) => {
+    const config = hero.classList.contains("section-hero--projects")
+      ? { pathPad: 22, duration: 2800, durationRange: 2200, delay: 250, delayRange: 1100, start: 250, stagger: 500, edgeOpacity: 0.18, liveOpacity: 0.8, glitch: 9000 }
+      : hero.classList.contains("section-hero--articles")
+        ? { pathPad: 20, duration: 2600, durationRange: 2200, delay: 300, delayRange: 1000, start: 250, stagger: 550, edgeOpacity: 0.15, liveOpacity: 0.78, glitch: 9800 }
+        : { pathPad: 20, duration: 2400, durationRange: 2300, delay: 250, delayRange: 900, start: 200, stagger: 520, edgeOpacity: 0.14, liveOpacity: 0.8, glitch: 7600 };
+
+    hero.querySelectorAll(".section-hero__packet").forEach((packet, index) => {
+      if (typeof packet.animate !== "function") return;
+
+      const length = packet.getTotalLength();
+
+      const animate = () => {
+        const reverse = Math.random() > 0.5;
+        const from = reverse ? -(length + config.pathPad) : config.pathPad;
+        const to = reverse ? config.pathPad : -(length + config.pathPad);
+        const duration = config.duration + Math.random() * config.durationRange;
+        const animation = packet.animate(
+          [
+            { strokeDashoffset: String(from), opacity: config.edgeOpacity },
+            { offset: 0.15, opacity: config.liveOpacity },
+            { offset: 0.85, opacity: config.liveOpacity },
+            { strokeDashoffset: String(to), opacity: hero.classList.contains("section-hero--projects") ? 0.15 : 0.12 },
+          ],
+          { duration, easing: "linear" },
+        );
+
+        if (animation.finished) {
+          animation.finished
+            .then(() => window.setTimeout(animate, config.delay + Math.random() * config.delayRange))
+            .catch(() => {});
+        } else {
+          window.setTimeout(animate, duration + config.delay + Math.random() * config.delayRange);
+        }
+      };
+
+      window.setTimeout(animate, config.start + index * config.stagger);
+    });
+
+    window.setInterval(() => {
+      hero.classList.remove("is-glitching");
+      void hero.offsetWidth;
+      hero.classList.add("is-glitching");
+    }, config.glitch);
+  });
+})();