Interaction Systems Lab

:root {
  --bg: #080f1a;
  --text: #eef4ff;
  --muted: #c2d0e7;
  --line: #2a3f5d;
  --accent: #86e8ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--text);
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  background: var(--bg);
}

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: rgba(8, 15, 26, 0.68);
  backdrop-filter: blur(8px);
}

.topbar a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
}

.controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

button {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

main {
  width: min(980px, 92%);
  margin: 0 auto;
  padding-top: 3.5rem;
}

.panel {
  min-height: 86vh;
  border-bottom: 1px solid var(--line);
  display: grid;
  align-content: center;
  gap: 0.65rem;
  opacity: 0.62;
  transform: translateY(18px);
  transition: opacity 260ms ease, transform 260ms ease;
}

.panel[data-active="true"] {
  opacity: 1;
  transform: translateY(0);
}

.kicker {
  margin: 0;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

h1,
h2,
p {
  margin: 0;
}
h1 {
  font-size: clamp(2rem, 7vw, 4rem);
}
h2 {
  font-size: clamp(1.5rem, 4.8vw, 2.8rem);
}
p {
  color: var(--muted);
  max-width: 64ch;
}

#perfState {
  color: #b1f0cc;
  font-weight: 700;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.chips span {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  font-size: 0.82rem;
}

.meter {
  margin-top: 0.3rem;
  width: min(540px, 92%);
  height: 12px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #76e2ff, #8f89ff);
}

body.no-motion .panel {
  opacity: 1;
  transform: none;
  transition: none;
}

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>