iftrace: wire homepage script

ifttt/app.js

@@ -1,4 +1,8 @@
 (() => {
+  const howStepEl = document.getElementById("howStep");
+  const howDetailEl = document.getElementById("howDetail");
+  if (howStepEl && howDetailEl) startHowItWorks(howStepEl, howDetailEl);
+
   const typewordEl = document.getElementById("typeword");
   const stepperEl = document.getElementById("stepper");
   const revealStepper = createStepperRevealer(stepperEl);
@@ -12,6 +16,77 @@
   if (quoteTextEl && quoteMetaEl && quoteWrapEl) startQuoteTicker({ quoteWrapEl, quoteTextEl, quoteMetaEl });
 })();
 
+function startHowItWorks(stepEl, detailEl) {
+  const prefersReducedMotion =
+    typeof window !== "undefined" &&
+    window.matchMedia &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  const steps = [
+    {
+      step: "1) You write the confidential document.",
+      detail: "Keep the source private. Don’t publish it to “prove” it exists.",
+    },
+    {
+      step: "2) Your system produces an output.",
+      detail: "A summary, decision, report, message, or answer.",
+    },
+    {
+      step: "3) IF.Trace binds source → output.",
+      detail: "Hashes + trace id + proof links (so evidence can be checked later).",
+    },
+    {
+      step: "4) You share proof, not your raw data.",
+      detail: "Third parties verify without needing your accounts or logins.",
+    },
+    {
+      step: "5) If there’s no trace, it’s not trustworthy.",
+      detail: "A simple rule that survives vendors, contractors, and audits.",
+    },
+  ];
+
+  const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  const typeInto = async (el, text, opts = {}) => {
+    const minDelayMs = opts.minDelayMs ?? 12;
+    const maxDelayMs = opts.maxDelayMs ?? 26;
+
+    el.textContent = "";
+    for (let idx = 0; idx < text.length; idx += 1) {
+      el.textContent += text[idx];
+      const jitter = Math.floor(Math.random() * (maxDelayMs - minDelayMs + 1));
+      await sleep(minDelayMs + jitter);
+    }
+  };
+
+  const run = async () => {
+    if (prefersReducedMotion) {
+      const first = steps[0];
+      stepEl.textContent = first.step;
+      detailEl.textContent = first.detail;
+      return;
+    }
+
+    let idx = 0;
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      const current = steps[idx % steps.length];
+      await typeInto(stepEl, current.step);
+      await sleep(120);
+      await typeInto(detailEl, current.detail, { minDelayMs: 8, maxDelayMs: 18 });
+      await sleep(2200);
+
+      stepEl.textContent = "";
+      detailEl.textContent = "";
+      await sleep(240);
+
+      idx += 1;
+    }
+  };
+
+  void run();
+}
+
 function createStepperRevealer(stepperEl) {
   let shown = false;
   return () => {

ifttt/home.js

@@ -1,75 +0,0 @@
-(() => {
-  const prefersReducedMotion =
-    typeof window !== "undefined" &&
-    window.matchMedia &&
-    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-
-  const stepEl = document.getElementById("howStep");
-  const detailEl = document.getElementById("howDetail");
-  if (!stepEl || !detailEl) return;
-
-  const steps = [
-    {
-      step: "1) You write the confidential document.",
-      detail: "Keep the source private. Don’t publish it to “prove” it exists.",
-    },
-    {
-      step: "2) Your system produces an output.",
-      detail: "A summary, decision, report, message, or answer.",
-    },
-    {
-      step: "3) IF.Trace binds source → output.",
-      detail: "Hashes + trace id + proof links (so evidence can be checked later).",
-    },
-    {
-      step: "4) You share proof, not your raw data.",
-      detail: "Third parties verify without needing your accounts or logins.",
-    },
-    {
-      step: "5) If there’s no trace, it’s not trustworthy.",
-      detail: "A simple rule that survives vendors, contractors, and audits.",
-    },
-  ];
-
-  const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-
-  async function typeInto(el, text, opts = {}) {
-    const minDelayMs = opts.minDelayMs ?? 12;
-    const maxDelayMs = opts.maxDelayMs ?? 26;
-
-    el.textContent = "";
-    for (let idx = 0; idx < text.length; idx += 1) {
-      el.textContent += text[idx];
-      const jitter = Math.floor(Math.random() * (maxDelayMs - minDelayMs + 1));
-      await sleep(minDelayMs + jitter);
-    }
-  }
-
-  async function run() {
-    if (prefersReducedMotion) {
-      const first = steps[0];
-      stepEl.textContent = first.step;
-      detailEl.textContent = first.detail;
-      return;
-    }
-
-    let idx = 0;
-    // eslint-disable-next-line no-constant-condition
-    while (true) {
-      const current = steps[idx % steps.length];
-      await typeInto(stepEl, current.step);
-      await sleep(120);
-      await typeInto(detailEl, current.detail, { minDelayMs: 8, maxDelayMs: 18 });
-      await sleep(2200);
-
-      stepEl.textContent = "";
-      detailEl.textContent = "";
-      await sleep(240);
-
-      idx += 1;
-    }
-  }
-
-  void run();
-})();
-

ifttt/index.html

@@ -64,6 +64,6 @@
 
     <a class="sigContact" href="mailto:ds@infrafabric.io?subject=IF.Trace%20contact">contact</a>
 
-    <script src="./home.js" defer></script>
+    <script src="./app.js" defer></script>
   </body>
 </html>