vizcore 0.1.0

data/frontend/src/shaders/builtins.js

@@ -0,0 +1,244 @@
+const DEFAULT_FRAGMENT_SHADER = `#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_mid;
+uniform float u_high;
+uniform float u_beat;
+uniform float u_bpm;
+out vec4 outColor;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  float pulse = 0.5 + 0.5 * sin(u_time * 1.8 + uv.x * 5.0);
+  vec3 color = vec3(0.08, 0.12, 0.24);
+  color += vec3(u_bass, u_mid, u_high) * 0.25;
+  color += pulse * (0.08 + u_amplitude * 0.25);
+  color += vec3(u_beat * 0.15);
+  outColor = vec4(color, 1.0);
+}
+`;
+
+export const BUILTIN_FRAGMENT_SHADERS = {
+  default: DEFAULT_FRAGMENT_SHADER,
+  gradient_pulse: `#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_mid;
+uniform float u_high;
+uniform float u_beat;
+out vec4 outColor;
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  vec3 baseA = vec3(0.04, 0.08, 0.15);
+  vec3 baseB = vec3(0.20 + u_high * 0.35, 0.16 + u_mid * 0.3, 0.28 + u_bass * 0.25);
+  float sweep = 0.5 + 0.5 * sin(u_time * 2.4 + uv.y * 8.0);
+  float flash = u_beat * 0.35;
+  vec3 color = mix(baseA, baseB, uv.y + sweep * 0.2);
+  color += vec3(flash + u_amplitude * 0.2);
+  outColor = vec4(color, 1.0);
+}
+`,
+  bass_tunnel: `#version 300 es
+precision mediump float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_bass;
+uniform float u_mid;
+uniform float u_high;
+uniform float u_amplitude;
+out vec4 outColor;
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy / u_resolution.xy) * 2.0 - 1.0;
+  uv.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  float r = length(uv);
+  float angle = atan(uv.y, uv.x);
+  float tunnel = sin(angle * 6.0 + u_time * (2.0 + u_bass * 6.0));
+  float rings = smoothstep(0.8, 0.0, abs(r - (0.3 + 0.2 * tunnel)));
+  vec3 color = vec3(0.03, 0.05, 0.08);
+  color += vec3(0.65, 0.45, 0.2) * rings * (0.4 + u_bass * 0.8);
+  color += vec3(0.2, 0.55, 0.9) * (1.0 - r) * (0.2 + u_high * 0.6);
+  color += u_amplitude * 0.08;
+  outColor = vec4(color, 1.0);
+}
+`,
+  neon_grid: `#version 300 es
+precision mediump float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_bass;
+uniform float u_mid;
+uniform float u_high;
+uniform float u_beat;
+out vec4 outColor;
+
+float line(float p, float width) {
+  return smoothstep(width, 0.0, abs(fract(p) - 0.5));
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  float zoom = 8.0 + u_bass * 12.0;
+  float move = u_time * (0.5 + u_mid * 2.0);
+  float gx = line(uv.x * zoom + move, 0.03);
+  float gy = line(uv.y * zoom - move, 0.03);
+  float glow = max(gx, gy);
+  vec3 color = vec3(0.01, 0.02, 0.04);
+  color += vec3(0.1, 0.95, 0.85) * glow * (0.5 + u_high * 0.7);
+  color += vec3(u_beat * 0.2);
+  outColor = vec4(color, 1.0);
+}
+`,
+  kaleidoscope: `#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_mid;
+uniform float u_high;
+out vec4 outColor;
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy / u_resolution.xy) * 2.0 - 1.0;
+  uv.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  float slices = 6.0 + floor(u_mid * 6.0);
+  float angle = atan(uv.y, uv.x);
+  float radius = length(uv);
+  angle = mod(angle, 6.28318530718 / slices);
+  angle = abs(angle - 3.14159265359 / slices);
+  vec2 p = vec2(cos(angle), sin(angle)) * radius;
+  float wave = sin(p.x * 16.0 + u_time * (1.5 + u_high * 5.0));
+  vec3 color = vec3(0.04, 0.02, 0.08);
+  color += vec3(0.8, 0.3, 0.95) * (0.5 + 0.5 * wave) * (0.3 + u_amplitude * 0.7);
+  color += vec3(0.2, 0.6, 0.95) * (1.0 - radius) * (0.2 + u_bass * 0.6);
+  outColor = vec4(color, 1.0);
+}
+`,
+  spectrum_rings: `#version 300 es
+precision mediump float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_bass;
+uniform float u_mid;
+uniform float u_high;
+uniform float u_bpm;
+out vec4 outColor;
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy / u_resolution.xy) * 2.0 - 1.0;
+  uv.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  float r = length(uv);
+  float bpmPhase = u_time * (u_bpm / 60.0);
+  float rings = sin((r * 18.0) - bpmPhase * 6.28318530718);
+  float pulse = smoothstep(0.15, 0.0, abs(rings));
+  vec3 color = vec3(0.02, 0.02, 0.05);
+  color += vec3(0.95, 0.3, 0.22) * pulse * (0.2 + u_bass * 0.9);
+  color += vec3(0.2, 0.55, 0.95) * pulse * (0.2 + u_mid * 0.6);
+  color += vec3(0.8, 0.85, 1.0) * pulse * (0.1 + u_high * 0.4);
+  outColor = vec4(color, 1.0);
+}
+`,
+  audio_bars: `#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_mid;
+uniform float u_high;
+uniform float u_beat;
+uniform float u_param_bar_count;
+uniform float u_param_floor_glow;
+out vec4 outColor;
+
+float hash11(float p) {
+  return fract(sin(p * 127.1) * 43758.5453123);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / max(u_resolution.xy, vec2(1.0));
+  float bars = floor(max(u_param_bar_count, 18.0));
+  float col = uv.x * bars;
+  float id = floor(col);
+  float x = fract(col) - 0.5;
+  float gap = 0.13;
+  float barMask = smoothstep(0.48, 0.48 - 0.02, abs(x)) * (1.0 - smoothstep(0.48 - gap, 0.48 - gap - 0.02, abs(x)));
+
+  float n = hash11(id + 1.7);
+  float region = id / max(bars - 1.0, 1.0);
+  float lowW = 1.0 - smoothstep(0.0, 0.42, region);
+  float highW = smoothstep(0.58, 1.0, region);
+  float midW = max(0.0, 1.0 - lowW - highW);
+  float ripple = 0.5 + 0.5 * sin(u_time * (1.8 + n * 2.4) + id * (0.35 + n * 0.4));
+  float spark = 0.5 + 0.5 * sin(u_time * 7.0 + id * 1.31);
+  float height = 0.05
+    + u_amplitude * (0.14 + n * 0.18)
+    + lowW * u_bass * (0.22 + 0.14 * ripple)
+    + midW * u_mid * (0.20 + 0.12 * ripple)
+    + highW * u_high * (0.18 + 0.16 * ripple)
+    + u_beat * (0.04 + 0.04 * spark);
+  height = clamp(height, 0.03, 0.95);
+
+  float fill = smoothstep(0.0, 0.01, height - uv.y);
+  float topGlow = exp(-abs(uv.y - height) * 180.0) * 0.4;
+  float floorGlow = exp(-uv.y * 20.0) * (0.08 + max(u_param_floor_glow, 0.0));
+
+  vec3 bg = vec3(0.012, 0.018, 0.032);
+  bg += vec3(0.02, 0.03, 0.055) * floorGlow;
+
+  vec3 barA = vec3(0.09, 0.88, 0.95);
+  vec3 barB = vec3(0.92, 0.32, 1.0);
+  vec3 barColor = mix(barA, barB, smoothstep(0.2, 0.95, region));
+  barColor *= 0.65 + 0.75 * (lowW * u_bass + midW * u_mid + highW * u_high + u_amplitude * 0.35);
+  barColor += vec3(0.9, 0.95, 1.0) * topGlow;
+
+  float active = barMask * fill;
+  vec3 color = bg + barColor * active;
+  color += barColor * barMask * topGlow * 0.45;
+
+  outColor = vec4(color, 1.0);
+}
+`,
+  glitch_flash: `#version 300 es
+precision mediump float;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_amplitude;
+uniform float u_beat;
+uniform float u_high;
+uniform float u_param_intensity;
+out vec4 outColor;
+
+float random(vec2 p) {
+  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
+  float intensity = max(u_param_intensity, 0.15 + u_amplitude * 0.8);
+  float line = step(0.92, fract(uv.y * (20.0 + u_high * 90.0) + u_time * 6.0));
+  float noise = random(vec2(floor(uv.y * 140.0), floor(u_time * 8.0)));
+  float flash = min(1.0, u_beat * 1.3 + noise * intensity * 0.35);
+  vec3 color = vec3(0.03, 0.04, 0.08);
+  color += vec3(0.1, 0.9, 0.95) * line * intensity;
+  color += vec3(0.95, 0.2, 0.4) * flash;
+  outColor = vec4(color, 1.0);
+}
+`
+};
+
+export const getBuiltinShader = (name) => {
+  const key = String(name || "").trim();
+  if (!key) {
+    return BUILTIN_FRAGMENT_SHADERS.default;
+  }
+  return BUILTIN_FRAGMENT_SHADERS[key] || BUILTIN_FRAGMENT_SHADERS.default;
+};

data/frontend/src/shaders/post-effects.js

@@ -0,0 +1,85 @@
+export const POST_EFFECT_SHADERS = {
+  bloom: `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_texture;
+uniform vec2 u_resolution;
+uniform float u_time;
+uniform float u_intensity;
+out vec4 outColor;
+
+void main() {
+  vec2 texel = 1.0 / max(u_resolution, vec2(1.0));
+  vec4 base = texture(u_texture, v_uv);
+  vec4 blur = vec4(0.0);
+  blur += texture(u_texture, v_uv + texel * vec2( 1.0,  0.0));
+  blur += texture(u_texture, v_uv + texel * vec2(-1.0,  0.0));
+  blur += texture(u_texture, v_uv + texel * vec2( 0.0,  1.0));
+  blur += texture(u_texture, v_uv + texel * vec2( 0.0, -1.0));
+  blur *= 0.25;
+  float glow = max(0.0, dot(base.rgb, vec3(0.333)) - 0.35);
+  vec3 color = base.rgb + blur.rgb * glow * (0.4 + u_intensity * 1.5);
+  outColor = vec4(color, base.a);
+}
+`,
+  glitch: `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_texture;
+uniform float u_time;
+uniform float u_intensity;
+out vec4 outColor;
+
+float rand(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+void main() {
+  float line = floor(v_uv.y * 120.0 + u_time * 7.0);
+  float jitter = (rand(vec2(line, u_time)) - 0.5) * 0.02 * (0.5 + u_intensity);
+  vec2 uv = vec2(v_uv.x + jitter, v_uv.y);
+  vec4 color = texture(u_texture, uv);
+  color.r = texture(u_texture, uv + vec2(0.003 * u_intensity, 0.0)).r;
+  color.b = texture(u_texture, uv - vec2(0.003 * u_intensity, 0.0)).b;
+  outColor = color;
+}
+`,
+  chromatic: `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_texture;
+uniform float u_intensity;
+out vec4 outColor;
+
+void main() {
+  vec2 shift = vec2(0.004 * (0.3 + u_intensity), 0.0);
+  float r = texture(u_texture, v_uv + shift).r;
+  float g = texture(u_texture, v_uv).g;
+  float b = texture(u_texture, v_uv - shift).b;
+  float a = texture(u_texture, v_uv).a;
+  outColor = vec4(r, g, b, a);
+}
+`,
+  feedback: `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_texture;
+uniform float u_time;
+uniform float u_intensity;
+out vec4 outColor;
+
+void main() {
+  vec2 center = v_uv - vec2(0.5);
+  float zoom = 1.0 + 0.01 * (0.5 + u_intensity);
+  vec2 uv = center / zoom + vec2(0.5);
+  vec4 base = texture(u_texture, uv);
+  float flicker = 0.96 + 0.04 * sin(u_time * 4.0);
+  outColor = vec4(base.rgb * flicker, base.a);
+}
+`
+};
+
+export const getPostEffectShader = (name) => {
+  const key = String(name || "").trim().toLowerCase();
+  return POST_EFFECT_SHADERS[key] || null;
+};

data/frontend/src/visuals/geometry.js

@@ -0,0 +1,66 @@
+const BASE_VERTICES = [
+  [-1.0, -1.0, -1.0],
+  [1.0, -1.0, -1.0],
+  [1.0, 1.0, -1.0],
+  [-1.0, 1.0, -1.0],
+  [-1.0, -1.0, 1.0],
+  [1.0, -1.0, 1.0],
+  [1.0, 1.0, 1.0],
+  [-1.0, 1.0, 1.0]
+];
+
+const EDGES = [
+  [0, 1], [1, 2], [2, 3], [3, 0],
+  [4, 5], [5, 6], [6, 7], [7, 4],
+  [0, 4], [1, 5], [2, 6], [3, 7]
+];
+
+export const buildWireframeLines = ({ rotationY, rotationX, deform }) => {
+  const amount = clamp(Number(deform || 0), 0, 1);
+  const projected = BASE_VERTICES.map((vertex) => {
+    const scaled = [
+      vertex[0] * (1 + amount * 0.35),
+      vertex[1] * (1 + amount * 0.2),
+      vertex[2] * (1 + amount * 0.35)
+    ];
+    return projectVertex(scaled, rotationY, rotationX);
+  });
+
+  const lines = [];
+  for (const [start, end] of EDGES) {
+    lines.push(projected[start][0], projected[start][1]);
+    lines.push(projected[end][0], projected[end][1]);
+  }
+  return lines;
+};
+
+export const estimateDeformFromSpectrum = (value) => {
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return 0;
+    }
+    const sample = value.slice(0, Math.min(24, value.length));
+    const sum = sample.reduce((total, entry) => total + Number(entry || 0), 0);
+    return clamp(sum / sample.length, 0, 1);
+  }
+  return clamp(Number(value || 0), 0, 1);
+};
+
+const projectVertex = (vertex, angleY, angleX) => {
+  const [x, y, z] = vertex;
+
+  const cosY = Math.cos(angleY);
+  const sinY = Math.sin(angleY);
+  const x1 = x * cosY - z * sinY;
+  const z1 = x * sinY + z * cosY;
+
+  const cosX = Math.cos(angleX);
+  const sinX = Math.sin(angleX);
+  const y1 = y * cosX - z1 * sinX;
+  const z2 = y * sinX + z1 * cosX + 4.2;
+
+  const perspectiveScale = 1.6 / z2;
+  return [x1 * perspectiveScale, y1 * perspectiveScale];
+};
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

data/frontend/src/visuals/particle-system.js

@@ -0,0 +1,148 @@
+const PARTICLE_VERTEX_SHADER = `#version 300 es
+in vec2 a_position;
+uniform float u_point_size;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+  gl_PointSize = u_point_size;
+}
+`;
+
+const PARTICLE_FRAGMENT_SHADER = `#version 300 es
+precision mediump float;
+uniform vec3 u_color;
+out vec4 outColor;
+
+void main() {
+  vec2 center = gl_PointCoord - vec2(0.5, 0.5);
+  float distance = length(center);
+  float alpha = smoothstep(0.55, 0.0, distance);
+  outColor = vec4(u_color, alpha);
+}
+`;
+
+export class ParticleSystem {
+  constructor(gl, shaderManager) {
+    this.gl = gl;
+    this.shaderManager = shaderManager;
+    this.program = this.shaderManager.getProgram(
+      "particle-field",
+      PARTICLE_VERTEX_SHADER,
+      PARTICLE_FRAGMENT_SHADER
+    );
+    this.positionLocation = this.gl.getAttribLocation(this.program, "a_position");
+    this.pointSizeLocation = this.gl.getUniformLocation(this.program, "u_point_size");
+    this.colorLocation = this.gl.getUniformLocation(this.program, "u_color");
+    this.buffer = this.gl.createBuffer();
+
+    this.count = 0;
+    this.positions = new Float32Array(0);
+    this.velocities = new Float32Array(0);
+  }
+
+  render({ count, speed, size, audio, time }) {
+    const particleCount = clampInt(count, 200, 20_000);
+    this.ensureParticles(particleCount);
+    this.updateParticles(speed, audio, time);
+    this.draw(size, audio);
+  }
+
+  ensureParticles(nextCount) {
+    if (this.count === nextCount) {
+      return;
+    }
+
+    this.count = nextCount;
+    this.positions = new Float32Array(this.count * 2);
+    this.velocities = new Float32Array(this.count * 2);
+
+    for (let index = 0; index < this.count; index += 1) {
+      const x = pseudoRandom(index * 17.13) * 2 - 1;
+      const y = pseudoRandom(index * 31.91) * 2 - 1;
+      const vx = (pseudoRandom(index * 71.17) * 2 - 1) * 0.004;
+      const vy = (pseudoRandom(index * 91.37) * 2 - 1) * 0.004;
+      this.positions[index * 2] = x;
+      this.positions[index * 2 + 1] = y;
+      this.velocities[index * 2] = vx;
+      this.velocities[index * 2 + 1] = vy;
+    }
+  }
+
+  updateParticles(speed, audio, time) {
+    const motion = 0.4 + clampNumber(speed, 0, 4);
+    const beatBoost = audio?.beat ? 1.4 : 1.0;
+    const drift = 0.0008 + clampNumber(audio?.amplitude, 0, 1) * 0.0018;
+
+    for (let index = 0; index < this.count; index += 1) {
+      const i = index * 2;
+      let x = this.positions[i];
+      let y = this.positions[i + 1];
+      let vx = this.velocities[i];
+      let vy = this.velocities[i + 1];
+
+      const swirl = Math.sin(time * 0.8 + index * 0.013) * drift;
+      vx += swirl * 0.01;
+      vy -= swirl * 0.01;
+
+      x += vx * motion * beatBoost;
+      y += vy * motion * beatBoost;
+
+      if (x > 1 || x < -1) {
+        vx *= -1;
+        x = clampNumber(x, -1, 1);
+      }
+      if (y > 1 || y < -1) {
+        vy *= -1;
+        y = clampNumber(y, -1, 1);
+      }
+
+      this.positions[i] = x;
+      this.positions[i + 1] = y;
+      this.velocities[i] = vx;
+      this.velocities[i + 1] = vy;
+    }
+  }
+
+  draw(size, audio) {
+    const gl = this.gl;
+    const pointSize = 1.5 + clampNumber(size, 0, 32);
+    const amplitude = clampNumber(audio?.amplitude, 0, 1);
+    const bass = clampNumber(audio?.bands?.low, 0, 1);
+    const high = clampNumber(audio?.bands?.high, 0, 1);
+
+    gl.useProgram(this.program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.positions, gl.DYNAMIC_DRAW);
+    gl.enableVertexAttribArray(this.positionLocation);
+    gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, 0, 0);
+
+    gl.uniform1f(this.pointSizeLocation, pointSize);
+    gl.uniform3f(
+      this.colorLocation,
+      0.35 + bass * 0.45,
+      0.55 + high * 0.35,
+      0.95 + amplitude * 0.05
+    );
+    gl.drawArrays(gl.POINTS, 0, this.count);
+  }
+}
+
+const clampInt = (value, min, max) => {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) {
+    return min;
+  }
+  return Math.round(Math.min(Math.max(numeric, min), max));
+};
+
+const clampNumber = (value, min, max) => {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) {
+    return min;
+  }
+  return Math.min(Math.max(numeric, min), max);
+};
+
+const pseudoRandom = (seed) => {
+  const value = Math.sin(seed * 12.9898) * 43758.5453;
+  return value - Math.floor(value);
+};

data/frontend/src/visuals/text-renderer.js

@@ -0,0 +1,143 @@
+const TEXT_VERTEX_SHADER = `#version 300 es
+in vec2 a_position;
+in vec2 a_uv;
+out vec2 v_uv;
+void main() {
+  v_uv = a_uv;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+
+const TEXT_FRAGMENT_SHADER = `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_texture;
+uniform float u_intensity;
+out vec4 outColor;
+
+void main() {
+  vec4 texel = texture(u_texture, v_uv);
+  outColor = vec4(texel.rgb, texel.a * u_intensity);
+}
+`;
+
+const QUAD_VERTICES = new Float32Array([
+  -1.0, -1.0, 0.0, 1.0,
+  1.0, -1.0, 1.0, 1.0,
+  -1.0, 1.0, 0.0, 0.0,
+  1.0, 1.0, 1.0, 0.0
+]);
+
+export class TextRenderer {
+  constructor(gl, shaderManager) {
+    this.gl = gl;
+    this.shaderManager = shaderManager;
+    this.program = this.shaderManager.getProgram("text-renderer", TEXT_VERTEX_SHADER, TEXT_FRAGMENT_SHADER);
+    this.positionLocation = this.gl.getAttribLocation(this.program, "a_position");
+    this.uvLocation = this.gl.getAttribLocation(this.program, "a_uv");
+    this.textureLocation = this.gl.getUniformLocation(this.program, "u_texture");
+    this.intensityLocation = this.gl.getUniformLocation(this.program, "u_intensity");
+
+    this.buffer = this.gl.createBuffer();
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.buffer);
+    this.gl.bufferData(this.gl.ARRAY_BUFFER, QUAD_VERTICES, this.gl.STATIC_DRAW);
+
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = 1024;
+    this.canvas.height = 512;
+    this.ctx = this.canvas.getContext("2d");
+
+    this.texture = this.gl.createTexture();
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+  }
+
+  render({ content, fontSize, audio, time, color, glowStrength }) {
+    const text = String(content || "").trim();
+    if (!text) {
+      return;
+    }
+
+    this.syncCanvasSize();
+
+    const amp = clamp(Number(audio?.amplitude || 0), 0, 1);
+    const beatBoost = audio?.beat ? 1.0 : 0.0;
+    const maxFontSize = Math.max(48, Math.floor(this.canvas.height * 0.22));
+    const dynamicSize = Math.round(
+      clamp(Number(fontSize || 96), 18, maxFontSize) * (1 + amp * 0.08 + beatBoost * 0.04)
+    );
+    this.drawTextToCanvas({
+      text,
+      fontSize: dynamicSize,
+      time,
+      color,
+      amplitude: amp,
+      glowStrength: Number(glowStrength ?? 0.15)
+    });
+    this.uploadTexture();
+    this.drawQuad({ intensity: 0.85 + amp * 0.15 });
+  }
+
+  drawTextToCanvas({ text, fontSize, time, color, amplitude, glowStrength }) {
+    const ctx = this.ctx;
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+    ctx.fillStyle = "rgba(0, 0, 0, 0.0)";
+    ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+    const safeColor = typeof color === "string" && color.trim() ? color : "#e5f3ff";
+    const glow = clamp(Number(glowStrength || 0), 0, 1) * (1.5 + amplitude * 5.0);
+    const xShift = Math.sin(time * 2.0) * (2 + amplitude * 4);
+
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.font = `700 ${fontSize}px "IBM Plex Sans", "Noto Sans JP", sans-serif`;
+    ctx.shadowColor = "rgba(110, 208, 255, 0.35)";
+    ctx.shadowBlur = glow;
+    ctx.fillStyle = safeColor;
+    ctx.fillText(text, this.canvas.width / 2 + xShift, this.canvas.height / 2);
+  }
+
+  syncCanvasSize() {
+    const width = clamp(Math.floor(this.gl.drawingBufferWidth || 1024), 640, 2048);
+    const height = clamp(Math.floor(this.gl.drawingBufferHeight || 512), 360, 2048);
+    if (this.canvas.width === width && this.canvas.height === height) {
+      return;
+    }
+    this.canvas.width = width;
+    this.canvas.height = height;
+  }
+
+  uploadTexture() {
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+    this.gl.texImage2D(
+      this.gl.TEXTURE_2D,
+      0,
+      this.gl.RGBA,
+      this.gl.RGBA,
+      this.gl.UNSIGNED_BYTE,
+      this.canvas
+    );
+  }
+
+  drawQuad({ intensity }) {
+    const gl = this.gl;
+    gl.useProgram(this.program);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.enableVertexAttribArray(this.positionLocation);
+    gl.vertexAttribPointer(this.positionLocation, 2, gl.FLOAT, false, 16, 0);
+    gl.enableVertexAttribArray(this.uvLocation);
+    gl.vertexAttribPointer(this.uvLocation, 2, gl.FLOAT, false, 16, 8);
+
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+    gl.uniform1i(this.textureLocation, 0);
+    gl.uniform1f(this.intensityLocation, clamp(Number(intensity || 1), 0, 1));
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+  }
+}
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);