@litfamily/litopencode 1.0.7 → 1.0.10

package/skills/lit-typographic-motion/engine/page/lines.js

@@ -0,0 +1,88 @@
+// Browser side, part 3: GPU-instanced anti-aliased capsule segments in logical 2D px (x right,
+// y down). swiss-grid draws its hairline rules with one instanced call; scenes use the same batch
+// for small graphic marks. Colours are linear RGB, alpha 0..1.
+(() => {
+  const LTM = window.LTM;
+
+  LTM.createLineBatch = (core, capacity = 512) => {
+    const { gl } = core;
+    const vertex = `#version 300 es
+in vec2 a_corner; in vec2 i_a; in vec2 i_b; in vec4 i_color; in float i_width;
+uniform vec2 u_logical; uniform float u_scale;
+out vec2 v_local; out float v_len; out float v_half; out vec4 v_color;
+void main() {
+  vec2 a = i_a * u_scale, b = i_b * u_scale;
+  float w = i_width * u_scale;
+  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, a_corner.x);
+  vec2 p = a + dir * along + nrm * a_corner.y * hw;
+  vec2 res = u_logical * u_scale;
+  gl_Position = vec4(p.x / res.x * 2.0 - 1.0, 1.0 - p.y / res.y * 2.0, 0.0, 1.0);
+  v_local = vec2(along, a_corner.y * hw); v_len = len; v_half = max(w * 0.5, 0.35);
+  v_color = i_color * vec4(1.0, 1.0, 1.0, min(1.0, w / 0.7));
+}`;
+    const fragment = `#version 300 es
+precision highp float;
+in vec2 v_local; in float v_len; in float v_half; in vec4 v_color;
+out vec4 fragColor;
+void main() {
+  float x = clamp(v_local.x, 0.0, v_len);
+  float d = length(vec2(v_local.x - x, v_local.y)) - v_half;
+  float a = clamp(0.5 - d, 0.0, 1.0) * v_color.a;
+  if (a <= 0.0) discard;
+  fragColor = vec4(v_color.rgb * a, a);
+}`;
+    const program = core.program(vertex, fragment, ["a_corner", "i_a", "i_b", "i_color", "i_width"]);
+    const vao = gl.createVertexArray();
+    gl.bindVertexArray(vao);
+    const corners = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, corners);
+    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);
+    const stride = 9 * 4;
+    const data = new Float32Array(capacity * 9);
+    const instances = gl.createBuffer();
+    gl.bindBuffer(gl.ARRAY_BUFFER, instances);
+    gl.bufferData(gl.ARRAY_BUFFER, data.byteLength, gl.DYNAMIC_DRAW);
+    const attr = (index, size, offset) => {
+      gl.enableVertexAttribArray(index);
+      gl.vertexAttribPointer(index, size, gl.FLOAT, false, stride, offset * 4);
+      gl.vertexAttribDivisor(index, 1);
+    };
+    attr(1, 2, 0); attr(2, 2, 2); attr(3, 4, 4); attr(4, 1, 8);
+    gl.bindVertexArray(null);
+    let count = 0;
+    const uLogical = gl.getUniformLocation(program, "u_logical");
+    const uScale = gl.getUniformLocation(program, "u_scale");
+    return {
+      clear() { count = 0; },
+      get count() { return count; },
+      seg(ax, ay, bx, by, width, rgb, alpha = 1) {
+        if (count >= capacity) throw new Error("line batch capacity exceeded");
+        data.set([ax, ay, bx, by, rgb[0], rgb[1], rgb[2], alpha, width], count * 9);
+        count += 1;
+      },
+      // Draws premultiplied over `target`. Returns the number of draw calls issued (0 or 1).
+      draw(target) {
+        if (count === 0) return 0;
+        core.bindTarget(target);
+        gl.useProgram(program);
+        gl.uniform2f(uLogical, 1920, 1080);
+        gl.uniform1f(uScale, core.scale);
+        gl.enable(gl.BLEND);
+        gl.blendFuncSeparate(gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.bindVertexArray(vao);
+        gl.bindBuffer(gl.ARRAY_BUFFER, instances);
+        gl.bufferSubData(gl.ARRAY_BUFFER, 0, data.subarray(0, count * 9));
+        gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, count);
+        gl.bindVertexArray(null);
+        gl.disable(gl.BLEND);
+        return 1;
+      }
+    };
+  };
+})();

package/skills/lit-typographic-motion/engine/page/passes.js

@@ -0,0 +1,144 @@
+// Browser side, part 4: the six look-library passes (MO-SH-05..11), original GLSL written against
+// the spec's uniform tables. Every pass writes its uniforms through Pass.set (logged) and counts its
+// draw calls, so the gate can prove per-frame GLSL coverage (MO-SH-00a/00b, MO-C-01).
+(() => {
+  const LTM = window.LTM;
+
+  LTM.createPasses = (core) => {
+    const { Pass } = core;
+    const passes = {};
+
+    passes["tidal-gradient"] = new Pass("tidal-gradient", `
+uniform float u_time; uniform uint u_seed;
+uniform vec3 u_background; uniform vec3 u_stopA; uniform vec3 u_stopB;
+uniform float u_flowSpeed; uniform float u_warpAmount; uniform float u_curlStrength; uniform int u_octaves;
+uniform float u_surge; uniform float u_surgeOnHit; uniform int u_bandingSteps; uniform float u_ditherAmount; uniform vec2 u_origin;
+void main() {
+  vec2 px = logicalPx();
+  vec2 p = px / LOGICAL_H;
+  float t = u_time * u_flowSpeed;
+  vec2 q = p * 1.4 + u_origin;
+  vec2 flow = curl2(q * 0.7 + vec2(t, -t), u_seed) * u_curlStrength * 0.08;
+  vec2 warp = vec2(fbm(q + vec2(0.0, t), u_octaves, u_seed), fbm(q + vec2(5.2, 1.3) - vec2(t, 0.0), u_octaves, u_seed + 7u));
+  float k = fbm(q + u_warpAmount * warp + flow + vec2(t * 0.5), u_octaves, u_seed + 13u);
+  k = sat1(0.5 + 0.9 * k + 0.35 * (px.x / LOGICAL_W - 0.5) - 0.2 * (px.y / LOGICAL_H - 0.5));
+  k = sat1(k + 0.06 * u_surge * u_surgeOnHit);
+  if (u_bandingSteps > 0) k = floor(k * float(u_bandingSteps)) / float(u_bandingSteps);
+  vec3 col = mix(u_background, u_stopA, smoothstep(0.1, 0.55, k));
+  col = mix(col, u_stopB, smoothstep(0.5, 0.95, k));
+  vec3 s = toSRGB(col) + (hashU(uvec3(uvec2(gl_FragCoord.xy), u_seed)) - 0.5) * u_ditherAmount;
+  fragColor = vec4(toLinear(sat3(s)), 1.0);
+}`);
+
+    passes.crt = new Pass("crt", `
+uniform sampler2D u_src; uniform sampler2D u_ring0; uniform sampler2D u_ring1; uniform sampler2D u_ring2; uniform int u_ringCount;
+uniform float u_time; uniform uint u_seed; uniform vec3 u_background;
+uniform float u_scanlineFreqPerFrame; uniform float u_scanlineDepth; uniform float u_phosphorPersistence; uniform float u_bloomAmount;
+uniform float u_curvature; uniform float u_vignette; uniform float u_triadMaskAmount; uniform float u_flickerAmp; uniform float u_flickerFreqHz;
+vec2 barrel(vec2 uv) { vec2 dc = uv - 0.5; return uv + dc * dot(dc, dc) * u_curvature; }
+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(u_background * 0.6, 1.0); return; }
+  vec3 col = texture(u_src, uv).rgb;
+  vec3 glow = (texture(u_src, uv + vec2(1.5, 0.0) / u_res).rgb + texture(u_src, uv - vec2(1.5, 0.0) / u_res).rgb) * 0.5;
+  col += glow * u_bloomAmount * 0.25;
+  if (u_ringCount > 0) col = max(col, texture(u_ring0, uv).rgb * u_phosphorPersistence * 2.0);
+  if (u_ringCount > 1) col = max(col, texture(u_ring1, uv).rgb * u_phosphorPersistence * 1.2);
+  if (u_ringCount > 2) col = max(col, texture(u_ring2, uv).rgb * u_phosphorPersistence * 0.6);
+  vec2 px = logicalPx();
+  float line = 0.5 + 0.5 * cos(6.28318530718 * px.y * u_scanlineFreqPerFrame / LOGICAL_H);
+  col *= 1.0 - u_scanlineDepth * (1.0 - line);
+  int column = int(floor(px.x)) % 3;
+  vec3 triad = column == 0 ? vec3(1.0, 0.92, 0.92) : column == 1 ? vec3(0.92, 1.0, 0.92) : vec3(0.92, 0.92, 1.0);
+  float grain = hashU(uvec3(uvec2(px), u_seed));
+  col *= mix(vec3(1.0), triad * (0.96 + 0.08 * grain), u_triadMaskAmount);
+  vec2 dc = vUv - 0.5;
+  col *= mix(1.0, smoothstep(0.85, 0.2, length(dc * vec2(1.0, 0.85))), u_vignette);
+  col *= 1.0 + 0.5 * min(u_flickerAmp, 0.06) * sin(6.28318530718 * u_flickerFreqHz * u_time);
+  fragColor = vec4(col, 1.0);
+}`);
+
+    passes.dither = new Pass("dither", `
+uniform sampler2D u_src; uniform int u_ditherMode; uniform int u_paletteSize; uniform int u_pixelScale;
+uniform float u_ditherStrength; uniform uint u_seed; uniform bool u_noiseOn;
+float bayer2(ivec2 p) { return float(2 * ((p.x ^ p.y) & 1) + (p.y & 1)) / 4.0; }
+float bayer4(ivec2 p) { return (bayer2(p) + bayer2(p >> 1) / 4.0); }
+float bayer8(ivec2 p) { return (bayer2(p) + bayer2(p >> 1) / 4.0 + bayer2(p >> 2) / 16.0); }
+float threshold(ivec2 cell) {
+  if (u_ditherMode == 0) return bayer2(cell) + 0.125;
+  if (u_ditherMode == 1) return bayer4(cell) + 0.03125;
+  if (u_ditherMode == 2) return bayer8(cell) + 0.0078125;
+  if (!u_noiseOn) return bayer4(cell) + 0.03125;
+  uint off = pcg(u_seed);
+  vec2 q = vec2(cell) + vec2(float(off & 255u), float((off >> 8u) & 255u));
+  return fract(52.9829189 * fract(dot(q, vec2(0.06711056, 0.00583715))));
+}
+void main() {
+  vec2 px = logicalPx();
+  ivec2 cell = ivec2(floor(px / float(u_pixelScale)));
+  vec2 centre = (vec2(cell) + 0.5) * float(u_pixelScale);
+  vec2 uv = vec2(centre.x / LOGICAL_W, 1.0 - centre.y / LOGICAL_H);
+  vec3 col = texture(u_src, u_pixelScale > 1 ? uv : vUv).rgb;
+  vec3 over = max(col - 1.0, 0.0);
+  vec3 s = toSRGB(min(col, 1.0));
+  float th = threshold(cell);
+  if (u_paletteSize >= 2) {
+    float levels = float(u_paletteSize - 1);
+    s = floor(s * levels + mix(0.5, th, u_ditherStrength)) / levels;
+  } else {
+    s += (th - 0.5) * u_ditherStrength / 32.0;
+  }
+  fragColor = vec4(toLinear(sat3(s)) + over, 1.0);
+}`);
+
+    passes.glitch = new Pass("glitch", `
+uniform sampler2D u_src; uniform float u_time; uniform uint u_seed; uniform float u_intensity;
+uniform int u_hit; uniform int u_sliceCount; uniform vec3 u_slices[12]; uniform vec4 u_blocks[3]; uniform vec2 u_blockCorruptSize;
+uniform float u_rgbSplitPx; uniform float u_hitRatePerSec; uniform float u_areaCapPct; uniform int u_holdFrames; uniform float u_maxOffsetPx;
+vec3 fetch(vec2 px) { return texture(u_src, vec2(px.x / LOGICAL_W, 1.0 - px.y / LOGICAL_H)).rgb; }
+void main() {
+  vec2 px = logicalPx();
+  if (u_hit == 0) { fragColor = vec4(texture(u_src, vUv).rgb, 1.0); return; }
+  vec2 src = px;
+  bool moved = false;
+  for (int i = 0; i < 12; i++) {
+    if (i >= u_sliceCount) break;
+    vec3 s = u_slices[i];
+    if (px.y >= s.x && px.y < s.x + s.y) { src.x -= clamp(s.z, -u_maxOffsetPx, u_maxOffsetPx) * u_intensity / 0.35; moved = true; }
+  }
+  bool block = false;
+  for (int i = 0; i < 3; i++) {
+    vec4 b = u_blocks[i];
+    if (px.x >= b.x && px.x < b.x + u_blockCorruptSize.x && px.y >= b.y && px.y < b.y + u_blockCorruptSize.y) { src += b.zw; block = true; }
+  }
+  float split = moved ? u_rgbSplitPx : 0.0;
+  vec3 col = vec3(fetch(src + vec2(split, 0.0)).r, fetch(src).g, fetch(src - vec2(split, 0.0)).b);
+  if (block) {
+    float sum = col.r + col.g + col.b;
+    if (sum > 0.0 && col.r / sum >= 0.8) col = vec3(luma(col));
+  }
+  fragColor = vec4(col, 1.0);
+}`);
+
+    // Composites a Canvas2D layer (sRGB texture sampled as linear) over the scene target. It is the
+    // draw call that carries terminal-ui's chrome, meters and caret, and the type layer.
+    passes["terminal-ui"] = new Pass("terminal-ui", `
+uniform sampler2D u_layer; uniform vec2 u_charGridPx; uniform float u_windowChromeWidthPx; uniform int u_meterCount;
+uniform float u_logLineRateCharsPerSec; uniform float u_caretBlinkHz; uniform uint u_seed;
+void main() { vec4 c = texture(u_layer, vec2(vUv.x, 1.0 - vUv.y)); fragColor = vec4(c.rgb, c.a); }`);
+
+    const typeComposite = new Pass("type-layer", `
+uniform sampler2D u_layer;
+void main() { vec4 c = texture(u_layer, vec2(vUv.x, 1.0 - vUv.y)); fragColor = vec4(c.rgb, c.a); }`, { logged: false });
+
+    const copy = new Pass("copy", `
+uniform sampler2D u_src;
+void main() { fragColor = texture(u_src, vUv); }`, { logged: false });
+
+    const accumulate = new Pass("accumulate", `
+uniform sampler2D u_src; uniform float u_weight;
+void main() { fragColor = vec4(texture(u_src, vUv).rgb * u_weight, u_weight); }`, { logged: false });
+
+    return { passes, typeComposite, copy, accumulate };
+  };
+})();

package/skills/lit-typographic-motion/engine/page/post.js

@@ -0,0 +1,119 @@
+// Browser side, part 5: the global post chain in its fixed order (§A7): bloom + halation ->
+// chromatic aberration -> tone shoulder -> film grain -> vignette -> flash -> shake/zoom -> invert.
+// All math runs on linear HDR; the sRGB transfer is applied exactly once, in the output pass, which
+// also flips rows so the readback comes out top-to-bottom.
+(() => {
+  const LTM = window.LTM;
+
+  LTM.createPost = (core) => {
+    const { Pass } = core;
+    const levels = [];
+    let w = 960, h = 540;
+    for (let i = 0; i < 6; i++) {
+      levels.push({ down: core.makeTarget(Math.max(2, w), Math.max(2, h)), up: core.makeTarget(Math.max(2, w), Math.max(2, h)) });
+      w >>= 1; h >>= 1;
+    }
+    const chainA = core.makeTarget(core.W, core.H);
+    const output = core.makeTarget(core.W, core.H, "u8");
+
+    const prefilter = new Pass("post-prefilter", `
+uniform sampler2D u_src; uniform vec2 u_texel; uniform float u_threshold; uniform float u_knee;
+void main() {
+  vec3 c = 0.25 * (texture(u_src, vUv + u_texel * vec2(-1, -1)).rgb + texture(u_src, vUv + u_texel * vec2(1, -1)).rgb
+    + texture(u_src, vUv + u_texel * vec2(-1, 1)).rgb + texture(u_src, vUv + u_texel * vec2(1, 1)).rgb);
+  c = min(c, vec3(32.0));
+  float l = max(c.r, max(c.g, c.b));
+  float knee = max(u_knee, 1e-4);
+  float soft = clamp(l - u_threshold + knee, 0.0, 2.0 * knee);
+  soft = soft * soft / (4.0 * knee);
+  fragColor = vec4(c * max(soft, l - u_threshold) / max(l, 1e-5), 1.0);
+}`, { logged: false });
+
+    const down = new Pass("post-down", `
+uniform sampler2D u_src; uniform vec2 u_texel;
+vec3 s(vec2 o) { return texture(u_src, vUv + u_texel * o).rgb; }
+void main() {
+  vec3 inner = (s(vec2(-1, -1)) + s(vec2(1, -1)) + s(vec2(-1, 1)) + s(vec2(1, 1))) * 0.125;
+  vec3 outer = (s(vec2(-2, -2)) + s(vec2(0, -2)) + s(vec2(2, -2)) + s(vec2(-2, 0)) + s(vec2(2, 0)) + s(vec2(-2, 2)) + s(vec2(0, 2)) + s(vec2(2, 2))) * 0.0625;
+  fragColor = vec4(inner + outer * 0.5 + s(vec2(0.0)) * 0.125, 1.0);
+}`, { logged: false });
+
+    const up = new Pass("post-up", `
+uniform sampler2D u_src; uniform sampler2D u_base; uniform vec2 u_texel; uniform float u_radius;
+void main() {
+  vec2 o = u_texel * u_radius;
+  vec3 tent = texture(u_src, vUv - o).rgb + 2.0 * texture(u_src, vUv + vec2(0.0, -o.y)).rgb + texture(u_src, vUv + vec2(o.x, -o.y)).rgb
+    + 2.0 * texture(u_src, vUv + vec2(-o.x, 0.0)).rgb + 4.0 * texture(u_src, vUv).rgb + 2.0 * texture(u_src, vUv + vec2(o.x, 0.0)).rgb
+    + texture(u_src, vUv + vec2(-o.x, o.y)).rgb + 2.0 * texture(u_src, vUv + vec2(0.0, o.y)).rgb + texture(u_src, vUv + o).rgb;
+  fragColor = vec4(texture(u_base, vUv).rgb + tent / 16.0, 1.0);
+}`, { logged: false });
+
+    const passA = new Pass("post", `
+uniform sampler2D u_src; uniform sampler2D u_bloom; uniform sampler2D u_halo;
+uniform float u_exposure; uniform float u_bloomAmount; uniform float u_halation; uniform float u_ca;
+uniform float u_grain; uniform float u_vignette; uniform float u_flash; uniform float u_fade;
+uniform uint u_frame; uniform uint u_runSeed;
+vec3 shoulder(vec3 x) {
+  const float k = 0.75;
+  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;
+  float r2 = dot(dc * vec2(LOGICAL_W / LOGICAL_H, 1.0), dc * vec2(LOGICAL_W / LOGICAL_H, 1.0));
+  vec2 off = dc * r2 * u_ca / LOGICAL_W * 4.0;
+  vec3 col = vec3(texture(u_src, vUv + off).r, texture(u_src, vUv).g, texture(u_src, vUv - off).b);
+  col += texture(u_bloom, vUv).rgb * u_bloomAmount / 3.0;
+  col += vec3(1.0, 0.2, 0.06) * luma(texture(u_halo, vUv).rgb) * u_halation;
+  col *= u_exposure;
+  col = shoulder(col);
+  vec3 s = toSRGB(sat3(col));
+  vec2 px = logicalPx();
+  float g1 = hashU(uvec3(uvec2(gl_FragCoord.xy), u_frame ^ u_runSeed)) - 0.5;
+  float g2 = hashU(uvec3(uvec2(floor(px / 2.0)), (u_frame * 7919u) ^ u_runSeed)) - 0.5;
+  float lm = luma(s);
+  s += (g1 * 0.6 + g2 * 0.4) * u_grain * (0.55 + 1.2 * lm * (1.0 - lm));
+  col = toLinear(sat3(s));
+  col *= mix(1.0, smoothstep(0.95, 0.25, length(dc * vec2(1.0, 0.8))), u_vignette);
+  col += vec3(1.0) * u_flash;
+  col *= u_fade;
+  fragColor = vec4(col, 1.0);
+}`, { logged: false });
+
+    const passB = new Pass("post-output", `
+uniform sampler2D u_src; uniform vec2 u_shake; uniform float u_zoom; uniform bool u_invert;
+void main() {
+  // Output row 0 is read back first, so it carries the top of the image (rows come out top-down).
+  vec2 topDown = (vUv - 0.5) / u_zoom + 0.5 - u_shake / vec2(LOGICAL_W, LOGICAL_H);
+  vec3 s = toSRGB(sat3(texture(u_src, vec2(topDown.x, 1.0 - topDown.y)).rgb));
+  if (u_invert) s = 1.0 - s;
+  fragColor = vec4(s, 1.0);
+}`, { logged: false });
+
+    const render = (src, p, frameIndex, runSeed) => {
+      const first = levels[0].down;
+      prefilter.use().texture("u_src", src.tex).set("u_texel", "vec2", [1 / core.W, 1 / core.H])
+        .set("u_threshold", "float", p.bloomThreshold).set("u_knee", "float", p.bloomKnee).draw(first);
+      for (let i = 1; i < levels.length; i++) {
+        const from = levels[i - 1].down;
+        down.use().texture("u_src", from.tex).set("u_texel", "vec2", [1 / from.width, 1 / from.height]).draw(levels[i].down);
+      }
+      let previous = levels[levels.length - 1].down;
+      for (let i = levels.length - 2; i >= 0; i--) {
+        up.use().texture("u_src", previous.tex).texture("u_base", levels[i].down.tex)
+          .set("u_texel", "vec2", [1 / previous.width, 1 / previous.height]).set("u_radius", "float", 0.5 + p.bloomRadius).draw(levels[i].up);
+        previous = levels[i].up;
+      }
+      passA.use().texture("u_src", src.tex).texture("u_bloom", levels[0].up.tex).texture("u_halo", levels[3].up.tex)
+        .set("u_exposure", "float", p.exposure).set("u_bloomAmount", "float", p.bloom).set("u_halation", "float", p.halation)
+        .set("u_ca", "float", p.ca).set("u_grain", "float", p.grain).set("u_vignette", "float", p.vignette)
+        .set("u_flash", "float", p.flash).set("u_fade", "float", p.fade)
+        .set("u_frame", "uint", frameIndex).set("u_runSeed", "uint", runSeed).draw(chainA);
+      passB.use().texture("u_src", chainA.tex).set("u_shake", "vec2", p.shake).set("u_zoom", "float", p.zoom)
+        .set("u_invert", "bool", p.invert).draw(output);
+      return output;
+    };
+    return { render, output };
+  };
+})();

package/skills/lit-typographic-motion/engine/page/scenes.js

@@ -0,0 +1,187 @@
+// Browser side, part 7: the six original starter scenes. A scene is a pure function of the frame
+// `f` (time, local progress, its timeline entry and reveal units) and the drawing api; every beat
+// inside it is a function of f.lt / f.p against its own window, never a literal frame number
+// (MO-A-06). Each returns post-chain overrides for that sample (MO-A-58).
+(() => {
+  const LTM = window.LTM;
+  const SAFE = { x0: 96, y0: 54, x1: 1824, y1: 1026 };
+  const LEFT = 144;
+
+  const entrance = (f, api, lt) => {
+    const motion = api.look.motion;
+    if (motion.entrance === "slam") return api.ease("slam", LTM.clamp(lt / motion.entranceSec));
+    if (motion.entrance === "drift") return api.ease("drift", LTM.clamp(lt / Math.min(0.8, f.shot.holdSec * 0.4)));
+    return 1;
+  };
+
+  // Terminal type-in: Latin appears glyph by glyph; a Hangul 어절 appears whole (MO-A-13).
+  const typeInVisibility = (value, lt, rate) => {
+    const chars = Array.from(value);
+    const groupStart = new Array(chars.length).fill(0);
+    let cursor = 0, i = 0;
+    while (i < chars.length) {
+      if (/[가-힣ᄀ-ᇿ㄰-㆏]/u.test(chars[i])) {
+        let j = i;
+        while (j < chars.length && !/\s/u.test(chars[j])) j++;
+        for (let k = i; k < j; k++) groupStart[k] = cursor;
+        cursor += (j - i) / rate;
+        i = j;
+      } else { groupStart[i] = cursor; cursor += 1 / rate; i++; }
+    }
+    return { visible: (index) => lt >= groupStart[index], done: lt >= cursor, count: chars.filter((_, index) => lt >= groupStart[index]).length };
+  };
+
+  const pixelSize = (size, value) => (/[가-힣]/u.test(value) ? Math.max(45, Math.floor(size / 9) * 9) : size);
+
+  const scenes = {};
+
+  scenes["title-slam"] = (f, api) => {
+    const voice = api.voices.display;
+    const weight = api.presetId === "swiss-signal" ? 900 : 700;
+    const value = f.shot.text;
+    const k = entrance(f, api, f.lt);
+    const maxWidth = api.presetId === "terminalcore" ? 1380 : 1440;
+    // Fit against the widest state the entrance passes through (the 125% width cut at 1.04 scale),
+    // so the slam's first frames stay inside title-safe too.
+    const slam = api.look.motion.entrance === "slam";
+    let size = api.type.fit(value, { voice, weight, width: slam ? 125 : 100, trackingEm: slam ? -0.035 : 0 }, slam ? maxWidth / 1.04 : maxWidth, voice === "pixel" ? 144 : 210, 64);
+    if (voice === "pixel") size = pixelSize(size, value);
+    const typed = api.presetId === "terminalcore" ? typeInVisibility(value, f.lt, api.look.params["terminal-ui"].logLineRateCharsPerSec) : null;
+    const box = api.text({
+      id: "title", text: value, voice, size, weight,
+      width: api.look.motion.entrance === "slam" && k < 0.5 ? 125 : 100,
+      trackingEm: api.look.motion.entrance === "slam" ? -0.035 : 0,
+      x: LEFT + (api.presetId === "terminalcore" ? 24 : 0), y: 640 + (api.look.motion.entrance === "slam" ? 18 * (1 - k) : -10 * f.p),
+      fill: api.palette.text, opacity: typed ? 1 : k, scale: api.look.motion.entrance === "slam" ? 1.04 - 0.04 * k : 1,
+      visible: typed ? typed.visible : undefined
+    });
+    if (typed && box) api.caret(box, size);
+    // The shot index is printed only when the treatment asks for it (typePlan.showIndex).
+    if (api.presetId !== "terminalcore" && api.showIndex) {
+      api.text({ id: "title-index", text: `${String(f.shotNumber).padStart(2, "0")} / ${String(f.shotTotal).padStart(2, "0")}`, voice: "machine", size: 24, weight: 400, x: SAFE.x1 - 48, y: 190, align: "right", fill: api.palette.text, opacity: k, role: "annotation" });
+    }
+    return {};
+  };
+
+  scenes.karaoke = (f, api) => {
+    const hangul = /[가-힣]/u.test(f.shot.text);
+    const voice = api.presetId === "terminalcore" ? "pixel" : hangul ? "body" : "display";
+    const weight = 700;
+    let size = api.type.fit(f.shot.text, { voice, weight, width: 100 }, 1540, voice === "pixel" ? 108 : 112, 72);
+    let lines = [f.shot.text];
+    if (api.type.layout(f.shot.text, { voice, weight, size }).width > 1540) {
+      size = voice === "pixel" ? 72 : 88;
+      lines = api.type.wrapToWidth(f.shot.text, { voice, weight, size }, 1540);
+    }
+    if (voice === "pixel") size = pixelSize(size, f.shot.text);
+    const lineHeight = hangul ? 1.6 : 1.5;
+    const revealedWords = f.units.filter((unit) => f.t >= unit.start).length;
+    const newestStart = f.units[revealedWords - 1]?.start ?? f.start;
+    const fadeIn = LTM.clamp((f.t - newestStart) / 0.12);
+    let wordCursor = 0;
+    const lineWordStart = lines.map((line) => { const start = wordCursor; wordCursor += line.split(" ").length; return start; });
+    const drawOne = (line, lineIndex) => {
+      const charWord = [];
+      let w = lineWordStart[lineIndex];
+      for (const char of Array.from(line)) { charWord.push(w); if (char === " ") w++; }
+      return {
+        visible: (index) => charWord[index] < revealedWords,
+        opacityOf: (index) => (charWord[index] === revealedWords - 1 ? fadeIn : 1)
+      };
+    };
+    const y0 = lines.length === 1 ? 600 : 520;
+    const x = LEFT + (api.presetId === "terminalcore" ? 24 : 0);
+    if (lines.length === 1) {
+      const vis = drawOne(lines[0], 0);
+      const box = api.text({ id: "line", text: lines[0], voice, size, weight, x, y: y0, fill: api.palette.text, ...vis });
+      if (api.presetId === "terminalcore" && box) api.caret(box, size);
+    } else {
+      const perLine = lines.map((line, i) => drawOne(line, i));
+      api.block({
+        id: "line", lines, voice, size, weight, x, y: y0, lineHeight, fill: api.palette.text, role: "block",
+        lineVisible: (i) => lineWordStart[i] < revealedWords,
+        lineGlyphs: (i) => perLine[i]
+      });
+    }
+    return {};
+  };
+
+  scenes["kinetic-list"] = (f, api) => {
+    const items = f.shot.params.items;
+    const hangul = items.some((item) => /[가-힣]/u.test(item));
+    const voice = api.presetId === "terminalcore" ? "pixel" : hangul ? "body" : "display";
+    const lineHeight = hangul ? 1.6 : 1.5;
+    const widest = items.reduce((a, b) => (Array.from(b).length > Array.from(a).length ? b : a));
+    let size = Math.min(api.type.fit(widest, { voice, weight: 700, width: 100 }, 1320, 96, 48), Math.floor(620 / (items.length * lineHeight)));
+    if (voice === "pixel") size = pixelSize(size, items.join(" "));
+    if (f.shot.params.heading) {
+      api.text({ id: "list-heading", text: f.shot.params.heading, voice: "machine", size: 26, weight: 400, x: LEFT + 4, y: 250, fill: api.palette.text, role: "annotation" });
+    }
+    const k = (i) => api.ease("slam", LTM.clamp((f.t - f.units[i].start) / 0.24));
+    api.block({
+      id: "list", lines: items, voice, size, weight: 700, x: LEFT + (api.presetId === "terminalcore" ? 24 : 0), y: 340 + size, lineHeight,
+      fill: api.palette.text, role: "block",
+      lineVisible: (i) => f.t >= f.units[i].start,
+      lineOffset: (i) => -24 * (1 - k(i)),
+      lineOpacity: (i) => k(i)
+    });
+    return {};
+  };
+
+  scenes.counter = (f, api) => {
+    const { from, to, label } = f.shot.params;
+    const span = f.shot.holdSec * 0.6;
+    const stepped = Math.floor(f.lt * 15) / 15;
+    const value = Math.round(from + (to - from) * api.ease("drift", LTM.clamp(stepped / span)));
+    const digits = String(value);
+    const final = String(Math.round(to));
+    const voice = api.presetId === "terminalcore" ? "pixel" : "display";
+    let size = api.type.fit(final, { voice, weight: 900, width: 100 }, 480, 150, 60);
+    const box = api.text({ id: "counter", text: digits, voice, size, weight: 900, x: LEFT + (api.presetId === "terminalcore" ? 24 : 0), y: 600, fill: api.palette.text });
+    if (label) api.text({ id: "counter-label", text: label, voice: "machine", size: 30, weight: 400, x: LEFT + 4 + (api.presetId === "terminalcore" ? 24 : 0), y: 680, fill: api.palette.text, role: "annotation" });
+    if (api.accent && box) api.mark({ id: "accent", x0: LEFT + 14, y0: 440, x1: LEFT + 70, y1: 440, width: 28, color: api.palette.accent, kind: "accent" });
+    return {};
+  };
+
+  scenes.signature = (f, api) => {
+    const font = f.shot.params.font;
+    const size = 180;
+    const lay = api.type.strokeLayout(f.shot.text, font, size);
+    const writeStart = f.start + f.shot.holdSec * 0.12, writeEnd = f.start + f.shot.holdSec * 0.72;
+    const chars = Array.from(f.shot.text);
+    const charTimes = chars.map((_, i) => [writeStart + (writeEnd - writeStart) * (i / chars.length), writeStart + (writeEnd - writeStart) * ((i + 1) / chars.length)]);
+    const length = api.type.writtenLength(lay, charTimes, f.t);
+    const scale = Math.min(1, 1500 / Math.max(1, lay.width));
+    api.stroke({ id: "signature", text: f.shot.text, font, size: size * scale, x: LEFT + (api.presetId === "terminalcore" ? 24 : 0), y: 620, penWidth: 3.2, fill: api.palette.text, length: length * scale });
+    return {};
+  };
+
+  scenes["end-card"] = (f, api) => {
+    const { title, sub, paragraph } = f.shot.params;
+    const voice = api.voices.display;
+    const k = entrance(f, api, f.lt);
+    const weight = api.presetId === "swiss-signal" ? 900 : 700;
+    let size = api.type.fit(title, { voice, weight, width: 100, trackingEm: -0.02 }, 1300, voice === "pixel" ? 126 : 150, 56);
+    if (voice === "pixel") size = pixelSize(size, title);
+    const x = LEFT + (api.presetId === "terminalcore" ? 24 : 0);
+    const typed = api.presetId === "terminalcore" ? typeInVisibility(title, f.lt, api.look.params["terminal-ui"].logLineRateCharsPerSec) : null;
+    const titleBox = api.text({ id: "end-title", text: title, voice, size, weight, trackingEm: api.presetId === "terminalcore" ? 0 : -0.02, x, y: 520, fill: api.palette.text, opacity: typed ? 1 : k, visible: typed?.visible });
+    if (typed && titleBox && !sub && !paragraph) api.caret(titleBox, size);
+    let y = 520 + 90;
+    if (sub) {
+      const subVoice = api.presetId === "terminalcore" ? "machine" : /[가-힣]/u.test(sub) ? "body" : "machine";
+      api.text({ id: "end-sub", text: sub, voice: subVoice, size: 40, weight: subVoice === "body" ? 400 : 400, x: x + 4, y, fill: api.palette.text, opacity: typed ? (typed.done ? 1 : 0) : k, role: "annotation" });
+      y += 80;
+    }
+    if (paragraph) {
+      const hangul = /[가-힣]/u.test(paragraph);
+      const lines = hangul ? api.type.wrapToWidth(paragraph, { voice: "body", weight: 400, size: 30 }, 900) : api.type.wrap(paragraph, 66);
+      api.block({ id: "end-paragraph", lines, voice: "body", size: 30, weight: 400, x: x + 4, y, lineHeight: hangul ? 1.6 : 1.5, fill: api.palette.text, role: "paragraph", opacity: typed ? (typed.done ? 1 : 0) : k });
+    }
+    if (api.accent) api.mark({ id: "accent", x0: x + 14, y0: 400, x1: x + 70, y1: 400, width: 28, color: api.palette.accent, kind: "accent" });
+    return {};
+  };
+
+  LTM.scenes = scenes;
+  LTM.SAFE = SAFE;
+})();