RubyGems - vizcore - Versions diffs - 0.1.0 - Mend

vizcore 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

checksums.yaml +7 -0
data/LICENSE.txt +21 -0
data/README.md +170 -0
data/docs/GETTING_STARTED.md +105 -0
data/examples/assets/complex_demo_loop.wav +0 -0
data/examples/basic.rb +9 -0
data/examples/complex_audio_showcase.rb +261 -0
data/examples/custom_shader.rb +21 -0
data/examples/file_audio_demo.rb +74 -0
data/examples/intro_drop.rb +38 -0
data/examples/midi_scene_switch.rb +32 -0
data/examples/shaders/custom_wave.frag +30 -0
data/exe/vizcore +6 -0
data/frontend/index.html +148 -0
data/frontend/src/main.js +304 -0
data/frontend/src/renderer/engine.js +135 -0
data/frontend/src/renderer/layer-manager.js +456 -0
data/frontend/src/renderer/shader-manager.js +69 -0
data/frontend/src/shaders/builtins.js +244 -0
data/frontend/src/shaders/post-effects.js +85 -0
data/frontend/src/visuals/geometry.js +66 -0
data/frontend/src/visuals/particle-system.js +148 -0
data/frontend/src/visuals/text-renderer.js +143 -0
data/frontend/src/visuals/vj-effects.js +56 -0
data/frontend/src/websocket-client.js +131 -0
data/lib/vizcore/analysis/band_splitter.rb +63 -0
data/lib/vizcore/analysis/beat_detector.rb +70 -0
data/lib/vizcore/analysis/bpm_estimator.rb +86 -0
data/lib/vizcore/analysis/fft_processor.rb +224 -0
data/lib/vizcore/analysis/fftw_ffi.rb +50 -0
data/lib/vizcore/analysis/pipeline.rb +72 -0
data/lib/vizcore/analysis/smoother.rb +74 -0
data/lib/vizcore/analysis.rb +14 -0
data/lib/vizcore/audio/base_input.rb +39 -0
data/lib/vizcore/audio/dummy_sine_input.rb +40 -0
data/lib/vizcore/audio/file_input.rb +163 -0
data/lib/vizcore/audio/input_manager.rb +133 -0
data/lib/vizcore/audio/mic_input.rb +121 -0
data/lib/vizcore/audio/midi_input.rb +246 -0
data/lib/vizcore/audio/portaudio_ffi.rb +243 -0
data/lib/vizcore/audio/ring_buffer.rb +92 -0
data/lib/vizcore/audio.rb +16 -0
data/lib/vizcore/cli.rb +115 -0
data/lib/vizcore/config.rb +46 -0
data/lib/vizcore/dsl/engine.rb +229 -0
data/lib/vizcore/dsl/file_watcher.rb +108 -0
data/lib/vizcore/dsl/layer_builder.rb +182 -0
data/lib/vizcore/dsl/mapping_resolver.rb +81 -0
data/lib/vizcore/dsl/midi_map_executor.rb +188 -0
data/lib/vizcore/dsl/scene_builder.rb +44 -0
data/lib/vizcore/dsl/shader_source_resolver.rb +71 -0
data/lib/vizcore/dsl/transition_controller.rb +166 -0
data/lib/vizcore/dsl.rb +16 -0
data/lib/vizcore/errors.rb +27 -0
data/lib/vizcore/renderer/frame_scheduler.rb +75 -0
data/lib/vizcore/renderer/scene_serializer.rb +73 -0
data/lib/vizcore/renderer.rb +10 -0
data/lib/vizcore/server/frame_broadcaster.rb +351 -0
data/lib/vizcore/server/rack_app.rb +183 -0
data/lib/vizcore/server/runner.rb +357 -0
data/lib/vizcore/server/websocket_handler.rb +163 -0
data/lib/vizcore/server.rb +12 -0
data/lib/vizcore/templates/basic_scene.rb +10 -0
data/lib/vizcore/templates/custom_shader_scene.rb +22 -0
data/lib/vizcore/templates/custom_wave.frag +31 -0
data/lib/vizcore/templates/intro_drop_scene.rb +40 -0
data/lib/vizcore/templates/midi_control_scene.rb +33 -0
data/lib/vizcore/templates/project_readme.md +35 -0
data/lib/vizcore/version.rb +6 -0
data/lib/vizcore.rb +37 -0
metadata +186 -0

data/examples/midi_scene_switch.rb ADDED Viewed

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+Vizcore.define do
+  midi :controller, device: :default
+  scene :warmup do
+    layer :grid do
+      shader :neon_grid
+      map frequency_band(:mid) => :intensity
+    end
+  end
+  scene :impact do
+    layer :glitch do
+      shader :glitch_flash
+      map beat? => :flash
+      map amplitude => :effect_intensity
+    end
+  end
+  midi_map note: 36 do
+    switch_scene :impact
+  end
+  midi_map note: 38 do
+    switch_scene :warmup
+  end
+  midi_map cc: 1 do |value|
+    set :global_intensity, value / 127.0
+  end
+end

data/examples/shaders/custom_wave.frag ADDED Viewed

@@ -0,0 +1,30 @@
+#version 300 es
+precision mediump float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_amplitude;
+uniform float u_bass;
+uniform float u_param_intensity;
+uniform float u_param_bass;
+uniform float u_param_flash;
+out vec4 outColor;
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  vec2 centered = uv * 2.0 - 1.0;
+  centered.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  float intensity = max(u_param_intensity, u_amplitude);
+  float bass = max(u_param_bass, u_bass);
+  float wave = sin(centered.x * 9.0 + u_time * (2.4 + bass * 7.0));
+  float lineDistance = abs(centered.y - wave * 0.28);
+  float core = smoothstep(0.045 + intensity * 0.03, 0.0, lineDistance);
+  float halo = smoothstep(0.12 + intensity * 0.06, 0.0, lineDistance);
+  vec3 color = vec3(0.02, 0.03, 0.08);
+  color += vec3(0.22, 0.68, 0.92) * halo * (0.22 + intensity * 0.45);
+  color += vec3(0.50, 0.92, 1.0) * core * (0.55 + intensity * 0.55);
+  color += vec3(0.95, 0.28, 0.44) * u_param_flash * 0.18;
+  outColor = vec4(color, 1.0);
+}

data/exe/vizcore ADDED Viewed

@@ -0,0 +1,6 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+require "vizcore/cli"
+Vizcore::CLI.start(ARGV)

data/frontend/index.html ADDED Viewed

@@ -0,0 +1,148 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vizcore</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg-top: #071223;
+      --bg-bottom: #020308;
+      --fg: #dbecff;
+      --muted: #7a8ca8;
+      --panel-bg: rgba(2, 6, 14, 0.62);
+      --panel-border: rgba(153, 195, 255, 0.2);
+    }
+    * {
+      box-sizing: border-box;
+    }
+    html, body {
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      font-family: "IBM Plex Sans", "Noto Sans JP", sans-serif;
+      background: radial-gradient(circle at 20% 20%, var(--bg-top), var(--bg-bottom));
+      color: var(--fg);
+    }
+    #app {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+    #vizcore-canvas {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+    .hud {
+      position: absolute;
+      left: 1rem;
+      top: 1rem;
+      padding: 0.75rem 1rem;
+      border: 1px solid var(--panel-border);
+      border-radius: 0.75rem;
+      background: var(--panel-bg);
+      backdrop-filter: blur(6px);
+      min-width: 18rem;
+    }
+    .hud h1 {
+      margin: 0 0 0.25rem;
+      font-size: 1rem;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .hud p {
+      margin: 0.1rem 0;
+      font-size: 0.85rem;
+      color: var(--muted);
+    }
+    .hud p.is-accent {
+      color: #c9f7ff;
+    }
+    .hud p.is-beat {
+      color: #9cffc4;
+      text-shadow: 0 0 10px rgba(101, 255, 176, 0.35);
+    }
+    .hud button {
+      margin-top: 0.35rem;
+      width: 100%;
+      border: 1px solid rgba(153, 195, 255, 0.35);
+      border-radius: 0.5rem;
+      padding: 0.45rem 0.6rem;
+      background: rgba(30, 64, 110, 0.55);
+      color: var(--fg);
+      font-size: 0.84rem;
+      cursor: pointer;
+    }
+    .hud button:hover:not([disabled]) {
+      background: rgba(58, 98, 151, 0.65);
+    }
+    .scene-switcher {
+      margin-top: 0.45rem;
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: 0.35rem;
+    }
+    .scene-switcher[hidden] {
+      display: none;
+    }
+    .scene-switcher button {
+      margin-top: 0;
+      width: 100%;
+      padding: 0.35rem 0.45rem;
+      font-size: 0.78rem;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    .scene-switcher button.is-active {
+      border-color: rgba(130, 255, 196, 0.55);
+      background: rgba(20, 104, 73, 0.45);
+      color: #d9ffe8;
+    }
+    .hud button[disabled] {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <canvas id="vizcore-canvas"></canvas>
+    <section class="hud" aria-live="polite">
+      <h1>Vizcore Live</h1>
+      <p id="ws-status">WebSocket: connecting...</p>
+      <p id="scene-status">Scene: unknown</p>
+      <p id="transition-status">Transition: none</p>
+      <p id="frame-status">Amplitude: 0.0000</p>
+      <p id="bpm-status" class="is-accent">BPM: --</p>
+      <p id="beat-status">Beat: off | Count: 0</p>
+      <p id="audio-source-status">Audio Source: unknown</p>
+      <p id="audio-track-status">Track: none</p>
+      <p id="audio-playback-status">Playback: unavailable</p>
+      <div id="scene-switcher" class="scene-switcher" hidden aria-label="Scene switcher"></div>
+      <button id="audio-toggle" type="button" hidden>Play Audio</button>
+    </section>
+  </div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

data/frontend/src/main.js ADDED Viewed

@@ -0,0 +1,304 @@
+import { Engine } from "./renderer/engine.js";
+import { WebSocketClient } from "./websocket-client.js";
+const canvas = document.querySelector("#vizcore-canvas");
+const wsStatusElement = document.querySelector("#ws-status");
+const sceneStatusElement = document.querySelector("#scene-status");
+const transitionStatusElement = document.querySelector("#transition-status");
+const frameStatusElement = document.querySelector("#frame-status");
+const bpmStatusElement = document.querySelector("#bpm-status");
+const beatStatusElement = document.querySelector("#beat-status");
+const audioSourceStatusElement = document.querySelector("#audio-source-status");
+const audioTrackStatusElement = document.querySelector("#audio-track-status");
+const audioPlaybackStatusElement = document.querySelector("#audio-playback-status");
+const sceneSwitcherElement = document.querySelector("#scene-switcher");
+const audioToggleButton = document.querySelector("#audio-toggle");
+const engine = new Engine(canvas);
+engine.init();
+engine.start();
+let currentSceneName = "unknown";
+let audioElement = null;
+let frameCount = 0;
+let lastConnectedAt = null;
+let lastTransportSyncAt = 0;
+let beatFlashUntil = 0;
+let availableSceneNames = [];
+let pendingSceneName = null;
+let pendingSceneRequestedAt = 0;
+const websocketUrl = buildWebSocketUrl();
+const client = new WebSocketClient(websocketUrl, {
+  onFrame: (frame) => {
+    engine.setAudioFrame(frame);
+    frameCount += 1;
+    let sceneName = String(frame?.scene?.name || currentSceneName);
+    const now = performance.now();
+    if (
+      pendingSceneName &&
+      sceneName !== pendingSceneName &&
+      now - pendingSceneRequestedAt < 350
+    ) {
+      sceneName = currentSceneName;
+    }
+    if (pendingSceneName && sceneName === pendingSceneName) {
+      pendingSceneName = null;
+      pendingSceneRequestedAt = 0;
+    }
+    const sceneChanged = sceneName !== currentSceneName;
+    currentSceneName = sceneName;
+    const amplitude = Number(frame?.audio?.amplitude || 0).toFixed(4);
+    const bpm = Number(frame?.audio?.bpm || 0);
+    const beat = !!frame?.audio?.beat;
+    const beatCount = Math.max(0, Number(frame?.audio?.beat_count || 0) || 0);
+    if (beat) {
+      beatFlashUntil = performance.now() + 180;
+    }
+    const beatVisible = performance.now() < beatFlashUntil;
+    sceneStatusElement.textContent = `Scene: ${sceneName}`;
+    if (sceneChanged) {
+      renderSceneButtons();
+    }
+    frameStatusElement.textContent = `Amplitude: ${amplitude} | Frames: ${frameCount}`;
+    bpmStatusElement.textContent = `BPM: ${bpm > 0 ? bpm.toFixed(1) : "--"}`;
+    beatStatusElement.textContent = `Beat: ${beatVisible ? "ON" : "off"} | Count: ${beatCount}`;
+    beatStatusElement.classList.toggle("is-beat", beatVisible);
+  },
+  onSceneChange: (payload) => {
+    const from = String(payload?.from || "unknown");
+    const to = String(payload?.to || "unknown");
+    pendingSceneName = null;
+    pendingSceneRequestedAt = 0;
+    currentSceneName = to;
+    sceneStatusElement.textContent = `Scene: ${to}`;
+    transitionStatusElement.textContent = `Transition: ${from} -> ${to}`;
+    renderSceneButtons();
+  },
+  onConfigUpdate: (payload) => {
+    updateAvailableScenes(payload?.scenes);
+    const sceneName = payload?.scene?.name;
+    if (sceneName) {
+      currentSceneName = String(sceneName);
+      sceneStatusElement.textContent = `Scene: ${currentSceneName}`;
+      renderSceneButtons();
+    }
+  },
+  onStatus: (status) => {
+    if (status === "connected") {
+      lastConnectedAt = new Date();
+      syncAudioTransportToServer({ force: true });
+    } else {
+      pendingSceneName = null;
+      pendingSceneRequestedAt = 0;
+      currentSceneName = "unknown";
+      sceneStatusElement.textContent = "Scene: unknown";
+      renderSceneButtons();
+    }
+    const connectedAt = lastConnectedAt ? ` | Last connected: ${formatClock(lastConnectedAt)}` : "";
+    wsStatusElement.textContent = `WebSocket: ${status}${connectedAt}`;
+  }
+});
+client.connect();
+void initializeRuntime();
+async function initializeRuntime() {
+  const runtime = await fetchRuntime();
+  applyRuntime(runtime);
+}
+async function fetchRuntime() {
+  try {
+    const response = await fetch("/runtime", { cache: "no-store" });
+    if (!response.ok) {
+      return null;
+    }
+    return await response.json();
+  } catch {
+    return null;
+  }
+}
+function applyRuntime(runtime) {
+  const source = String(runtime?.audio_source || "unknown");
+  audioSourceStatusElement.textContent = `Audio Source: ${source}`;
+  updateAvailableScenes(runtime?.scene_names);
+  const fileName = runtime?.audio_file_name;
+  const fileUrl = runtime?.audio_file_url;
+  if (!fileUrl) {
+    engine.setMediaElement(null);
+    audioTrackStatusElement.textContent = "Track: none";
+    audioPlaybackStatusElement.textContent = "Playback: unavailable";
+    audioToggleButton.hidden = true;
+    return;
+  }
+  audioTrackStatusElement.textContent = `Track: ${String(fileName || "source file")}`;
+  setupAudioPlayback(fileUrl);
+}
+function updateAvailableScenes(sceneValues) {
+  const names = normalizeSceneNames(sceneValues);
+  if (!names.length) {
+    return;
+  }
+  availableSceneNames = names;
+  renderSceneButtons();
+}
+function normalizeSceneNames(sceneValues) {
+  const seen = new Set();
+  const names = [];
+  const entries = Array.isArray(sceneValues) ? sceneValues : [];
+  for (const entry of entries) {
+    const rawName = typeof entry === "string" ? entry : entry?.name;
+    const name = String(rawName || "").trim();
+    if (!name || seen.has(name)) {
+      continue;
+    }
+    seen.add(name);
+    names.push(name);
+  }
+  return names;
+}
+function renderSceneButtons() {
+  if (!sceneSwitcherElement) {
+    return;
+  }
+  if (!availableSceneNames.length) {
+    sceneSwitcherElement.hidden = true;
+    sceneSwitcherElement.replaceChildren();
+    return;
+  }
+  sceneSwitcherElement.hidden = false;
+  const buttons = availableSceneNames.map((sceneName) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = sceneName;
+    button.classList.toggle("is-active", sceneName === currentSceneName);
+    button.onclick = () => {
+      if (sceneName === currentSceneName) {
+        return;
+      }
+      pendingSceneName = sceneName;
+      pendingSceneRequestedAt = performance.now();
+      currentSceneName = sceneName;
+      sceneStatusElement.textContent = `Scene: ${sceneName}`;
+      renderSceneButtons();
+      client.send("switch_scene", { scene: sceneName });
+    };
+    return button;
+  });
+  sceneSwitcherElement.replaceChildren(...buttons);
+}
+function setupAudioPlayback(audioUrl) {
+  if (audioElement) {
+    audioElement.pause();
+  }
+  audioElement = new Audio(audioUrl);
+  audioElement.preload = "auto";
+  audioElement.loop = true;
+  engine.setMediaElement(audioElement);
+  audioToggleButton.hidden = false;
+  audioToggleButton.disabled = false;
+  const updatePlaybackState = () => {
+    if (!audioElement) {
+      return;
+    }
+    const state = audioElement.paused ? "paused" : "playing";
+    const current = formatSeconds(audioElement.currentTime);
+    const duration = Number.isFinite(audioElement.duration) ? formatSeconds(audioElement.duration) : "--:--";
+    audioPlaybackStatusElement.textContent = `Playback: ${state} ${current} / ${duration}`;
+    audioToggleButton.textContent = audioElement.paused ? "Play Audio" : "Pause Audio";
+  };
+  const playAudio = async () => {
+    if (!audioElement) {
+      return;
+    }
+    try {
+      await audioElement.play();
+      updatePlaybackState();
+    } catch (error) {
+      const message = String(error?.message || "autoplay blocked");
+      audioPlaybackStatusElement.textContent = `Playback: blocked (${message})`;
+      audioToggleButton.textContent = "Play Audio";
+    }
+  };
+  audioElement.addEventListener("play", updatePlaybackState);
+  audioElement.addEventListener("pause", updatePlaybackState);
+  audioElement.addEventListener("timeupdate", updatePlaybackState);
+  audioElement.addEventListener("loadedmetadata", updatePlaybackState);
+  audioElement.addEventListener("play", () => syncAudioTransportToServer({ force: true }));
+  audioElement.addEventListener("pause", () => syncAudioTransportToServer({ force: true }));
+  audioElement.addEventListener("seeking", () => syncAudioTransportToServer({ force: true }));
+  audioElement.addEventListener("seeked", () => syncAudioTransportToServer({ force: true }));
+  audioElement.addEventListener("loadedmetadata", () => syncAudioTransportToServer({ force: true }));
+  audioElement.addEventListener("timeupdate", () => syncAudioTransportToServer());
+  audioToggleButton.onclick = async () => {
+    if (!audioElement) {
+      return;
+    }
+    if (audioElement.paused) {
+      await playAudio();
+      return;
+    }
+    audioElement.pause();
+    updatePlaybackState();
+  };
+  updatePlaybackState();
+  syncAudioTransportToServer({ force: true });
+  void playAudio();
+}
+function formatSeconds(value) {
+  const seconds = Math.max(0, Math.floor(Number(value) || 0));
+  const minutes = Math.floor(seconds / 60);
+  const remain = seconds % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(remain).padStart(2, "0")}`;
+}
+function formatClock(date) {
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
+  return `${hours}:${minutes}:${seconds}`;
+}
+function syncAudioTransportToServer({ force = false } = {}) {
+  if (!audioElement) {
+    return;
+  }
+  const now = performance.now();
+  if (!force && now - lastTransportSyncAt < 80) {
+    return;
+  }
+  const sent = client.send("transport_sync", {
+    playing: !audioElement.paused,
+    position_seconds: Number(audioElement.currentTime || 0)
+  });
+  if (sent) {
+    lastTransportSyncAt = now;
+  }
+}
+function buildWebSocketUrl() {
+  const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+  return `${protocol}://${window.location.host}/ws`;
+}

data/frontend/src/renderer/engine.js ADDED Viewed

@@ -0,0 +1,135 @@
+import { LayerManager } from "./layer-manager.js";
+import { ShaderManager } from "./shader-manager.js";
+export class Engine {
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.gl = null;
+    this.shaderManager = null;
+    this.layerManager = null;
+    this.lastTime = performance.now();
+    this.rotation = 0;
+    this.currentRotationSpeed = 0.5;
+    this.mediaElement = null;
+    this.lastMediaTime = null;
+    this.frame = {
+      audio: {
+        amplitude: 0,
+        bands: { sub: 0, low: 0, mid: 0, high: 0 },
+        fft: [],
+        beat: false,
+        beat_count: 0,
+        bpm: 0
+      },
+      scene: {
+        name: "basic",
+        layers: []
+      }
+    };
+  }
+  init() {
+    this.gl = this.canvas.getContext("webgl2");
+    if (!this.gl) {
+      throw new Error("WebGL2 is not supported in this browser");
+    }
+    this.shaderManager = new ShaderManager(this.gl);
+    this.layerManager = new LayerManager(this.gl, this.shaderManager);
+    this.gl.enable(this.gl.DEPTH_TEST);
+    this.gl.enable(this.gl.BLEND);
+    this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
+    this.resize();
+    window.addEventListener("resize", () => this.resize());
+  }
+  setAudioFrame(frame) {
+    if (!frame || typeof frame !== "object") {
+      return;
+    }
+    this.frame = frame;
+  }
+  setMediaElement(mediaElement) {
+    this.mediaElement = mediaElement || null;
+    this.lastMediaTime = null;
+  }
+  start() {
+    this.lastTime = performance.now();
+    requestAnimationFrame((time) => this.render(time));
+  }
+  resize() {
+    const width = Math.floor(this.canvas.clientWidth * window.devicePixelRatio);
+    const height = Math.floor(this.canvas.clientHeight * window.devicePixelRatio);
+    if (this.canvas.width === width && this.canvas.height === height) {
+      return;
+    }
+    this.canvas.width = width;
+    this.canvas.height = height;
+    this.gl.viewport(0, 0, width, height);
+  }
+  render(time) {
+    let deltaSeconds = (time - this.lastTime) / 1000;
+    this.lastTime = time;
+    let visualTimeSeconds = time / 1000;
+    if (this.mediaElement) {
+      const currentMediaTime = Number(this.mediaElement.currentTime || 0);
+      visualTimeSeconds = currentMediaTime;
+      if (this.mediaElement.paused) {
+        deltaSeconds = 0;
+      } else if (this.lastMediaTime === null) {
+        deltaSeconds = 0;
+      } else {
+        deltaSeconds = Math.max(0, currentMediaTime - this.lastMediaTime);
+      }
+      this.lastMediaTime = currentMediaTime;
+    } else {
+      this.lastMediaTime = null;
+    }
+    const audio = this.frame?.audio || {};
+    const layers = Array.isArray(this.frame?.scene?.layers) ? this.frame.scene.layers : [];
+    const amplitude = clamp(Number(audio.amplitude || 0), 0, 1);
+    const rotationSpeed = resolveRotationSpeed(layers, amplitude);
+    this.currentRotationSpeed += (rotationSpeed - this.currentRotationSpeed) * 0.1;
+    this.rotation += deltaSeconds * this.currentRotationSpeed;
+    this.gl.clearColor(
+      0.02 + amplitude * 0.05,
+      0.03 + clamp(Number(audio?.bands?.high || 0), 0, 1) * 0.08,
+      0.08 + amplitude * 0.06,
+      1.0
+    );
+    this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
+    this.layerManager.renderScene({
+      layers,
+      audio,
+      time: visualTimeSeconds,
+      rotation: this.rotation,
+      resolution: [this.canvas.width, this.canvas.height]
+    });
+    requestAnimationFrame((nextTime) => this.render(nextTime));
+  }
+}
+const resolveRotationSpeed = (layers, amplitude) => {
+  const layerWithSpeed = Array.isArray(layers)
+    ? layers.find((layer) => Number.isFinite(Number(layer?.params?.rotation_speed)))
+    : null;
+  const fromLayer = Number(layerWithSpeed?.params?.rotation_speed);
+  if (Number.isFinite(fromLayer)) {
+    return clamp(fromLayer, 0.1, 8.0);
+  }
+  return 0.7 + amplitude * 2.4;
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);