@litfamily/litclaude 1.0.10 → 1.0.13

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

@@ -0,0 +1,77 @@
+// glitch (MO-SH-05): horizontal slice offsets, block corruption and an RGB split confined to one
+// band per hit. A hit is one displace held for `holdFrames` frames, then one restore; its schedule
+// is precomputed per shot from the seed and the shot event budget. The band never exceeds the area
+// cap, so a hit can never become a full-frame step (MO-SH-04a), and nothing is inverted.
+import { SHADER } from "../../core/constants.mjs";
+import { glitchCandidates } from "../../core/events.mjs";
+import { mulberry32 } from "../../core/util.mjs";
+import { Pass } from "../gl.mjs";
+
+const FRAG = /* glsl */ `
+uniform sampler2D src; uniform float u_time; uniform uint u_seed; uniform uint u_hitSeed;
+uniform float u_hit, u_intensity, u_maxOffsetPx, u_rgbSplitPx, u_hitRatePerSec, u_areaCapPct;
+uniform int u_sliceCount, u_holdFrames; uniform vec2 u_blockCorruptSize; uniform vec2 u_band;
+void main() {
+  vec2 px = FRAG_PX;
+  float y = LOGICAL.y - px.y;
+  vec4 c = texture(src, vUv);
+  if (u_hit < 0.5 || y < u_band.x || y >= u_band.y) { fragColor = c; return; }
+  float t = (y - u_band.x) / max(u_band.y - u_band.x, 1.0);
+  int slice = int(floor(t * float(u_sliceCount)));
+  float r = unit(uhash3(uvec3(uint(slice), u_hitSeed, u_seed))) * 2.0 - 1.0;
+  float dx = r * u_maxOffsetPx * u_intensity;
+  vec2 cell = floor(px / u_blockCorruptSize);
+  uint blockHash = uhash3(uvec3(uvec2(cell), u_hitSeed));
+  if ((blockHash & 7u) == 0u) dx += (unit(uhash(blockHash)) - 0.5) * u_blockCorruptSize.x * 2.0;
+  vec2 uv = vUv + vec2(dx / LOGICAL.x, 0.0);
+  vec2 split = vec2(u_rgbSplitPx / LOGICAL.x, 0.0);
+  vec4 g = texture(src, uv);
+  fragColor = vec4(texture(src, uv - split).r, g.g, texture(src, uv + split).b, g.a);
+}`;
+
+export class Glitch {
+  constructor(glw, { params, fps }) {
+    this.id = "glitch";
+    this.category = "filter";
+    this.fps = fps;
+    this.params = {
+      ...params,
+      hitRatePerSec: Math.min(SHADER.glitchHitRateCap, params.hitRatePerSec),
+      areaCapPct: Math.min(SHADER.glitchAreaCapPct, params.areaCapPct),
+    };
+    this.pass = new Pass(glw, FRAG, { pass: this.id });
+  }
+  shotState(seed, events, shot) {
+    const p = this.params;
+    const rnd = mulberry32(seed ^ 0x9e3779b9);
+    const hits = [];
+    for (const t of glitchCandidates({ start: shot.start, end: shot.end, rate: p.hitRatePerSec, seed })) {
+      if (!events.add(t, "glitch")) continue;
+      const bandH = (p.areaCapPct / 100) * 1080 * (0.6 + 0.4 * rnd());
+      const y0 = 140 + rnd() * (1080 - 280 - bandH);
+      hits.push({ t, hitSeed: (Math.floor(rnd() * 4294967295) >>> 0), band: [y0, y0 + bandH] });
+    }
+    return { seed, hits, duration: shot.end - shot.start };
+  }
+  activeHit(t, state) {
+    const hold = this.params.holdFrames / this.fps;
+    return state.hits.find((h) => t >= h.t && t < h.t + hold) ?? null;
+  }
+  apply(src, dst, f, state) {
+    const p = this.params;
+    const hit = this.activeHit(f.t, state);
+    this.pass.draw(dst, {
+      src, u_time: f.t, u_seed: state.seed, u_hitSeed: hit ? hit.hitSeed : 0, u_hit: hit ? 1 : 0, u_intensity: p.intensity,
+      u_maxOffsetPx: p.maxOffsetPx, u_rgbSplitPx: p.rgbSplitPx, u_hitRatePerSec: p.hitRatePerSec, u_areaCapPct: p.areaCapPct,
+      u_sliceCount: p.sliceCount, u_holdFrames: p.holdFrames, u_blockCorruptSize: p.blockCorruptSize, u_band: hit ? hit.band : [0, 0],
+    });
+  }
+  manifestParams(state) {
+    const p = this.params;
+    const maxBand = state.hits.reduce((m, h) => Math.max(m, h.band[1] - h.band[0]), 0);
+    return {
+      intensity: p.intensity, hitRatePerSecRealized: +(state.hits.length / Math.max(state.duration, 1e-6)).toFixed(4), areaCapPct: p.areaCapPct,
+      maxHitAreaPct: +((maxBand / 1080) * 100).toFixed(3), holdFrames: p.holdFrames, hitTimes: state.hits.map((h) => +h.t.toFixed(4)),
+    };
+  }
+}

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

@@ -0,0 +1,61 @@
+// swiss-grid (MO-SH-10): layout arithmetic plus a batch of GPU hairline rules. It carries no seed.
+// Scenes place type on its columns and baseline; the pass draws the rules that make the grid
+// visible (a top rule, a bottom rule and column ticks) through one instanced LineBatch draw, which
+// is what the render log counts. Full column guides draw only when showGuides is on, which is a
+// debug aid and a gate FAIL in any export.
+import { hexToLinear } from "../../core/util.mjs";
+import { LineBatch } from "../lines.mjs";
+import { W, H } from "../scale.mjs";
+
+export class SwissGrid {
+  constructor(glw, { params, palette }) {
+    this.id = "swiss-grid";
+    this.category = "layout";
+    this.params = { ...params };
+    this.lines = new LineBatch(glw, 128);
+    this.ruleColor = hexToLinear(palette.dim ?? palette.type);
+    const { columns, gutterPx, marginPx } = this.params;
+    this.colWidth = (W - 2 * marginPx - (columns - 1) * gutterPx) / columns;
+  }
+  /** Left x of column `i` (0-based). */
+  col(i) {
+    const { gutterPx, marginPx } = this.params;
+    return marginPx + i * (this.colWidth + gutterPx);
+  }
+  /** Width spanned by columns a..b inclusive. */
+  span(a, b) {
+    return this.col(b) + this.colWidth - this.col(a);
+  }
+  /** Snap a y to the baseline grid (moduleSnap). */
+  baseline(y) {
+    return this.params.moduleSnap ? Math.round(y / this.params.baselinePx) * this.params.baselinePx : y;
+  }
+  shotState() {
+    return { seed: null };
+  }
+  draw(target, f, record) {
+    const { marginPx, columns, hairlineWidthPx, showGuides } = this.params;
+    const top = 72;
+    const bottom = H - 72;
+    const l = this.lines;
+    l.clear();
+    const alpha = 0.55;
+    const drawn = Math.min(1, f.lt / 0.3);
+    l.segment(marginPx, top, marginPx + (W - 2 * marginPx) * drawn, top, hairlineWidthPx, this.ruleColor, alpha);
+    l.segment(W - marginPx - (W - 2 * marginPx) * drawn, bottom, W - marginPx, bottom, hairlineWidthPx, this.ruleColor, alpha);
+    for (let i = 0; i <= columns; i++) {
+      const x = i === columns ? W - marginPx : this.col(i);
+      l.segment(x, top - 8, x, top, hairlineWidthPx, this.ruleColor, alpha);
+    }
+    if (showGuides) for (let i = 0; i < columns; i++) l.segment(this.col(i), top, this.col(i), bottom, 1, this.ruleColor, 0.25);
+    l.draw(target, { pass: this.id });
+    if (record) {
+      record.elements.push({ elementId: "swiss-grid/top-rule", kind: "rule", bbox: [marginPx, top - 8, W - marginPx, top + 1] });
+      record.elements.push({ elementId: "swiss-grid/bottom-rule", kind: "rule", bbox: [marginPx, bottom - 1, W - marginPx, bottom + 1] });
+    }
+  }
+  manifestParams() {
+    const { columns, gutterPx, marginPx, baselinePx, showGuides } = this.params;
+    return { columns, gutterPx, marginPx, baselinePx, showGuides };
+  }
+}

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

@@ -0,0 +1,88 @@
+// terminal-ui (MO-SH-11): a Canvas2D kit for window chrome, status meters and a caret, drawn crisp
+// on one layer and composited before crt/dither. Its labels and readouts are glyphs, so they go
+// through the type kit like any other text. The seed only drives cosmetic jitter (a readout's last
+// digit); content and pacing come from the brief and the timeline.
+import { mulberry32 } from "../../core/util.mjs";
+import { Layer2D } from "../gl.mjs";
+
+export class TerminalUi {
+  constructor(glw, { params, palette, compositor }) {
+    this.id = "terminal-ui";
+    this.category = "background";
+    this.params = { ...params };
+    this.palette = palette;
+    this.layer = new Layer2D(glw);
+    this.compositor = compositor;
+    this.window = { x: 120, y: 110, w: 1680, h: 860, bar: 44 };
+  }
+  /** The content box scenes lay text into (logical px). */
+  content() {
+    const w = this.window;
+    return { x: w.x + 48, y: w.y + w.bar + 36, w: w.w - 96, h: w.h - w.bar - 120 };
+  }
+  shotState(seed) {
+    return { seed, jitter: mulberry32(seed) };
+  }
+  draw(target, f, state, stage) {
+    const p = this.params;
+    const w = this.window;
+    const c = this.layer.ctx;
+    // Meters: fill follows shot progress, so they move with the timeline, not with noise.
+    const meterY = w.y + w.h - 52;
+    const strip = { x: w.x + 44, y: meterY - 4, w: 300 * (p.meterCount - 1) + 230, h: 22 };
+    const drawMeters = () => {
+      for (let i = 0; i < p.meterCount; i++) {
+        const mx = w.x + 48 + i * 300;
+        const level = 0.25 + 0.7 * ((f.p * (1 + i * 0.35)) % 1);
+        c.strokeStyle = this.palette.dim;
+        c.lineWidth = p.windowChromeWidthPx;
+        c.strokeRect(mx, meterY, 220, 14);
+        c.fillStyle = this.palette.signal;
+        c.fillRect(mx + 2, meterY + 2, 216 * level, 10);
+      }
+    };
+    let texture;
+    if (!this.chromeDrawn) {
+      // The window chrome is the same on every frame of the film: drawn and uploaded once.
+      this.layer.clear();
+      c.fillStyle = this.palette.panel;
+      c.fillRect(w.x, w.y, w.w, w.h);
+      c.strokeStyle = this.palette.dim;
+      c.lineWidth = p.windowChromeWidthPx;
+      c.strokeRect(w.x + 0.75, w.y + 0.75, w.w - 1.5, w.h - 1.5);
+      c.beginPath();
+      c.moveTo(w.x, w.y + w.bar);
+      c.lineTo(w.x + w.w, w.y + w.bar);
+      c.stroke();
+      for (let i = 0; i < 3; i++) c.strokeRect(w.x + 18 + i * 22, w.y + 15, 12, 12);
+      drawMeters();
+      texture = this.layer.upload();
+      this.chromeDrawn = true;
+    } else {
+      // Only the meter strip changes: repaint it on the panel and re-upload that rectangle.
+      c.fillStyle = this.palette.panel;
+      c.fillRect(strip.x, strip.y, strip.w, strip.h);
+      drawMeters();
+      texture = this.layer.uploadRegion(strip.x, strip.y, strip.w, strip.h);
+    }
+    this.compositor.draw(texture, target, { mode: "normal", logAs: this.id });
+    if (stage.record) {
+      stage.record.elements.push({ elementId: "terminal-ui/window", kind: "window", bbox: [w.x, w.y, w.x + w.w, w.y + w.h] });
+      stage.record.fills.push({ elementId: "terminal-ui/panel", color: this.palette.panel, bbox: [w.x, w.y, w.x + w.w, w.y + w.h] });
+    }
+    // Chrome text sits in the corners, where the crt vignette and scanlines darken it below 4.5:1 in
+    // status grey, so it is set in the signal hue (15:1 on navy); grey stays on strokes.
+    if (stage.labelText) {
+      const label = stage.type.layout(stage.labelText, { voice: "chrome", size: 20 });
+      stage.type.drawLine(stage.glyphs, label, w.x + 96, w.y + 30, { fill: this.palette.type, elementId: "terminal-ui/title" });
+    }
+    // A readout whose last digit jitters with the seed: cosmetic only, never content or timing.
+    const frameDigit = Math.floor(mulberry32((state.seed ^ Math.floor(f.t * 12)) >>> 0)() * 10);
+    const readout = stage.type.layout(`T+${f.t.toFixed(1).padStart(5, "0")}${frameDigit}`, { voice: "machine", size: 22 });
+    stage.type.drawLine(stage.glyphs, readout, w.x + w.w - 48, meterY + 12, { fill: this.palette.type, align: "right", elementId: "terminal-ui/readout" });
+  }
+  manifestParams() {
+    const p = this.params;
+    return { compositedThrough: ["crt", "dither"], meterCount: p.meterCount, logLineRateCharsPerSec: p.logLineRateCharsPerSec, wordTimingSource: "reading-time", layers: 1 };
+  }
+}

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

@@ -0,0 +1,86 @@
+// tidal-gradient (MO-SH-06): a slow domain-warped flow field that mixes the preset's 2-3 palette
+// stops into the background. The noise origin is drawn once per shot from the pass seed; surges are
+// smooth attack/decay envelopes placed through the shot event budget, never an instant step.
+import { SHADER } from "../../core/constants.mjs";
+import { hexToLinear, mulberry32 } from "../../core/util.mjs";
+import { Pass } from "../gl.mjs";
+
+const FRAG = /* glsl */ `
+uniform float u_time; uniform uint u_seed; uniform vec3 u_stop0; uniform vec3 u_stop1; uniform vec3 u_stop2;
+uniform float u_flowSpeed, u_warpAmount, u_curlStrength, u_surge, u_ditherAmount; uniform int u_octaves, u_bandingSteps;
+uniform vec2 u_origin;
+void main() {
+  vec2 p = (FRAG_PX / LOGICAL.y) * 1.35 + u_origin;
+  float z = u_time * u_flowSpeed * 2.0;
+  vec2 flow = curl(p * 0.7, z, u_seed) * u_curlStrength * 0.08;
+  float warp = fbm(vec3(p * 0.9 + flow, z), u_octaves, u_seed ^ 0xa511e9b3u);
+  vec2 q = p + vec2(warp, -warp) * (u_warpAmount * (1.0 + 0.6 * u_surge)) + flow + vec2(u_time * u_flowSpeed, 0.0);
+  float v = fbm(vec3(q, z * 0.5), u_octaves, u_seed) * 0.5 + 0.5;
+  v = smoothstep(0.15, 0.95, v);
+  if (u_bandingSteps > 0) v = floor(v * float(u_bandingSteps)) / float(u_bandingSteps);
+  vec3 col = v < 0.5 ? mix(u_stop0, u_stop1, v * 2.0) : mix(u_stop1, u_stop2, (v - 0.5) * 2.0);
+  col *= 1.0 + 0.35 * u_surge;
+  if (u_ditherAmount > 0.0) {
+    vec3 s = toSRGB(col);
+    s += (unit(uhash3(uvec3(uvec2(FRAG_PX), uint(u_time * 600.0)))) - 0.5) * u_ditherAmount * 0.25;
+    col = toLinear(sat(s));
+  }
+  fragColor = vec4(col, 0.0);
+}`;
+
+/** Surge envelope: rises over `attack`, decays over `decay` (both floored at 0.1 s). */
+export function surgeEnvelope(t, times, attack, decay) {
+  let env = 0;
+  for (const t0 of times) {
+    if (t < t0) continue;
+    const dt = t - t0;
+    const e = dt < attack ? dt / attack : Math.max(0, 1 - (dt - attack) / decay);
+    env = Math.max(env, e * e * (3 - 2 * e));
+  }
+  return env;
+}
+
+export class TidalGradient {
+  constructor(glw, { params, palette, software }) {
+    this.id = "tidal-gradient";
+    this.category = "background";
+    const octaves = software ? SHADER.softwareOctaves(params.octaves) : params.octaves;
+    this.params = {
+      ...params,
+      octaves,
+      surgeAttackSec: Math.max(SHADER.surgeAttackFloor, params.surgeAttackSec),
+      surgeDecaySec: Math.max(SHADER.surgeDecayFloor, params.surgeDecaySec),
+      surgeCapPerSec: Math.min(SHADER.surgeRateCap, params.surgeCapPerSec),
+    };
+    this.downgraded = Boolean(software);
+    this.stopsHex = [palette.bg, palette.stopA, palette.stopB];
+    this.stops = this.stopsHex.map(hexToLinear);
+    this.pass = new Pass(glw, FRAG, { pass: this.id });
+  }
+  shotState(seed, events, shot) {
+    const rnd = mulberry32(seed);
+    const origin = [rnd() * 40, rnd() * 40];
+    // One surge on the shot's opening beat and one past its middle, each only if the event budget
+    // allows it; surges punctuate, they never pulse on every beat.
+    const surges = [];
+    for (const t of [shot.start + 0.05, shot.start + (shot.end - shot.start) * 0.55]) if (events.add(t, "surge")) surges.push(t);
+    return { seed, origin, surges };
+  }
+  draw(target, f, state, { stillOverrides } = {}) {
+    const p = this.params;
+    this.pass.draw(target, {
+      u_time: f.t, u_seed: state.seed, u_stop0: this.stops[0], u_stop1: this.stops[1], u_stop2: this.stops[2],
+      u_flowSpeed: p.flowSpeed, u_warpAmount: p.warpAmount, u_curlStrength: p.curlStrength, u_octaves: p.octaves,
+      u_surge: p.surgeOnHit * surgeEnvelope(f.t, state.surges, p.surgeAttackSec, p.surgeDecaySec),
+      u_ditherAmount: stillOverrides?.noise === 0 ? 0 : p.ditherAmount, u_bandingSteps: p.bandingSteps, u_origin: state.origin,
+    });
+  }
+  manifestParams(state) {
+    const p = this.params;
+    return {
+      paletteStopsHex: this.stopsHex, octaves: p.octaves, flowSpeed: p.flowSpeed, surgeCountRealized: state.surges.length,
+      surgeTimes: state.surges.map((t) => +t.toFixed(4)), surgeAttackSec: p.surgeAttackSec, surgeDecaySec: p.surgeDecaySec,
+      surgeCapPerSec: p.surgeCapPerSec,
+    };
+  }
+}

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

@@ -0,0 +1,165 @@
+// The global post chain, run once per output frame on the averaged linear-HDR composite, in the
+// fixed order bloom + halation -> chromatic aberration -> tone shoulder -> grain -> vignette ->
+// flash -> shake/zoom -> invert (MO-A-58, MO-A-29). The sRGB transfer is applied exactly once, in
+// the final pass, which also flips rows so a readback yields top-to-bottom bytes. The alpha channel
+// carries the glyph-coverage mask through every geometric step, so the mask the gate reads lines up
+// with the colour it samples. Adapted from mexicat/pdoom-video app/src/engine/post.ts (MIT, see
+// ../NOTICE); the bloom pyramid follows the same prefilter/downsample/upsample shape.
+import { POST_FIELDS } from "../core/constants.mjs";
+import { Pass, W, H } from "./gl.mjs";
+
+const MIPS = 6;
+
+const PREFILTER = /* glsl */ `
+uniform sampler2D src; uniform vec2 texel; uniform float threshold, knee;
+void main() {
+  vec3 c = 0.25 * (texture(src, vUv + texel * vec2(-1.0, -1.0)).rgb + texture(src, vUv + texel * vec2(1.0, -1.0)).rgb
+    + texture(src, vUv + texel * vec2(-1.0, 1.0)).rgb + texture(src, vUv + texel * vec2(1.0, 1.0)).rgb);
+  c = min(c, vec3(32.0));
+  float l = max(c.r, max(c.g, c.b));
+  float k = max(knee, 1e-4);
+  float soft = clamp(l - threshold + k, 0.0, 2.0 * k);
+  soft = soft * soft / (4.0 * k);
+  float w = max(soft, l - threshold) / max(l, 1e-5);
+  fragColor = vec4(c * w, 1.0);
+}`;
+
+const DOWN = /* glsl */ `
+uniform sampler2D src; uniform vec2 texel;
+void main() {
+  vec3 o = texture(src, vUv).rgb * 0.25;
+  o += (texture(src, vUv + texel * vec2(-1.0, -1.0)).rgb + texture(src, vUv + texel * vec2(1.0, -1.0)).rgb
+    + texture(src, vUv + texel * vec2(-1.0, 1.0)).rgb + texture(src, vUv + texel * vec2(1.0, 1.0)).rgb) * 0.125;
+  o += (texture(src, vUv + texel * vec2(-2.0, 0.0)).rgb + texture(src, vUv + texel * vec2(2.0, 0.0)).rgb
+    + texture(src, vUv + texel * vec2(0.0, -2.0)).rgb + texture(src, vUv + texel * vec2(0.0, 2.0)).rgb) * 0.0625;
+  fragColor = vec4(o, 1.0);
+}`;
+
+const UP = /* glsl */ `
+uniform sampler2D src; uniform sampler2D prev; uniform vec2 texel; uniform float radius;
+void main() {
+  vec2 o = texel * radius;
+  vec3 s = texture(src, vUv - o).rgb + 2.0 * texture(src, vUv + vec2(0.0, -o.y)).rgb + texture(src, vUv + vec2(o.x, -o.y)).rgb
+    + 2.0 * texture(src, vUv + vec2(-o.x, 0.0)).rgb + 4.0 * texture(src, vUv).rgb + 2.0 * texture(src, vUv + vec2(o.x, 0.0)).rgb
+    + texture(src, vUv + vec2(-o.x, o.y)).rgb + 2.0 * texture(src, vUv + vec2(0.0, o.y)).rgb + texture(src, vUv + o).rgb;
+  fragColor = vec4(texture(prev, vUv).rgb + s / 16.0, 1.0);
+}`;
+
+// Linear stage: everything before the geometric steps. Output stays linear HDR.
+const LINEAR_STAGE = /* glsl */ `
+uniform sampler2D src; uniform sampler2D bloomTex; uniform sampler2D haloTex;
+uniform float exposure, bloom, halation, ca, grain, vignette, fade, flash, frameTime;
+uniform vec3 flashColor; uniform vec3 haloColor;
+vec3 composite(vec2 uv) {
+  return texture(src, uv).rgb * exposure + texture(bloomTex, uv).rgb * bloom + haloColor * luma(texture(haloTex, uv).rgb) * halation;
+}
+vec3 shoulder(vec3 x) {
+  const float k = 0.72;
+  vec3 y = mix(x, k + (1.0 - k) * (1.0 - exp(-(x - k) / (1.0 - k))), step(k, x));
+  float over = max(max(x.r, x.g), x.b);
+  return mix(y, vec3(1.0), smoothstep(2.0, 12.0, over) * 0.85);
+}
+void main() {
+  vec2 dc = vUv - 0.5;
+  vec2 aspect = vec2(LOGICAL.x / LOGICAL.y, 1.0);
+  float r2 = dot(dc * aspect, dc * aspect);
+  vec2 off = dc * r2 * ca / LOGICAL.x * 4.0;
+  vec3 col = vec3(composite(vUv + off).r, composite(vUv).g, composite(vUv - off).b);
+  col = shoulder(col);
+  if (grain > 0.0) {
+    // Grain is sized in display (sRGB) units like film grain, so it is added through a transfer
+    // round trip; the output encode still happens once, in the final stage.
+    vec3 s = toSRGB(sat(col));
+    uint seed = uint(floor(frameTime * 60000.0 + 0.5));
+    float g1 = unit(uhash3(uvec3(uvec2(FRAG_PX), seed))) - 0.5;
+    float g2 = unit(uhash3(uvec3(uvec2(floor(FRAG_PX / 2.0)), seed ^ 0x5bd1e995u))) - 0.5;
+    float lm = luma(s);
+    s += (g1 * 0.6 + g2 * 0.4) * grain * (0.55 + 1.2 * lm * (1.0 - lm));
+    col = toLinear(sat(s));
+  }
+  float v = smoothstep(0.95, 0.25, length(dc * vec2(1.0, 0.8)));
+  col *= mix(1.0, v, vignette);
+  col *= fade;
+  col += flashColor * flash;
+  fragColor = vec4(col, texture(src, vUv).a);
+}`;
+
+// Geometric + output stage: shake/zoom, invert, the single sRGB encode, row flip for readback.
+const OUTPUT_STAGE = /* glsl */ `
+uniform sampler2D src; uniform float zoom; uniform vec2 shake; uniform bool invertFrame;
+void main() {
+  vec2 uv = vec2(vUv.x, 1.0 - vUv.y);
+  uv = (uv - 0.5) / zoom + 0.5 + vec2(-shake.x, shake.y) / LOGICAL;
+  vec4 c = texture(src, uv);
+  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) c = vec4(0.0);
+  vec3 col = sat(c.rgb);
+  if (invertFrame) col = vec3(1.0) - col;
+  fragColor = vec4(toSRGB(col), c.a);
+}`;
+
+/** Clamp a post-override object to the MO-A-58 contract and fill neutral values. */
+export function normalizePost(values) {
+  const out = {};
+  for (const [field, rule] of Object.entries(POST_FIELDS)) {
+    const v = values[field];
+    if (rule.pair) out[field] = Array.isArray(v) && v.length === 2 ? [+v[0] || 0, +v[1] || 0] : [...rule.neutral];
+    else if (rule.boolean) out[field] = v === true;
+    else {
+      const n = typeof v === "number" && Number.isFinite(v) ? v : rule.neutral;
+      out[field] = Math.min(rule.max, Math.max(rule.exclusiveMin ? Math.max(rule.min, 1e-4) : rule.min, n));
+    }
+  }
+  return out;
+}
+
+export class Post {
+  constructor(glw) {
+    this.glw = glw;
+    this.prefilter = new Pass(glw, PREFILTER);
+    this.down = new Pass(glw, DOWN);
+    this.up = new Pass(glw, UP);
+    this.linear = new Pass(glw, LINEAR_STAGE);
+    this.output = new Pass(glw, OUTPUT_STAGE);
+    this.mips = [];
+    this.ups = [];
+    let w = W >> 1;
+    let h = H >> 1;
+    for (let i = 0; i < MIPS; i++) {
+      this.mips.push(glw.target(Math.max(2, w), Math.max(2, h)));
+      this.ups.push(glw.target(Math.max(2, w), Math.max(2, h)));
+      w >>= 1;
+      h >>= 1;
+    }
+    this.black = glw.target(2, 2);
+    glw.clear(this.black, [0, 0, 0], 0);
+    this.mid = glw.target();
+  }
+
+  /** src: averaged linear HDR (alpha = glyph mask). out: RGBA8 target, rows flipped for readback. */
+  render(src, out, params, { frameTime, flashColor, haloColor = [1, 0.18, 0.04] }) {
+    const p = normalizePost(params);
+    let bloomTex = this.black.tex;
+    let haloTex = this.black.tex;
+    if (p.bloom > 0 || p.halation > 0) {
+      this.prefilter.draw(this.mips[0], { src, texel: [1 / W, 1 / H], threshold: p.bloomThreshold, knee: p.bloomKnee });
+      for (let i = 1; i < MIPS; i++) {
+        const s = this.mips[i - 1];
+        this.down.draw(this.mips[i], { src: s.tex, texel: [1 / s.width, 1 / s.height] });
+      }
+      let prev = this.mips[MIPS - 1].tex;
+      for (let i = MIPS - 2; i >= 0; i--) {
+        const small = i === MIPS - 2 ? this.mips[MIPS - 1] : this.ups[i + 1];
+        this.up.draw(this.ups[i], { src: prev, prev: this.mips[i].tex, texel: [1 / small.width, 1 / small.height], radius: 0.5 + p.bloomRadius });
+        prev = this.ups[i].tex;
+      }
+      bloomTex = this.ups[0].tex;
+      haloTex = this.ups[Math.min(3, MIPS - 2)].tex;
+    }
+    this.linear.draw(this.mid, {
+      src, bloomTex, haloTex, exposure: p.exposure, bloom: p.bloom / 3, halation: p.halation, ca: p.ca, grain: p.grain,
+      vignette: p.vignette, fade: p.fade, flash: p.flash, frameTime, flashColor, haloColor,
+    });
+    this.output.draw(out, { src: this.mid.tex, zoom: p.zoom, shake: p.shake, invertFrame: p.invert });
+    return p;
+  }
+}

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

@@ -0,0 +1,15 @@
+// Output scale, read once from the page URL (`?scale=2` renders 3840x2160). Scenes keep laying out
+// in logical 1920x1080 px at every scale. Adapted from mexicat/pdoom-video app/src/engine/scale.ts
+// (MIT, see ../NOTICE).
+function readScale() {
+  if (typeof location === "undefined") return 1;
+  const value = Math.round(Number(new URLSearchParams(location.search).get("scale") ?? "1"));
+  return Number.isFinite(value) && value >= 1 ? Math.min(value, 4) : 1;
+}
+
+/** Physical px per logical px (integer 1..4). */
+export const SCALE = readScale();
+export const W = 1920;
+export const H = 1080;
+export const PW = W * SCALE;
+export const PH = H * SCALE;

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

@@ -0,0 +1,82 @@
+// Scene contract (MO-A-05, MO-A-06). A scene is built once per shot and renders any time `f.t`
+// inside its window as a pure function of `f` (and the run seed). A scene that carries state sets
+// `stateful = true` and `prerollMax`, keeps a finite memory no longer than `prerollMax`, and updates
+// it only in `advance(f)`; after a seek the engine resets it and replays `advance` over the
+// preroll, so a seeked render matches the sequential one byte for byte. Adapted from
+// mexicat/pdoom-video app/src/engine/scene.ts (MIT, see ../NOTICE).
+//
+// `render(f, stage)` draws glyphs through stage.type onto stage.glyphs, non-glyph marks through
+// stage.lines / stage.mark, and returns post-chain overrides for this frame (MO-A-58).
+import { W, H } from "./scale.mjs";
+
+/**
+ * Entrance opacity: type is already partly visible on the frame it lands on, so a hard cut never
+ * shows an empty frame, then settles to full over `dur` seconds.
+ */
+export const landing = (since, dur = 0.12) => (since < 0 ? 0 : Math.min(1, 0.4 + 0.6 * (since / dur)));
+
+export class Scene {
+  constructor(ctx) {
+    this.ctx = ctx;
+    this.stateful = false;
+    this.prerollMax = 0;
+  }
+  init() {}
+  reset() {}
+  advance() {}
+  render() {
+    return {};
+  }
+
+  /** The box text may occupy: the title-safe area, or the terminal content box. */
+  box() {
+    if (this.ctx.terminal) return this.ctx.terminal.content();
+    return { x: 120, y: 96, w: W - 240, h: H - 192 };
+  }
+
+  /** Largest size <= max at which `text` fits `width` in `voice` (layout is linear in size). */
+  fit(stage, text, voice, width, max, opts = {}) {
+    const probe = stage.type.layout(text, { voice, size: 100, ...opts });
+    const size = Math.min(max, (100 * width) / Math.max(1, probe.width));
+    return this.snapSize(size, voice);
+  }
+
+  /** Galmuri renders only at whole multiples of its 9 px grid, at least 4x (MO-FT-07). */
+  snapSize(size, voice) {
+    const v = this.ctx.voices[voice];
+    if (v?.hangul === "galmuri9") return Math.max(36, Math.floor(size / 9) * 9);
+    return Math.floor(size);
+  }
+
+  /** Wrap text into lines that fit `width` at `size`, breaking only between eojeol. */
+  wrap(stage, text, voice, size, width, opts = {}) {
+    const words = text.trim().split(/\s+/u);
+    const lines = [];
+    let line = "";
+    for (const word of words) {
+      const candidate = line ? `${line} ${word}` : word;
+      if (!line || stage.type.layout(candidate, { voice, size, ...opts }).width <= width) line = candidate;
+      else {
+        lines.push(line);
+        line = word;
+      }
+    }
+    if (line) lines.push(line);
+    return lines;
+  }
+
+  /**
+   * Fit `text` into `width` x `maxLines`: shrink from `max` until the eojeol-wrapped block fits.
+   * Returns { size, lines } with lines laid out.
+   */
+  fitBlock(stage, text, voice, width, max, maxLines = 3, opts = {}) {
+    let size = this.snapSize(max, voice);
+    for (;;) {
+      const lines = this.wrap(stage, text, voice, size, width, opts);
+      if ((lines.length <= maxLines && lines.every((l) => stage.type.layout(l, { voice, size, ...opts }).width <= width)) || size <= 24) {
+        return { size, lines: lines.map((l) => stage.type.layout(l, { voice, size, ...opts })) };
+      }
+      size = this.snapSize(size * 0.92, voice);
+    }
+  }
+}

package/plugins/litclaude/skills/lit-typographic-motion/engine/web/scenes/end-card.mjs

@@ -0,0 +1,30 @@
+// end-card: the closing statement and its credit line, settled. Its last frame is the film's final
+// text state, which the reduced-motion still reproduces. The preset's one accent (if it has one)
+// appears here only, as a small mark, inside the window the engine grants (<= 10% of frames).
+import { clamp, ease } from "../../core/util.mjs";
+import { Scene, landing } from "../scene.mjs";
+
+export default class EndCard extends Scene {
+  render(f, stage) {
+    const { palette, presetId, shot, accentWindow } = this.ctx;
+    const box = this.box();
+    const settle = presetId === "tidal" ? ease.drift(clamp(f.lt / 1.2)) : ease.slam(clamp(f.lt / 0.18));
+    const { size, lines } = this.fitBlock(stage, shot.text, "display", box.w * 0.85, presetId === "terminalcore" ? 90 : 140, 3);
+    const lineHeight = 1.6;
+    const blockH = (lines.length - 1) * size * lineHeight;
+    const centered = presetId === "tidal";
+    const x = centered ? 960 : box.x;
+    const y0 = (presetId === "terminalcore" ? box.y + box.h / 2 : 520) - blockH / 2 + size * 0.3 + (1 - settle) * 16;
+    stage.type.drawBlock(stage.glyphs, lines, x, y0, { lineHeight, fill: palette.type, alpha: landing(f.lt, 0.15), align: centered ? "center" : "left", elementId: "end" });
+    const subY = y0 + blockH + Math.max(72, size * 0.8);
+    if (shot.sub) {
+      const s = stage.type.layout(shot.sub, { voice: "machine", size: 30 });
+      stage.type.drawLine(stage.glyphs, s, x, subY, { fill: palette.type, alpha: landing(f.lt - 0.2, 0.3), align: centered ? "center" : "left", elementId: "end/sub" });
+    }
+    if (accentWindow && f.t >= accentWindow.start && f.t < accentWindow.end) {
+      const mx = centered ? 960 - 16 : box.x;
+      stage.mark({ x: mx, y: subY + 28, w: 32, h: 32 }, palette.accent, "end/accent", "accent");
+    }
+    return {};
+  }
+}

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

@@ -0,0 +1,16 @@
+// Starter scene registry. Brief shots name one of these ids.
+import TitleSlam from "./title-slam.mjs";
+import KaraokeLine from "./karaoke-line.mjs";
+import KineticList from "./kinetic-list.mjs";
+import NumberCounter from "./number-counter.mjs";
+import Signature from "./signature.mjs";
+import EndCard from "./end-card.mjs";
+
+export const SCENES = Object.freeze({
+  "title-slam": TitleSlam,
+  "karaoke-line": KaraokeLine,
+  "kinetic-list": KineticList,
+  "number-counter": NumberCounter,
+  signature: Signature,
+  "end-card": EndCard,
+});