Interaction Systems Lab

if (!window.MotionPreference) {
  const __mql = window.matchMedia("(prefers-reduced-motion: reduce)");
  const __listeners = new Set();

  const MotionPreference = {
    prefersReducedMotion() {
      return __mql.matches;
    },
    setOverride(value) {
      const reduced = Boolean(value);
      document.documentElement.classList.toggle("reduced-motion", reduced);
      window.dispatchEvent(new CustomEvent("motion-preference", { detail: { reduced } }));
      for (const listener of __listeners) {
        try {
          listener({ reduced, override: reduced, systemReduced: __mql.matches });
        } catch {}
      }
    },
    onChange(listener) {
      __listeners.add(listener);
      try {
        listener({
          reduced: __mql.matches,
          override: null,
          systemReduced: __mql.matches,
        });
      } catch {}
      return () => __listeners.delete(listener);
    },
    getState() {
      return { reduced: __mql.matches, override: null, systemReduced: __mql.matches };
    },
  };

  window.MotionPreference = MotionPreference;
}

function initCursorSystem() {
  return { setEnabled() {}, destroy() {} };
}

function initSpotlightOverlay() {
  return { setEnabled() {}, destroy() {} };
}

function initSectionTransitionOrchestrator() {
  return { destroy() {} };
}

function createTimelineDebugger() {
  return { log() {}, destroy() {} };
}

function initPerformanceMonitor() {
  return {
    onUpdate() {
      return () => {};
    },
    destroy() {},
  };
}

function applyLowPowerClass() {
  return { enabled: false, reasons: [] };
}

function createCleanupRegistry() {
  const callbacks = [];
  return {
    add(fn) {
      if (typeof fn === "function") callbacks.push(fn);
    },
    run() {
      for (const fn of callbacks.splice(0)) {
        try {
          fn();
        } catch {}
      }
    },
  };
}

const motionToggle = document.getElementById("motionToggle");
const soundBtn = document.getElementById("soundBtn");
const audioState = document.getElementById("audioState");
const meterFill = document.getElementById("meterFill");
const perfState = document.getElementById("perfState");

const state = {
  reduced: window.MotionPreference.prefersReducedMotion(),
  sound: null,
  meterRaf: 0
};
const cleanup = createCleanupRegistry();
const lowPower = applyLowPowerClass(document.documentElement);
if (lowPower.enabled) state.reduced = true;

const debuggerPanel = createTimelineDebugger({ enabled: true, title: "Phase 6 Debugger" });
const cursorSystem = initCursorSystem({ enabled: !state.reduced });
const spotlight = initSpotlightOverlay({ enabled: !state.reduced });
const orchestrator = initSectionTransitionOrchestrator({
  selector: "[data-section]",
  onEnter: (section) => {
    debuggerPanel.log(`enter: ${section.querySelector("h1, h2")?.textContent || "section"}`);
  },
  onExit: (section) => {
    debuggerPanel.log(`exit: ${section.querySelector("h1, h2")?.textContent || "section"}`);
  }
});
const perfMonitor = initPerformanceMonitor({ lowPower: lowPower.enabled });
let lastPerfRender = 0;

cleanup.add(() => orchestrator.destroy());
cleanup.add(() => cursorSystem.destroy());
cleanup.add(() => spotlight.destroy());
cleanup.add(() => debuggerPanel.destroy());
cleanup.add(() => perfMonitor.destroy());

cleanup.add(
  perfMonitor.onUpdate((snapshot) => {
    const now = performance.now();
    if (now - lastPerfRender < 220) return;
    lastPerfRender = now;
    perfState.textContent = `FPS ${snapshot.fps.toFixed(1)} | worst ${snapshot.worstFrameMs.toFixed(1)}ms | long tasks ${snapshot.longTasks} | target ${snapshot.budget.targetFps}`;
  })
);

debuggerPanel.log(lowPower.enabled ? `low power detected: ${lowPower.reasons.join(", ")}` : "standard power mode");

function applyMotionMode() {
  document.body.classList.toggle("no-motion", state.reduced);
  motionToggle.textContent = state.reduced ? "Enable motion" : "Disable motion";
  cursorSystem.setEnabled(!state.reduced);
  spotlight.setEnabled(!state.reduced);
  debuggerPanel.log(state.reduced ? "motion disabled" : "motion enabled");
}

function stopMeterLoop() {
  if (state.meterRaf) cancelAnimationFrame(state.meterRaf);
  state.meterRaf = 0;
}

function startMeterLoop() {
  stopMeterLoop();

  const step = () => {
    if (state.sound && state.sound.supported) {
      const level = state.sound.getLevel();
      meterFill.style.width = `${Math.min(100, Math.max(0, level * 100))}%`;
    }
    state.meterRaf = requestAnimationFrame(step);
  };

  state.meterRaf = requestAnimationFrame(step);
}

async function enableSoundHook() {
  if (state.sound && state.sound.supported) return;

  audioState.textContent = "Requesting microphone access...";
  debuggerPanel.log("sound hook requested");
  const soundModule = await Promise.resolve({ initSoundReactiveHooks });
  state.sound = await soundModule.initSoundReactiveHooks();

  if (!state.sound.supported) {
    audioState.textContent = `Audio hook unavailable (${state.sound.reason}).`;
    debuggerPanel.log(`sound hook unavailable: ${state.sound.reason}`);
    return;
  }

  audioState.textContent = "Audio hook active. Meter is now driven by input energy.";
  debuggerPanel.log("sound hook active");
  startMeterLoop();
}

motionToggle.addEventListener("click", () => {
  state.reduced = !state.reduced;
  applyMotionMode();
});

soundBtn.addEventListener("click", enableSoundHook);

window.addEventListener("beforeunload", () => {
  stopMeterLoop();
  if (state.sound && state.sound.destroy) state.sound.destroy();
  cleanup.run();
});

applyMotionMode();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interaction Systems Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="fx-glow" aria-hidden="true"></div>
    <div class="fx-noise" aria-hidden="true"></div>

    <header class="topbar">
      <a href="../">Back to demos</a>
      <div class="controls">
        <button id="motionToggle">Disable motion</button>
        <button id="soundBtn">Enable audio hook</button>
      </div>
    </header>

    <main>
      <section class="panel" data-section>
        <p class="kicker">Phase 6</p>
        <h1>Interaction Systems Lab</h1>
        <p>Reusable cursor, spotlight, noise stack, section orchestration, timeline debugger, and sound-reactive scaffold.</p>
        <p id="perfState">Performance monitor booting...</p>
      </section>

      <section class="panel" data-section>
        <h2>Section Orchestrator</h2>
        <p>Each section reports enter/exit to the debugger panel and updates active state.</p>
        <div class="chips">
          <span>Intersection-based</span>
          <span>Reusable callbacks</span>
          <span>Low overhead</span>
        </div>
      </section>

      <section class="panel" data-section>
        <h2>Sound Hook Preview</h2>
        <p id="audioState">Audio reactive hook is idle. Click "Enable audio hook" to request microphone input.</p>
        <div class="meter"><span id="meterFill"></span></div>
      </section>
    </main>

    <script src="script.js"></script>
  </body>
</html>