@litfamily/litclaude 1.0.10 → 1.0.13

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/gl.mjs

@@ -0,0 +1,319 @@
+// Raw WebGL2 plumbing: HDR render targets, full-screen shader passes, a compositor and Canvas2D
+// layers uploaded as sRGB textures. Re-expressed without three.js from the mechanism of
+// mexicat/pdoom-video app/src/engine/gl.ts (MIT, see ../NOTICE).
+//
+// Every look-library pass draws through `Pass.draw`, the one uniform-setter wrapper: it records
+// the uniforms and counts draws per pass for the render log (MO-SH-00a), so no pass can draw
+// without leaving a trace the gate can check.
+import { GLSL_COMMON } from "./glsl-common.mjs";
+import { SCALE, W, H, PW, PH } from "./scale.mjs";
+
+export { SCALE, W, H, PW, PH };
+
+const VERT = `#version 300 es
+precision highp float;
+out vec2 vUv;
+void main() {
+  vec2 p = vec2(float((gl_VertexID << 1) & 2), float(gl_VertexID & 2));
+  vUv = p;
+  gl_Position = vec4(p * 2.0 - 1.0, 0.0, 1.0);
+}`;
+
+/** Per-frame render-log recorder shared by every pass. */
+export class Tracker {
+  constructor() {
+    this.frame = new Map();
+    this.recordUniforms = true;
+  }
+  reset() {
+    this.frame = new Map();
+  }
+  entry(pass) {
+    let e = this.frame.get(pass);
+    if (!e) {
+      e = { draws: 0, uniforms: {} };
+      this.frame.set(pass, e);
+    }
+    return e;
+  }
+  draw(pass, uniforms) {
+    const e = this.entry(pass);
+    e.draws += 1;
+    if (this.recordUniforms) {
+      for (const [name, value] of Object.entries(uniforms)) {
+        if (value && typeof value === "object" && value.isTexture) continue;
+        e.uniforms[name] = Array.isArray(value) ? value.map((v) => +(+v).toFixed(6)) : typeof value === "number" ? +value.toFixed(6) : value;
+      }
+    }
+  }
+  lines() {
+    return [...this.frame.entries()].map(([pass, e]) => ({ pass, draws: e.draws, uniforms: e.uniforms }));
+  }
+}
+
+export class GL {
+  constructor(canvas) {
+    const gl = canvas.getContext("webgl2", { antialias: false, alpha: false, depth: false, stencil: false, preserveDrawingBuffer: true, premultipliedAlpha: false, powerPreference: "high-performance" });
+    if (!gl) throw new Error("NO_WEBGL2: canvas.getContext('webgl2') returned null");
+    if (!gl.getExtension("EXT_color_buffer_float")) throw new Error("NO_WEBGL2: EXT_color_buffer_float is unavailable, so HDR render targets cannot be drawn");
+    this.gl = gl;
+    this.canvas = canvas;
+    this.vao = gl.createVertexArray();
+    this.tracker = new Tracker();
+    this.programs = new Map();
+  }
+
+  renderer() {
+    const gl = this.gl;
+    const ext = gl.getExtension("WEBGL_debug_renderer_info");
+    return ext ? String(gl.getParameter(ext.UNMASKED_RENDERER_WEBGL)) : "unknown (debug-info extension unavailable)";
+  }
+
+  /** A render target in physical px. `format` is "half" (RGBA16F, linear HDR) or "rgba8". */
+  target(width = PW, height = PH, format = "half") {
+    const gl = this.gl;
+    const tex = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, tex);
+    if (format === "half") gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA16F, width, height);
+    else gl.texStorage2D(gl.TEXTURE_2D, 1, gl.RGBA8, width, height);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const fbo = gl.createFramebuffer();
+    gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
+    gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, tex, 0);
+    const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
+    if (status !== gl.FRAMEBUFFER_COMPLETE) throw new Error(`framebuffer incomplete (${status}) for ${format} ${width}x${height}`);
+    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+    return { fbo, tex: { isTexture: true, handle: tex }, width, height, format };
+  }
+
+  bind(target) {
+    const gl = this.gl;
+    gl.bindFramebuffer(gl.FRAMEBUFFER, target ? target.fbo : null);
+    gl.viewport(0, 0, target ? target.width : PW, target ? target.height : PH);
+  }
+
+  clear(target, rgb = [0, 0, 0], alpha = 0) {
+    const gl = this.gl;
+    this.bind(target);
+    gl.disable(gl.BLEND);
+    gl.clearColor(rgb[0], rgb[1], rgb[2], alpha);
+    gl.clear(gl.COLOR_BUFFER_BIT);
+  }
+
+  program(frag) {
+    const cached = this.programs.get(frag);
+    if (cached) return cached;
+    const gl = this.gl;
+    const compile = (type, source) => {
+      const shader = gl.createShader(type);
+      gl.shaderSource(shader, source);
+      gl.compileShader(shader);
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) throw new Error(`shader compile failed: ${gl.getShaderInfoLog(shader)}`);
+      return shader;
+    };
+    const fragSource = `#version 300 es\nprecision highp float;\nprecision highp int;\nin vec2 vUv;\nout vec4 fragColor;\n${GLSL_COMMON}\n${frag}`;
+    const program = gl.createProgram();
+    gl.attachShader(program, compile(gl.VERTEX_SHADER, VERT));
+    gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragSource));
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw new Error(`program link failed: ${gl.getProgramInfoLog(program)}`);
+    const uniforms = new Map();
+    const count = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+    for (let i = 0; i < count; i++) {
+      const info = gl.getActiveUniform(program, i);
+      const name = info.name.replace(/\[0\]$/u, "");
+      uniforms.set(name, { location: gl.getUniformLocation(program, info.name), type: info.type, size: info.size });
+    }
+    const entry = { program, uniforms };
+    this.programs.set(frag, entry);
+    return entry;
+  }
+
+  setUniforms(entry, values) {
+    const gl = this.gl;
+    let unit = 0;
+    for (const [name, value] of Object.entries(values)) {
+      const u = entry.uniforms.get(name);
+      if (!u) continue;
+      const v = typeof value === "boolean" ? (value ? 1 : 0) : value;
+      switch (u.type) {
+        case gl.FLOAT: gl.uniform1f(u.location, v); break;
+        case gl.FLOAT_VEC2: gl.uniform2fv(u.location, v); break;
+        case gl.FLOAT_VEC3: gl.uniform3fv(u.location, v); break;
+        case gl.FLOAT_VEC4: gl.uniform4fv(u.location, v); break;
+        case gl.INT: case gl.BOOL: gl.uniform1i(u.location, v); break;
+        case gl.UNSIGNED_INT: gl.uniform1ui(u.location, v >>> 0); break;
+        case gl.SAMPLER_2D:
+          gl.activeTexture(gl.TEXTURE0 + unit);
+          gl.bindTexture(gl.TEXTURE_2D, v ? v.handle : null);
+          gl.uniform1i(u.location, unit);
+          unit += 1;
+          break;
+        default: throw new Error(`unsupported uniform type for ${name}`);
+      }
+    }
+  }
+
+  blend(mode) {
+    const gl = this.gl;
+    if (mode === "replace") {
+      gl.disable(gl.BLEND);
+      return;
+    }
+    gl.enable(gl.BLEND);
+    if (mode === "normal") {
+      // Premultiplied colour over the target; the target's alpha (glyph coverage) is kept.
+      gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+      gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ZERO, gl.ONE);
+    } else if (mode === "glyph") {
+      // Glyph ink: colour over, coverage = max(target, glyph) so alpha carries the glyph mask.
+      gl.blendEquationSeparate(gl.FUNC_ADD, gl.MAX);
+      gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
+    } else if (mode === "add") {
+      gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
+      gl.blendFuncSeparate(gl.ONE, gl.ONE, gl.ONE, gl.ONE);
+    } else throw new Error(`unknown blend mode ${mode}`);
+  }
+
+  /** Download a target's RGBA8 pixels through a pixel-pack buffer and a fence (no GPU stall). */
+  async readPixelsAsync(target, out) {
+    const gl = this.gl;
+    const bytes = target.width * target.height * 4;
+    const buffer = out ?? new Uint8Array(bytes);
+    if (!this.pbo || this.pboBytes !== bytes) {
+      if (this.pbo) gl.deleteBuffer(this.pbo);
+      this.pbo = gl.createBuffer();
+      gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this.pbo);
+      gl.bufferData(gl.PIXEL_PACK_BUFFER, bytes, gl.STREAM_READ);
+      this.pboBytes = bytes;
+    }
+    this.bind(target);
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, this.pbo);
+    gl.readPixels(0, 0, target.width, target.height, gl.RGBA, gl.UNSIGNED_BYTE, 0);
+    const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+    gl.flush();
+    for (;;) {
+      const state = gl.clientWaitSync(sync, 0, 0);
+      if (state === gl.ALREADY_SIGNALED || state === gl.CONDITION_SATISFIED) break;
+      if (state === gl.WAIT_FAILED) throw new Error("clientWaitSync failed during pixel readback");
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+    gl.deleteSync(sync);
+    gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, buffer);
+    gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+    return buffer;
+  }
+}
+
+/**
+ * A full-screen fragment pass. `frag` declares its uniforms and writes `fragColor`; `vUv` (0..1,
+ * y up) and GLSL_COMMON are provided. `pass` names the look-library pass it belongs to (null for
+ * engine plumbing); only named passes are logged.
+ */
+export class Pass {
+  constructor(glw, frag, { pass = null } = {}) {
+    this.glw = glw;
+    this.frag = frag;
+    this.pass = pass;
+    this.entry = glw.program(frag);
+  }
+  draw(target, uniforms = {}, { blend = "replace" } = {}) {
+    const { glw } = this;
+    const gl = glw.gl;
+    glw.bind(target);
+    gl.useProgram(this.entry.program);
+    glw.setUniforms(this.entry, uniforms);
+    glw.blend(blend);
+    gl.bindVertexArray(glw.vao);
+    gl.drawArrays(gl.TRIANGLES, 0, 3);
+    gl.bindVertexArray(null);
+    if (this.pass) glw.tracker.draw(this.pass, uniforms);
+  }
+}
+
+const COMPOSITE_FRAG = /* glsl */ `
+uniform sampler2D src; uniform float opacity; uniform vec3 tint;
+void main() {
+  // Canvas2D layers are uploaded unpremultiplied as SRGB8_ALPHA8, so RGB arrives already linear
+  // and is premultiplied here.
+  vec4 c = texture(src, vUv);
+  float a = c.a * opacity;
+  fragColor = vec4(c.rgb * tint * a, a);
+}`;
+
+/** Draws a texture over a target: `normal` keeps the target's glyph mask, `glyph` adds to it. */
+export class Compositor {
+  constructor(glw) {
+    this.pass = new Pass(glw, COMPOSITE_FRAG);
+  }
+  draw(texture, target, { mode = "normal", opacity = 1, tint = [1, 1, 1], logAs = null } = {}) {
+    this.pass.pass = logAs;
+    this.pass.draw(target, { src: texture, opacity, tint }, { blend: mode });
+    this.pass.pass = null;
+  }
+}
+
+/**
+ * A logical 1920x1080 Canvas2D surface uploaded as an sRGB texture. The context is CPU-backed
+ * (willReadFrequently) so its rasterization does not depend on GPU raster scheduling, and it is
+ * pre-scaled so drawing code works in logical px at every output scale.
+ */
+export class Layer2D {
+  constructor(glw, width = W, height = H) {
+    this.glw = glw;
+    this.width = width;
+    this.height = height;
+    this.canvas = document.createElement("canvas");
+    this.canvas.width = Math.round(width * SCALE);
+    this.canvas.height = Math.round(height * SCALE);
+    this.ctx = this.canvas.getContext("2d", { willReadFrequently: true, alpha: true });
+    const gl = glw.gl;
+    this.handle = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, this.handle);
+    gl.texStorage2D(gl.TEXTURE_2D, 1, gl.SRGB8_ALPHA8, this.canvas.width, this.canvas.height);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    this.texture = { isTexture: true, handle: this.handle };
+    this.clear();
+  }
+  clear() {
+    const c = this.ctx;
+    c.setTransform(SCALE, 0, 0, SCALE, 0, 0);
+    c.globalAlpha = 1;
+    c.globalCompositeOperation = "source-over";
+    c.filter = "none";
+    c.shadowBlur = 0;
+    c.clearRect(0, 0, this.width, this.height);
+  }
+  upload() {
+    const gl = this.glw.gl;
+    gl.bindTexture(gl.TEXTURE_2D, this.handle);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.canvas);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    return this.texture;
+  }
+  /** Re-upload only a logical-px rectangle of the canvas (the rest of the texture is kept). */
+  uploadRegion(x, y, w, h) {
+    const gl = this.glw.gl;
+    const px = Math.max(0, Math.floor(x * SCALE));
+    const py = Math.max(0, Math.floor(y * SCALE));
+    const pw = Math.min(this.canvas.width - px, Math.ceil((x + w) * SCALE) - px);
+    const ph = Math.min(this.canvas.height - py, Math.ceil((y + h) * SCALE) - py);
+    const region = this.ctx.getImageData(px, py, pw, ph);
+    gl.bindTexture(gl.TEXTURE_2D, this.handle);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, px, this.canvas.height - py - ph, pw, ph, gl.RGBA, gl.UNSIGNED_BYTE, region);
+    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+    return this.texture;
+  }
+}

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/glsl-common.mjs

@@ -0,0 +1,78 @@
+// Shared GLSL ES 3.0 header prepended to every full-screen pass. Adapted in structure from
+// mexicat/pdoom-video app/src/engine/glsl/common.ts (MIT, see ../NOTICE): output-scale-aware
+// fragment coordinates, colour transfer helpers and pure noise. The noise here is this engine's
+// own integer-hash value noise, seeded through `uint` uniforms (MO-SH-01), so every pass that needs
+// randomness is a pure function of (pixel, seed, t).
+import { SCALE } from "./scale.mjs";
+
+export const GLSL_COMMON = /* glsl */ `
+#define PI 3.14159265359
+#define TAU 6.28318530718
+const float PX_SCALE = ${SCALE.toFixed(1)};
+#define FRAG_PX (gl_FragCoord.xy / PX_SCALE)
+const vec2 LOGICAL = vec2(1920.0, 1080.0);
+
+float sat(float x) { return clamp(x, 0.0, 1.0); }
+vec3 sat(vec3 x) { return clamp(x, 0.0, 1.0); }
+float luma(vec3 c) { return dot(c, vec3(0.2126, 0.7152, 0.0722)); }
+mat2 rot2(float a) { float c = cos(a), s = sin(a); return mat2(c, -s, s, c); }
+
+vec3 toSRGB(vec3 c) { c = max(c, 0.0); return mix(12.92 * c, 1.055 * pow(c, vec3(1.0 / 2.4)) - 0.055, step(0.0031308, c)); }
+vec3 toLinear(vec3 c) { return mix(c / 12.92, pow((c + 0.055) / 1.055, vec3(2.4)), step(0.04045, c)); }
+
+// 32-bit integer hash (xorshift-multiply). Deterministic on every WebGL2 implementation because it
+// only uses uint multiply, xor and shifts.
+uint uhash(uint x) {
+  x ^= x >> 16u; x *= 0x7feb352du;
+  x ^= x >> 15u; x *= 0x846ca68bu;
+  x ^= x >> 16u;
+  return x;
+}
+uint uhash2(uvec2 v) { return uhash(v.x ^ uhash(v.y + 0x9e3779b9u)); }
+uint uhash3(uvec3 v) { return uhash(v.x ^ uhash(v.y ^ uhash(v.z + 0x85ebca6bu))); }
+float unit(uint h) { return float(h >> 8u) * (1.0 / 16777216.0); }
+float hashCell(ivec2 c, uint seed) { return unit(uhash3(uvec3(uint(c.x), uint(c.y), seed))); }
+float hashCell3(ivec3 c, uint seed) { return unit(uhash(uhash3(uvec3(c)) ^ seed)); }
+
+vec2 quintic(vec2 t) { return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); }
+vec3 quintic(vec3 t) { return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); }
+
+// Value noise in [-1, 1].
+float vnoise(vec2 p, uint seed) {
+  ivec2 i = ivec2(floor(p)); vec2 f = quintic(fract(p));
+  float a = hashCell(i, seed), b = hashCell(i + ivec2(1, 0), seed);
+  float c = hashCell(i + ivec2(0, 1), seed), d = hashCell(i + ivec2(1, 1), seed);
+  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y) * 2.0 - 1.0;
+}
+float vnoise(vec3 p, uint seed) {
+  ivec3 i = ivec3(floor(p)); vec3 f = quintic(fract(p));
+  float n000 = hashCell3(i, seed), n100 = hashCell3(i + ivec3(1, 0, 0), seed);
+  float n010 = hashCell3(i + ivec3(0, 1, 0), seed), n110 = hashCell3(i + ivec3(1, 1, 0), seed);
+  float n001 = hashCell3(i + ivec3(0, 0, 1), seed), n101 = hashCell3(i + ivec3(1, 0, 1), seed);
+  float n011 = hashCell3(i + ivec3(0, 1, 1), seed), n111 = hashCell3(i + ivec3(1, 1, 1), seed);
+  float x00 = mix(n000, n100, f.x), x10 = mix(n010, n110, f.x), x01 = mix(n001, n101, f.x), x11 = mix(n011, n111, f.x);
+  return mix(mix(x00, x10, f.y), mix(x01, x11, f.y), f.z) * 2.0 - 1.0;
+}
+float fbm(vec3 p, int octaves, uint seed) {
+  float sum = 0.0, amp = 0.5;
+  for (int i = 0; i < 8; i++) {
+    if (i >= octaves) break;
+    sum += amp * vnoise(p, seed + uint(i) * 101u);
+    p = p * 2.02 + vec3(17.1, 9.3, 4.7);
+    amp *= 0.5;
+  }
+  return sum;
+}
+// Divergence-free flow direction from the gradient of a scalar noise field.
+vec2 curl(vec2 p, float z, uint seed) {
+  const float e = 0.02;
+  float n1 = vnoise(vec3(p + vec2(0.0, e), z), seed), n2 = vnoise(vec3(p - vec2(0.0, e), z), seed);
+  float n3 = vnoise(vec3(p + vec2(e, 0.0), z), seed), n4 = vnoise(vec3(p - vec2(e, 0.0), z), seed);
+  return vec2(n1 - n2, n4 - n3) / (2.0 * e);
+}
+
+// Ordered-dither thresholds in [0, 1).
+float bayer2(ivec2 p) { int x = p.x & 1, y = p.y & 1; return float((x ^ y) * 2 + y) / 4.0; }
+float bayer4(ivec2 p) { return (bayer2(p / 2) + bayer2(p) * 4.0) / 4.0; }
+float bayer8(ivec2 p) { return (bayer4(p / 2) + bayer2(p) * 16.0) / 4.0; }
+`;

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/index.html

@@ -0,0 +1,6 @@
+<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><title>lit-typographic-motion</title>
+<style>html,body{margin:0;background:#000}canvas{display:block}</style></head>
+<body><canvas id="gl" width="16" height="16"></canvas><script type="module" src="./boot.mjs"></script></body>
+</html>

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/lines.mjs

@@ -0,0 +1,112 @@
+// GPU-instanced anti-aliased capsule segments in logical 2D pixel space (origin top-left, y down),
+// one draw call per batch. Adapted from mexicat/pdoom-video app/src/engine/lines.ts (MIT, see
+// ../NOTICE), reduced to the 2D case the look library needs (hairline rules, meters, strokes).
+import { SCALE, W, H } from "./gl.mjs";
+
+const VERT = `#version 300 es
+precision highp float;
+layout(location = 0) in vec2 corner;
+layout(location = 1) in vec4 seg;
+layout(location = 2) in vec4 color;
+layout(location = 3) in float width;
+uniform vec2 res; uniform float pxScale;
+out vec2 vLocal; out float vLen; out float vHalf; out vec4 vColor;
+void main() {
+  vec2 a = seg.xy * pxScale, b = seg.zw * pxScale;
+  float w = width * pxScale;
+  float hw = max(w * 0.5, 0.35) + 1.0;
+  vec2 d = b - a; float len = length(d);
+  vec2 dir = len > 1e-4 ? d / len : vec2(1.0, 0.0);
+  vec2 nrm = vec2(-dir.y, dir.x);
+  float along = mix(-hw, len + hw, corner.x);
+  vec2 p = a + dir * along + nrm * corner.y * hw;
+  vec2 physical = res * pxScale;
+  gl_Position = vec4(p.x / physical.x * 2.0 - 1.0, 1.0 - p.y / physical.y * 2.0, 0.0, 1.0);
+  vLocal = vec2(along, corner.y * hw);
+  vLen = len; vHalf = max(w * 0.5, 0.35);
+  vColor = color * vec4(1.0, 1.0, 1.0, min(1.0, w / 0.7));
+}`;
+
+const FRAG = `#version 300 es
+precision highp float;
+in vec2 vLocal; in float vLen; in float vHalf; in vec4 vColor;
+out vec4 fragColor;
+void main() {
+  float x = clamp(vLocal.x, 0.0, vLen);
+  float d = length(vec2(vLocal.x - x, vLocal.y)) - vHalf;
+  float a = clamp(0.5 - d, 0.0, 1.0) * vColor.a;
+  if (a <= 0.0) discard;
+  fragColor = vec4(vColor.rgb * a, a);
+}`;
+
+export class LineBatch {
+  constructor(glw, capacity = 256) {
+    this.glw = glw;
+    const gl = glw.gl;
+    this.capacity = capacity;
+    this.data = new Float32Array(capacity * 9);
+    this.count = 0;
+    const compile = (type, source) => {
+      const s = gl.createShader(type);
+      gl.shaderSource(s, source);
+      gl.compileShader(s);
+      if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(`line shader: ${gl.getShaderInfoLog(s)}`);
+      return s;
+    };
+    this.program = gl.createProgram();
+    gl.attachShader(this.program, compile(gl.VERTEX_SHADER, VERT));
+    gl.attachShader(this.program, compile(gl.FRAGMENT_SHADER, FRAG));
+    gl.linkProgram(this.program);
+    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) throw new Error(`line program: ${gl.getProgramInfoLog(this.program)}`);
+    this.uRes = gl.getUniformLocation(this.program, "res");
+    this.uScale = gl.getUniformLocation(this.program, "pxScale");
+    this.vao = gl.createVertexArray();
+    gl.bindVertexArray(this.vao);
+    const quad = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, quad);
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, -1, 1, -1, 1, 1, 0, -1, 1, 1, 0, 1]), gl.STATIC_DRAW);
+    gl.enableVertexAttribArray(0);
+    gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
+    this.instances = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.instances);
+    gl.bufferData(gl.ARRAY_BUFFER, this.data.byteLength, gl.DYNAMIC_DRAW);
+    const stride = 9 * 4;
+    gl.enableVertexAttribArray(1);
+    gl.vertexAttribPointer(1, 4, gl.FLOAT, false, stride, 0);
+    gl.vertexAttribDivisor(1, 1);
+    gl.enableVertexAttribArray(2);
+    gl.vertexAttribPointer(2, 4, gl.FLOAT, false, stride, 16);
+    gl.vertexAttribDivisor(2, 1);
+    gl.enableVertexAttribArray(3);
+    gl.vertexAttribPointer(3, 1, gl.FLOAT, false, stride, 32);
+    gl.vertexAttribDivisor(3, 1);
+    gl.bindVertexArray(null);
+  }
+  clear() {
+    this.count = 0;
+  }
+  /** Segment from (x0, y0) to (x1, y1) in logical px; colour is linear RGB plus alpha. */
+  segment(x0, y0, x1, y1, width, rgb, alpha = 1) {
+    if (this.count >= this.capacity) throw new Error(`LineBatch capacity ${this.capacity} exceeded`);
+    this.data.set([x0, y0, x1, y1, rgb[0], rgb[1], rgb[2], alpha, width], this.count * 9);
+    this.count += 1;
+  }
+  /** Draw every queued segment over `target` in one instanced call. Returns the draw count (0|1). */
+  draw(target, { pass = null } = {}) {
+    if (this.count === 0) return 0;
+    const { glw } = this;
+    const gl = glw.gl;
+    glw.bind(target);
+    gl.useProgram(this.program);
+    gl.uniform2f(this.uRes, W, H);
+    gl.uniform1f(this.uScale, SCALE);
+    glw.blend("normal");
+    gl.bindVertexArray(this.vao);
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.instances);
+    gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.data, 0, this.count * 9);
+    gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, this.count);
+    gl.bindVertexArray(null);
+    if (pass) glw.tracker.draw(pass, { segments: this.count });
+    return 1;
+  }
+}

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/passes/crt.mjs

@@ -0,0 +1,98 @@
+// crt (MO-SH-07): barrel curvature, scanlines, a subtle aperture triad, a local glow, vignette and a
+// capped brightness flicker. Scanlines, curvature and vignette are pure functions of position, so
+// they carry no flash risk; the flicker multiplier is computed on the CPU, logged every frame and
+// capped at 0.06 peak-to-peak, below the flash audit's 0.1 trigger by construction. The boot
+// flicker is the same capped multiplier over the shot's first 250 ms and counts as one event.
+//
+// Phosphor persistence is finite-memory: it blends in the previous sub-sample's crt input, never
+// its own output, so a seek that replays the preroll reproduces it exactly. It is only allowed on
+// a stateful shot; the gate fails a manifest that enables it anywhere else.
+import { SHADER } from "../../core/constants.mjs";
+import { Pass } from "../gl.mjs";
+
+const FRAG = /* glsl */ `
+uniform sampler2D src; uniform sampler2D u_prev; uniform uint u_seed;
+uniform float u_scanlineFreqPerFrame, u_scanlineDepth, u_phosphorPersistence, u_bloomAmount, u_curvature, u_vignette, u_triadMaskAmount, u_flicker;
+vec2 barrel(vec2 uv) {
+  vec2 d = uv - 0.5;
+  return uv + d * dot(d, d) * u_curvature * 2.0;
+}
+void main() {
+  vec2 uv = barrel(vUv);
+  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) { fragColor = vec4(0.0); return; }
+  vec4 c = texture(src, uv);
+  vec3 col = c.rgb;
+  if (u_phosphorPersistence > 0.0) col += texture(u_prev, uv).rgb * u_phosphorPersistence;
+  if (u_bloomAmount > 0.0) {
+    vec2 px = 1.5 / LOGICAL;
+    vec3 glow = texture(src, uv + vec2(px.x, 0.0)).rgb + texture(src, uv - vec2(px.x, 0.0)).rgb
+      + texture(src, uv + vec2(0.0, px.y)).rgb + texture(src, uv - vec2(0.0, px.y)).rgb;
+    col += max(glow * 0.25 - 0.35, 0.0) * u_bloomAmount;
+  }
+  float y = uv.y * LOGICAL.y;
+  float scan = 0.5 + 0.5 * cos(y * TAU * u_scanlineFreqPerFrame / LOGICAL.y);
+  col *= 1.0 - u_scanlineDepth * (1.0 - scan);
+  int column = int(floor(FRAG_PX.x)) % 3;
+  vec3 triad = column == 0 ? vec3(1.0, 0.82, 0.82) : column == 1 ? vec3(0.82, 1.0, 0.82) : vec3(0.82, 0.82, 1.0);
+  float grainStatic = (unit(uhash3(uvec3(uvec2(FRAG_PX), u_seed))) - 0.5) * 0.04;
+  col *= mix(vec3(1.0), triad * (1.0 + grainStatic), u_triadMaskAmount);
+  vec2 d = uv - 0.5;
+  col *= mix(1.0, smoothstep(0.75, 0.2, length(d * vec2(1.0, 0.9))), u_vignette);
+  col *= u_flicker;
+  fragColor = vec4(col, c.a);
+}`;
+
+export class Crt {
+  constructor(glw, { params, software }) {
+    this.id = "crt";
+    this.category = "filter";
+    this.glw = glw;
+    this.params = { ...params, flickerAmp: Math.min(SHADER.crtFlickerCap, params.flickerAmp) };
+    this.downgraded = Boolean(software);
+    if (software) this.params.phosphorPersistence = 0;
+    this.pass = new Pass(glw, FRAG, { pass: this.id });
+    this.history = null;
+  }
+  get persistence() {
+    return this.params.phosphorPersistence > 0;
+  }
+  shotState(seed, events, shot) {
+    const boot = events.add(shot.start, "boot-flicker") ? shot.start : null;
+    return { seed, boot };
+  }
+  resetHistory() {
+    if (this.history) this.glw.clear(this.history, [0, 0, 0], 0);
+  }
+  /** Flicker multiplier at t: base amplitude, or the cap during the boot window. */
+  flicker(t, state) {
+    const p = this.params;
+    const booting = state.boot !== null && t >= state.boot && t < state.boot + 0.25;
+    const amp = booting ? SHADER.crtFlickerCap : p.flickerAmp;
+    return 1 + 0.5 * amp * Math.sin(Math.PI * 2 * p.flickerFreqHz * t);
+  }
+  apply(src, dst, f, state) {
+    const p = this.params;
+    if (this.persistence && !this.history) {
+      this.history = this.glw.target();
+      this.resetHistory();
+    }
+    this.pass.draw(dst, {
+      src, u_prev: this.history ? this.history.tex : src, u_seed: state.seed, u_scanlineFreqPerFrame: p.scanlineFreqPerFrame,
+      u_scanlineDepth: p.scanlineDepth, u_phosphorPersistence: p.phosphorPersistence, u_bloomAmount: p.bloomAmount,
+      u_curvature: p.curvature, u_vignette: p.vignette, u_triadMaskAmount: p.triadMaskAmount, u_flicker: this.flicker(f.t, state),
+    });
+    if (this.persistence) this.copyHistory(src);
+  }
+  copyHistory(src) {
+    if (!this.copy) this.copy = new Pass(this.glw, "uniform sampler2D src; void main() { fragColor = texture(src, vUv); }");
+    this.copy.draw(this.history, { src });
+  }
+  manifestParams(state) {
+    const p = this.params;
+    return {
+      scanlineFreq: p.scanlineFreqPerFrame, scanlineDepth: p.scanlineDepth, curvature: p.curvature, vignette: p.vignette,
+      flickerAmp: p.flickerAmp, flickerFreqHz: p.flickerFreqHz, persistenceEnabled: this.persistence,
+      bootFlickerTimes: state.boot === null ? [] : [+state.boot.toFixed(4)],
+    };
+  }
+}

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/passes/dither.mjs

@@ -0,0 +1,49 @@
+// dither (MO-SH-08): ordered-dither quantization locked to screen space. Bayer modes take no seed;
+// mode 3 offsets an interleaved-gradient-noise tile by the shot seed. The seed is set once per shot
+// and never changes inside it, so the pattern cannot become a per-frame luminance flicker.
+import { Pass } from "../gl.mjs";
+
+const FRAG = /* glsl */ `
+uniform sampler2D src; uniform int u_ditherMode; uniform int u_paletteSize; uniform int u_pixelScale;
+uniform float u_ditherStrength; uniform uint u_seed;
+float threshold(ivec2 cell) {
+  if (u_ditherMode == 0) return bayer2(cell);
+  if (u_ditherMode == 1) return bayer4(cell);
+  if (u_ditherMode == 2) return bayer8(cell);
+  // Interleaved gradient noise with a per-shot tile offset: a cheap stand-in for a blue-noise tile.
+  vec2 p = vec2(cell) + vec2(float(u_seed & 255u), float((u_seed >> 8u) & 255u));
+  return fract(52.9829189 * fract(dot(p, vec2(0.06711056, 0.00583715))));
+}
+void main() {
+  vec4 c = texture(src, vUv);
+  vec3 s = toSRGB(sat(c.rgb));
+  ivec2 cell = ivec2(floor(FRAG_PX / float(max(u_pixelScale, 1))));
+  float levels = u_paletteSize > 1 ? float(u_paletteSize - 1) : 31.0;
+  vec3 q = floor(s * levels + threshold(cell)) / levels;
+  s = mix(s, sat(q), u_ditherStrength);
+  fragColor = vec4(toLinear(s) + max(c.rgb - 1.0, 0.0), c.a);
+}`;
+
+export class Dither {
+  constructor(glw, { params }) {
+    this.id = "dither";
+    this.category = "filter";
+    this.params = { ...params };
+    this.pass = new Pass(glw, FRAG, { pass: this.id });
+  }
+  shotState(seed) {
+    return { seed };
+  }
+  apply(src, dst, f, state, { stillOverrides } = {}) {
+    const p = this.params;
+    // The blue-noise stand-in is a random source; the poster and reduced-motion still turn it off.
+    const noiseOff = stillOverrides?.noise === 0 && p.mode === 3;
+    this.pass.draw(dst, {
+      src, u_ditherMode: p.mode, u_paletteSize: p.paletteSize, u_pixelScale: p.pixelScale,
+      u_ditherStrength: noiseOff ? 0 : p.strength, u_seed: state.seed,
+    });
+  }
+  manifestParams() {
+    return { mode: this.params.mode, paletteSize: this.params.paletteSize, pixelScale: this.params.pixelScale, strength: this.params.strength };
+  }
+}