vizcore 0.1.0 → 1.0.0

data/frontend/src/shader-error-overlay.js

@@ -0,0 +1,29 @@
+export const SHADER_ERROR_EVENT = "vizcore:shader-error";
+
+export const buildShaderErrorDetail = ({ layer, error, phase }) => {
+  const name = String(layer?.name || "unnamed");
+  const shader = String(layer?.glsl || layer?.shader || layer?.type || "unknown");
+  return {
+    name,
+    shader,
+    phase: String(phase || "shader"),
+    message: normalizeErrorMessage(error),
+  };
+};
+
+export const formatShaderErrorTitle = (detail) => {
+  const name = String(detail?.name || "unnamed");
+  const shader = String(detail?.shader || "unknown");
+  return `${name} (${shader})`;
+};
+
+export const formatShaderErrorMessage = (detail) => {
+  const phase = String(detail?.phase || "shader");
+  const message = String(detail?.message || "Unknown shader error");
+  return `[${phase}] ${message}`;
+};
+
+const normalizeErrorMessage = (error) => {
+  const message = String(error?.message || error || "Unknown shader error").trim();
+  return message || "Unknown shader error";
+};

data/frontend/src/shader-param-controls.js

@@ -0,0 +1,93 @@
+export const shaderParamLayerKey = (layer, index) => `${index}:${String(layer?.name || "layer")}`;
+
+export const shaderParamControlEntries = (layers, overrides = {}) => {
+  const entries = [];
+  const layerList = Array.isArray(layers) ? layers : [];
+
+  layerList.forEach((layer, layerIndex) => {
+    const schema = Array.isArray(layer?.param_schema) ? layer.param_schema : [];
+    const layerKey = shaderParamLayerKey(layer, layerIndex);
+    const layerName = String(layer?.name || `layer_${layerIndex + 1}`);
+
+    schema.forEach((entry) => {
+      const paramName = normalizeParamName(entry?.name);
+      if (!paramName) {
+        return;
+      }
+
+      const min = finiteNumber(entry?.min, 0);
+      const max = Math.max(min, finiteNumber(entry?.max, min + 1));
+      const step = positiveNumber(entry?.step, Math.max((max - min) / 100, 0.01));
+      const params = layer?.params || {};
+      const baseValue = finiteNumber(
+        overrides?.[layerKey]?.[paramName],
+        finiteNumber(params[paramName], finiteNumber(entry?.default, min))
+      );
+
+      entries.push({
+        key: `${layerKey}:${paramName}`,
+        layerKey,
+        layerName,
+        paramName,
+        label: `${layerName}.${paramName}`,
+        min,
+        max,
+        step,
+        value: clamp(baseValue, min, max),
+      });
+    });
+  });
+
+  return entries;
+};
+
+export const applyShaderParamOverrides = (layers, overrides = {}) => {
+  const layerList = Array.isArray(layers) ? layers : [];
+
+  return layerList.map((layer, layerIndex) => {
+    const layerKey = shaderParamLayerKey(layer, layerIndex);
+    const layerOverrides = overrides?.[layerKey];
+    if (!layerOverrides || typeof layerOverrides !== "object") {
+      return layer;
+    }
+
+    return {
+      ...layer,
+      params: {
+        ...(layer?.params || {}),
+        ...layerOverrides,
+      },
+    };
+  });
+};
+
+export const pruneShaderParamOverrides = (overrides = {}, entries = []) => {
+  const next = {};
+  for (const entry of entries) {
+    const value = overrides?.[entry.layerKey]?.[entry.paramName];
+    if (!Number.isFinite(Number(value))) {
+      continue;
+    }
+
+    next[entry.layerKey] ||= {};
+    next[entry.layerKey][entry.paramName] = Number(value);
+  }
+  return next;
+};
+
+const normalizeParamName = (value) => {
+  const name = String(value || "").trim();
+  return name || null;
+};
+
+const finiteNumber = (value, fallback) => {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : fallback;
+};
+
+const positiveNumber = (value, fallback) => {
+  const numeric = finiteNumber(value, fallback);
+  return numeric > 0 ? numeric : fallback;
+};
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);

data/frontend/src/shaders/builtins.js

@@ -145,6 +145,72 @@ void main() {
   color += vec3(0.8, 0.85, 1.0) * pulse * (0.1 + u_high * 0.4);
   outColor = vec4(color, 1.0);
 }
+`,
+  liquid_wobble: `#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_beat_pulse;
+uniform float u_bpm;
+uniform float u_fft[32];
+uniform float u_fft_size;
+uniform float u_param_wobble;
+uniform float u_param_warp;
+uniform float u_param_distortion;
+uniform float u_visual_gain;
+uniform float u_wobble_amount;
+
+out vec4 outColor;
+
+float blob(vec2 p, float r) {
+  return smoothstep(r, r - 0.035, length(p));
+}
+
+float fftSample(float t) {
+  float index = clamp(floor(t * 31.0), 0.0, 31.0);
+  int i = int(index);
+  return u_fft[i];
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / max(u_resolution.xy, vec2(1.0));
+  vec2 p = uv * 2.0 - 1.0;
+  p.x *= u_resolution.x / max(u_resolution.y, 1.0);
+
+  float visualGain = max(u_visual_gain, 1.0);
+  float globalWobble = max(u_wobble_amount, 1.0);
+  float amp = clamp(u_amplitude * visualGain * 2.4, 0.0, 2.0);
+  float bass = clamp(u_bass * 2.2, 0.0, 2.0);
+  float pulse = max(u_beat_pulse, u_beat);
+
+  float angle = atan(p.y, p.x) / 6.28318530718 + 0.5;
+  float spectrum = fftSample(angle);
+
+  float wobble = (0.10 + u_param_wobble + amp * 0.25 + bass * 0.18 + spectrum * 0.18) * globalWobble;
+  float warp = 1.0 + u_param_warp + u_mid * 2.4;
+  float distortion = 0.7 + u_param_distortion + u_high * 2.0;
+
+  p.x += sin(p.y * 5.0 * warp + u_time * (1.1 + u_high * 5.0) + spectrum * 2.5) * wobble;
+  p.y += cos(p.x * 4.0 * warp - u_time * (0.9 + u_bass * 4.0) + spectrum * 3.0) * wobble;
+
+  float r = 0.42 + bass * 0.16 + pulse * 0.12 + spectrum * 0.08;
+  float shape = blob(p, r);
+  float rings = sin(length(p) * (16.0 + distortion * 5.0) - u_time * (2.0 + u_high * 8.0));
+  float glow = smoothstep(0.25, 1.0, shape + rings * 0.12);
+
+  vec3 color = vec3(0.012, 0.018, 0.035);
+  color += vec3(0.12, 0.72, 1.0) * glow * (0.45 + amp);
+  color += vec3(0.95, 0.24, 0.82) * shape * (0.20 + bass);
+  color += vec3(1.0, 0.95, 0.8) * pulse * 0.16;
+
+  outColor = vec4(color, 1.0);
+}
 `,
   audio_bars: `#version 300 es
 precision mediump float;
@@ -200,12 +266,324 @@ void main() {
   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;
+  float barFill = barMask * fill;
+  vec3 color = bg + barColor * barFill;
   color += barColor * barMask * topGlow * 0.45;
 
   outColor = vec4(color, 1.0);
 }
+`,
+  ruby_crystal: `#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_beat_pulse;
+uniform float u_bpm;
+uniform float u_param_facets;
+uniform float u_param_refraction;
+uniform float u_global_intensity;
+uniform float u_global_color;
+out vec4 outColor;
+
+const float PI = 3.14159265359;
+const float TAU = 6.28318530718;
+
+float sdDiamond(vec2 p) {
+  p = abs(p);
+  return p.x * 0.78 + p.y - 0.72;
+}
+
+float line(float value, float width) {
+  return 1.0 - smoothstep(0.0, width, abs(value));
+}
+
+vec3 rubyPalette(float t) {
+  vec3 deep = vec3(0.12, 0.00, 0.035);
+  vec3 red = vec3(0.92, 0.05, 0.18);
+  vec3 pink = vec3(1.00, 0.28, 0.52);
+  vec3 white = vec3(1.00, 0.86, 0.75);
+  vec3 hot = mix(red, pink, smoothstep(0.18, 0.78, t));
+  return mix(deep, mix(hot, white, smoothstep(0.72, 1.0, t)), smoothstep(0.0, 1.0, t));
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / max(u_resolution.xy, vec2(1.0));
+  vec2 p = uv * 2.0 - 1.0;
+  p.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  float globalIntensity = 1.0 + clamp(u_global_intensity, 0.0, 1.0) * 0.5;
+  float globalColor = clamp(u_global_color, 0.0, 1.0);
+
+  float facets = clamp(max(u_param_facets, 6.0), 4.0, 12.0);
+  float refraction = max(u_param_refraction, 0.35);
+  float tempo = max(u_bpm, 120.0) / 60.0;
+  float pulse = max(u_beat, u_beat_pulse);
+  float angle = atan(p.y, p.x);
+  float radius = length(p);
+  float spin = angle + u_time * (0.08 + tempo * 0.012) + u_mid * 0.55;
+  vec2 warped = p;
+  warped += vec2(cos(spin * facets), sin(spin * (facets - 1.0))) * (0.025 + u_bass * 0.055);
+
+  float body = 1.0 - smoothstep(-0.04, 0.05, sdDiamond(warped * (0.95 - pulse * 0.08)));
+  float edge = line(sdDiamond(warped), 0.035 + pulse * 0.02);
+  float facetLines = line(sin(spin * facets + radius * (8.0 + u_high * 8.0)), 0.06);
+  float crossCut = line(warped.x + warped.y * 0.42, 0.018) + line(warped.x - warped.y * 0.42, 0.018);
+  float sparkle = pow(max(0.0, sin(spin * 3.0 + radius * 18.0 - u_time * (1.4 + u_high * 5.0))), 18.0);
+  float light = clamp(body * (0.22 + facetLines * 0.34 + crossCut * 0.18) + edge * 0.9 + sparkle * (0.4 + u_high), 0.0, 1.5);
+  float glow = exp(-abs(sdDiamond(warped)) * 8.0) * (0.18 + u_bass * 0.35 + pulse * 0.45);
+
+  vec3 bg = vec3(0.018, 0.006, 0.018) + vec3(0.05, 0.00, 0.045) * (1.0 - smoothstep(0.0, 1.35, radius));
+  vec3 accent = mix(vec3(1.0, 0.18, 0.32), vec3(0.12, 0.72, 1.0), globalColor);
+  vec3 color = bg;
+  color += rubyPalette(light + refraction * u_amplitude * 0.28) * body * globalIntensity;
+  color += accent * glow * globalIntensity;
+  color += mix(vec3(1.0, 0.82, 0.70), accent, 0.35) * sparkle * (0.4 + u_high) * globalIntensity;
+  outColor = vec4(color, 1.0);
+}
+`,
+  starfield: `#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_global_intensity;
+uniform float u_global_color;
+out vec4 outColor;
+
+float hash11(float p) {
+  return fract(sin(p * 127.1) * 43758.5453123);
+}
+
+float star(vec2 p, float size) {
+  float d = length(p);
+  float core = 1.0 - smoothstep(0.0, size, d);
+  float rays = 1.0 - smoothstep(0.0, size * 3.0, abs(p.x) * abs(p.y));
+  return core + rays * 0.08;
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / max(u_resolution.xy, vec2(1.0));
+  vec2 p = uv * 2.0 - 1.0;
+  p.x *= u_resolution.x / max(u_resolution.y, 1.0);
+  float globalIntensity = 1.0 + clamp(u_global_intensity, 0.0, 1.0) * 0.5;
+  float globalColor = clamp(u_global_color, 0.0, 1.0);
+  vec3 accentA = mix(vec3(0.20, 0.72, 1.0), vec3(1.0, 0.26, 0.58), globalColor);
+  vec3 accentB = mix(vec3(1.0, 0.26, 0.58), vec3(1.0, 0.78, 0.24), globalColor);
+  vec3 color = vec3(0.004, 0.008, 0.018);
+  color += vec3(0.015, 0.02, 0.05) * (1.0 - smoothstep(0.0, 1.4, length(p)));
+
+  float speed = 0.10 + u_bass * 0.65 + u_amplitude * 0.25;
+  for (int i = 0; i < 56; i++) {
+    float fi = float(i);
+    vec2 seed = vec2(hash11(fi + 11.0), hash11(fi + 37.0)) * 2.0 - 1.0;
+    float depth = fract(hash11(fi + 73.0) - u_time * speed * (0.35 + hash11(fi + 5.0)));
+    vec2 pos = seed / max(depth, 0.08);
+    float size = (1.0 - depth) * (0.004 + u_high * 0.011 + u_beat * 0.006);
+    float trail = star(p - pos, size);
+    vec3 tint = mix(accentA, accentB, hash11(fi + 101.0));
+    color += tint * trail * (0.18 + (1.0 - depth) * 0.85 + u_beat * 0.5) * globalIntensity;
+  }
+
+  float warp = sin(length(p) * (12.0 + u_mid * 8.0) - u_time * (1.0 + u_high * 3.0));
+  color += vec3(0.08, 0.10, 0.18) * smoothstep(0.94, 1.0, warp) * (0.08 + u_mid * 0.22);
+  outColor = vec4(color, 1.0);
+}
+`,
+  waveform_ribbon: `#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_beat_pulse;
+uniform float u_fft[32];
+uniform float u_global_intensity;
+uniform float u_global_color;
+out vec4 outColor;
+
+float fftSample(float t) {
+  float index = clamp(floor(t * 31.0), 0.0, 31.0);
+  return u_fft[int(index)];
+}
+
+float line(float y, float center, float width) {
+  return 1.0 - smoothstep(0.0, width, abs(y - center));
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / max(u_resolution.xy, vec2(1.0));
+  float globalIntensity = 1.0 + clamp(u_global_intensity, 0.0, 1.0) * 0.5;
+  float globalColor = clamp(u_global_color, 0.0, 1.0);
+  float spectrum = fftSample(uv.x);
+  float phase = uv.x * 18.8495559215 + u_time * (1.2 + u_mid * 3.5);
+  float center = 0.5 + sin(phase) * (0.035 + u_bass * 0.08) + sin(phase * 0.43 - u_time) * 0.035;
+  float width = 0.018 + u_amplitude * 0.055 + spectrum * 0.16 + u_beat_pulse * 0.025;
+  float primary = line(uv.y, center, width);
+  float echoA = line(uv.y, center + 0.16 + u_high * 0.08, width * 0.62);
+  float echoB = line(uv.y, center - 0.15 - u_bass * 0.06, width * 0.58);
+  float grid = smoothstep(0.012, 0.0, abs(fract(uv.x * 32.0) - 0.5)) * 0.08;
+
+  vec3 bg = vec3(0.006, 0.012, 0.026);
+  bg += vec3(0.02, 0.03, 0.055) * smoothstep(0.9, 0.0, abs(uv.y - 0.5));
+  vec3 primaryColor = mix(vec3(0.08, 0.92, 1.0), vec3(1.0, 0.18, 0.58), globalColor);
+  vec3 echoColor = mix(vec3(1.0, 0.18, 0.58), vec3(0.95, 0.78, 0.28), globalColor);
+  vec3 bassColor = mix(vec3(0.95, 0.78, 0.28), vec3(0.22, 0.78, 1.0), globalColor);
+  vec3 ribbon = primaryColor * primary;
+  ribbon += echoColor * echoA * (0.5 + u_high);
+  ribbon += bassColor * echoB * (0.35 + u_bass);
+  ribbon += vec3(0.7, 0.85, 1.0) * primary * u_beat * 0.35;
+
+  vec3 color = bg + ribbon * (0.65 + spectrum * 0.75 + u_amplitude * 0.5) * globalIntensity;
+  color += vec3(0.18, 0.28, 0.44) * grid * (0.2 + spectrum);
+  outColor = vec4(color, 1.0);
+}
+`,
+  unyo_geometry: `#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_beat_pulse;
+uniform float u_bpm;
+uniform float u_fft[32];
+uniform float u_param_seed;
+uniform float u_param_sides;
+uniform float u_param_scale;
+uniform float u_param_wobble;
+uniform float u_param_twist;
+uniform float u_param_pulse;
+uniform float u_param_kick;
+uniform float u_param_snare;
+uniform float u_param_line_glow;
+
+out vec4 outColor;
+
+const float PI = 3.14159265359;
+const float TAU = 6.28318530718;
+
+float hash11(float p) {
+  return fract(sin(p * 127.1) * 43758.5453123);
+}
+
+float fftSample(float t) {
+  float index = clamp(floor(fract(t) * 31.0), 0.0, 31.0);
+  return u_fft[int(index)];
+}
+
+mat2 rotate2d(float angle) {
+  float s = sin(angle);
+  float c = cos(angle);
+  return mat2(c, -s, s, c);
+}
+
+float sdRegularPolygon(vec2 p, float radius, float sides) {
+  float angle = PI / sides;
+  float sector = TAU / sides;
+  vec2 axis = vec2(cos(angle), sin(angle));
+  float folded = mod(atan(p.x, p.y), sector) - angle;
+  vec2 q = length(p) * vec2(cos(folded), abs(sin(folded)));
+  return dot(q - vec2(radius, 0.0), axis);
+}
+
+vec3 palette(float t) {
+  vec3 cyan = vec3(0.02, 0.88, 0.98);
+  vec3 pink = vec3(1.00, 0.20, 0.58);
+  vec3 amber = vec3(1.00, 0.76, 0.22);
+  vec3 green = vec3(0.26, 0.96, 0.54);
+  vec3 first = mix(cyan, pink, smoothstep(0.0, 0.45, t));
+  vec3 second = mix(amber, green, smoothstep(0.55, 1.0, t));
+  return mix(first, second, smoothstep(0.35, 0.75, t));
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy / max(u_resolution.xy, vec2(1.0));
+  vec2 p = uv * 2.0 - 1.0;
+  p.x *= u_resolution.x / max(u_resolution.y, 1.0);
+
+  float seed = floor(max(u_param_seed, 0.0));
+  float sideDrift = floor(mod(seed, 5.0));
+  float sides = clamp(floor(max(u_param_sides, 7.0) + sideDrift - 2.0), 4.0, 12.0);
+  float scale = clamp(max(u_param_scale, 0.95), 0.55, 1.45);
+  float rawPulse = clamp(max(max(u_param_pulse, u_beat_pulse), u_beat), 0.0, 1.8);
+  float rawKick = clamp(max(u_param_kick, u_bass * 1.15), 0.0, 1.8);
+  float rawSnare = clamp(max(u_param_snare, u_high * 0.9), 0.0, 1.4);
+  float soundEnergy = max(max(u_amplitude, rawKick * 0.7), rawSnare * 0.55);
+  float soundGate = smoothstep(0.006, 0.035, soundEnergy);
+  float motionTime = u_time * soundGate;
+  float pulse = rawPulse * soundGate;
+  float kick = rawKick * soundGate;
+  float snare = rawSnare * soundGate;
+  float drumHit = max(pulse, kick);
+  float wobble = max(u_param_wobble, 0.3) + kick * 0.35;
+  float twist = max(u_param_twist, 0.35) + snare * 0.38;
+  float lineGlow = max(u_param_line_glow, 0.16);
+  float tempo = max(u_bpm, 120.0) / 60.0;
+
+  vec2 bodyDrift = vec2(
+    sin(motionTime * (0.65 + tempo * 0.08) + seed * 1.7),
+    cos(motionTime * (0.58 + tempo * 0.07) + seed * 1.1)
+  ) * soundGate * (0.035 + drumHit * 0.075);
+  p -= bodyDrift;
+
+  float radius = length(p);
+  float angle = atan(p.y, p.x);
+  float spectrum = fftSample(angle / TAU + 0.5 + seed * 0.017);
+  float activeSpectrum = spectrum * soundGate;
+  float breathing = 1.0 + drumHit * 0.22 + u_bass * soundGate * 0.12 + activeSpectrum * 0.09;
+  float organic = sin(angle * (sides + 1.0) + motionTime * (1.0 + u_mid * 2.2) + seed);
+  organic += sin(angle * (sides * 2.0 - 1.0) - motionTime * (0.8 + u_high * 2.8 + snare * 1.4) + seed * 0.7) * (0.55 + kick * 0.45);
+  organic += activeSpectrum * (1.1 + drumHit * 0.7);
+
+  float twistAngle = radius * twist * (0.9 + u_mid * 1.7 + drumHit * 0.55) + organic * wobble * 0.14;
+  vec2 warped = rotate2d(twistAngle) * p;
+  warped *= 1.0 + organic * wobble * 0.095 + kick * 0.025;
+
+  float baseRadius = 0.60 * scale * breathing;
+  float d = sdRegularPolygon(warped, baseRadius, sides);
+  float inside = 1.0 - smoothstep(-0.006, 0.024, d);
+  float edge = smoothstep(0.025, 0.0, abs(d));
+  float glow = exp(-abs(d) * 13.0) * (0.18 + drumHit * 0.68 + u_amplitude * 0.32);
+
+  float warpedAngle = atan(warped.y, warped.x);
+  float warpedRadius = length(warped);
+  float spokes = smoothstep(0.06, 0.0, abs(sin(warpedAngle * sides + motionTime * (0.7 + u_high * 1.6 + snare * 1.2))));
+  float rings = smoothstep(0.055, 0.0, abs(sin(warpedRadius * (24.0 + sides * 1.7 + kick * 7.0) - motionTime * tempo * (1.7 + drumHit * 1.1))));
+  float core = smoothstep(0.14, 0.0, abs(warpedRadius - baseRadius * (0.32 + drumHit * 0.11)));
+  float innerLines = inside * max(spokes * 0.72, max(rings * 0.5, core * 0.62)) * lineGlow;
+
+  vec3 bg = vec3(0.012, 0.016, 0.028);
+  bg += vec3(0.018, 0.024, 0.040) * smoothstep(1.25, 0.05, length(p));
+  bg += vec3(0.04, 0.028, 0.065) * (0.06 + u_mid * 0.12) * smoothstep(1.0, 0.0, radius);
+
+  vec3 shapeColor = palette(fract(seed * 0.071 + warpedAngle / TAU + u_high * 0.16));
+  vec3 innerColor = palette(fract(seed * 0.11 + 0.45 + warpedRadius));
+  shapeColor *= 0.78 + u_amplitude * 0.42 + drumHit * 0.46 + snare * 0.18;
+
+  vec3 color = bg;
+  color += shapeColor * glow;
+  color += shapeColor * edge * (1.2 + drumHit * 0.72);
+  color += innerColor * innerLines * (0.8 + u_high * 0.75 + snare * 0.35);
+  color += shapeColor * inside * 0.10;
+  color += vec3(1.0, 0.96, 0.86) * drumHit * 0.06;
+
+  outColor = vec4(color, 1.0);
+}
 `,
   glitch_flash: `#version 300 es
 precision mediump float;

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

@@ -76,6 +76,58 @@ void main() {
   float flicker = 0.96 + 0.04 * sin(u_time * 4.0);
   outColor = vec4(base.rgb * flicker, base.a);
 }
+`,
+  motion_blur: `#version 300 es
+precision mediump float;
+in vec2 v_uv;
+uniform sampler2D u_texture;
+uniform vec2 u_resolution;
+uniform float u_intensity;
+out vec4 outColor;
+
+void main() {
+  vec2 texel = 1.0 / max(u_resolution, vec2(1.0));
+  vec2 center = v_uv - vec2(0.5);
+  float radius = length(center);
+  vec2 direction = normalize(center + vec2(0.001));
+  float amount = (2.0 + u_intensity * 12.0) * radius;
+  vec4 color = texture(u_texture, v_uv) * 0.36;
+  color += texture(u_texture, v_uv - direction * texel * amount) * 0.28;
+  color += texture(u_texture, v_uv - direction * texel * amount * 2.0) * 0.20;
+  color += texture(u_texture, v_uv - direction * texel * amount * 3.0) * 0.12;
+  color += texture(u_texture, v_uv - direction * texel * amount * 4.0) * 0.04;
+  outColor = color;
+}
+`,
+  crt: `#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;
+
+float rand(vec2 p) {
+  return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+void main() {
+  vec2 centered = v_uv * 2.0 - 1.0;
+  float curvature = 0.08 * u_intensity;
+  vec2 warped = centered * (1.0 + curvature * dot(centered, centered));
+  vec2 uv = warped * 0.5 + 0.5;
+  vec4 base = texture(u_texture, clamp(uv, vec2(0.0), vec2(1.0)));
+  float inBounds = step(0.0, uv.x) * step(uv.x, 1.0) * step(0.0, uv.y) * step(uv.y, 1.0);
+  float scanline = 0.86 + 0.14 * sin(v_uv.y * max(u_resolution.y, 1.0) * 3.14159);
+  float vignette = 1.0 - smoothstep(0.25, 0.95, length(centered));
+  float staticNoise = (rand(v_uv * max(u_resolution, vec2(1.0)) + vec2(u_time)) - 0.5) * 0.08 * u_intensity;
+  vec3 color = base.rgb * scanline * vignette;
+  color.r *= 1.0 + 0.04 * u_intensity;
+  color.b *= 1.0 - 0.05 * u_intensity;
+  color += staticNoise;
+  outColor = vec4(color * inBounds, base.a * inBounds);
+}
 `
 };
 

data/frontend/src/visual-regression.js

@@ -0,0 +1,67 @@
+const DEFAULT_SIZE = 64;
+const HASH_OFFSET = 0x811c9dc5;
+const HASH_PRIME = 0x01000193;
+
+export const lineSegmentsFingerprint = (points, {
+  width = DEFAULT_SIZE,
+  height = DEFAULT_SIZE,
+} = {}) => {
+  const pixels = rasterizeLineSegments(points, { width, height });
+  let hash = HASH_OFFSET;
+
+  for (const value of pixels) {
+    hash ^= value;
+    hash = Math.imul(hash, HASH_PRIME) >>> 0;
+  }
+
+  return hash.toString(16).padStart(8, "0");
+};
+
+export const rasterizeLineSegments = (points, {
+  width = DEFAULT_SIZE,
+  height = DEFAULT_SIZE,
+} = {}) => {
+  const safeWidth = clampInt(width, 8, 512);
+  const safeHeight = clampInt(height, 8, 512);
+  const pixels = new Uint8Array(safeWidth * safeHeight);
+  const input = Array.isArray(points) || ArrayBuffer.isView(points) ? Array.from(points) : [];
+
+  for (let index = 0; index + 3 < input.length; index += 4) {
+    const x1 = normalizedToPixel(input[index], safeWidth);
+    const y1 = normalizedToPixel(-input[index + 1], safeHeight);
+    const x2 = normalizedToPixel(input[index + 2], safeWidth);
+    const y2 = normalizedToPixel(-input[index + 3], safeHeight);
+    drawLine(pixels, safeWidth, safeHeight, x1, y1, x2, y2);
+  }
+
+  return pixels;
+};
+
+const drawLine = (pixels, width, height, x1, y1, x2, y2) => {
+  const dx = Math.abs(x2 - x1);
+  const dy = Math.abs(y2 - y1);
+  const steps = Math.max(dx, dy, 1);
+
+  for (let step = 0; step <= steps; step += 1) {
+    const amount = step / steps;
+    const x = Math.round(x1 + (x2 - x1) * amount);
+    const y = Math.round(y1 + (y2 - y1) * amount);
+    if (x < 0 || y < 0 || x >= width || y >= height) {
+      continue;
+    }
+    pixels[y * width + x] = 255;
+  }
+};
+
+const normalizedToPixel = (value, size) => {
+  const normalized = (clamp(Number(value) || 0, -1, 1) + 1) * 0.5;
+  return Math.round(normalized * (size - 1));
+};
+
+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 clamp = (value, min, max) => Math.min(Math.max(value, min), max);