@litfamily/litmuse 0.1.5 → 0.1.6

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.1.6 — 2026-11-01
+
+- `lit-typographic-motion` can lay real keyed footage over a stage film. A stage declares chroma-keyed clips in `stage/clips/clips.json` (an id, a folder, a frame count and a rate), the frames are 8-bit RGBA PNGs with real transparency, and the page registers each clip once with `LitStage.clip` and calls the returned function from `render(t)`; the frame shown is a plain function of film time, so a cue is `start = cue - (N - 1) / fps` and the flash audit and determinism replay see the final pixels. A declared clip is held to its own caps (12 clips, 360 frames in one and 1500 in all, 40 MB in one and 128 MB in all, 720 px on the long side, 30 fps) and no longer trips the flipbook rule; an undeclared frame folder is still refused with exit 17. Cover mode takes no clips. The manifest and the report list each clip.
+
 ## 0.1.5 — 2026-10-31
 
 - `lit-adhd` counts the other sessions and herdr agents at work before it offers this session's own next step. Before, the session that had started them was still told to type `lit continue` (a paused workflow) or `go` (its own start-work run) while they worked, and its own card showed `lit continue`. Now it says to wait for them and keeps `go` silent; a pending approval is still offered, and `lit continue` typed by hand still works.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@litfamily/litmuse",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Installer for LitMuse: skills, hooks and agents that help Meta's Muse Code plan, build, check and hand off work.",
   "keywords": [
     "muse",

package/plugin/.muse-plugin/plugin.json

@@ -2,7 +2,7 @@
   "schemaVersion": 1,
   "name": "litmuse",
   "displayName": "LitMuse",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "LitFamily workflows for Muse Code: bare lit activation, planning, evidence-bound execution, review, research, handoff and Korean prose care.",
   "compat": {
     "source": "native",

package/plugin/skills/lit-typographic-motion/SKILL.md

@@ -57,7 +57,7 @@ State lives in the output folder: `treatment.json`, `look.json`, `stills/`, `man
 | review only | a critique of an existing render | Open the frames, run `gate <dir>` or `cover-gate <file> --strict`, report. Write nothing. |
 | blocked | exit 10, 11, 12, 14, 15, 21 or 22 | Stop. Name the state and its fix; never route around it with another pipeline. |
 | treatment invalid | exit 16 | Fix the named field of `treatment.json` and rerun. |
-| stage contract | exit 17, 18 or 19 | Fix the element, API, raster, clock source or URL the message names, and rerun. |
+| stage contract | exit 17, 18 or 19 | Fix the element, API, raster, clip, clock source or URL the message names, and rerun. |
 | sound invalid | exit 20 | Fix the bed or the supplied track the message names. |
 
 ## Procedure
@@ -136,7 +136,7 @@ Stop at a blocked exit, at a gate failure you cannot fix within round 3, or when
 | 14 | BLOCKED_DEPS_NOT_PREWARMED | Ask the user to run `npx @litfamily/litmuse runtime install motion` in a terminal outside Muse. Never install from the session. |
 | 15 | BLOCKED_FONT_FETCH | A cached font is missing or its sha256 differs; the same pre-warm command fixes it. |
 | 16 | BLOCKED_TREATMENT_INVALID | Fix the named field. |
-| 17 | STAGE_CONTRACT_ERROR | Fix the named element, API, raster, size or missing copy line. |
+| 17 | STAGE_CONTRACT_ERROR | Fix the named element, API, raster, clip, size or missing copy line. |
 | 18 | STAGE_NONDETERMINISTIC | The page read something the clock does not drive; seed it or derive it from `t`. |
 | 19 | STAGE_NETWORK_REQUEST | Remove the named URL or connection; everything is local. |
 | 20 | SOUND_INVALID | The planned sound is missing, silent at the start or out of limits; fix it. |

package/plugin/skills/lit-typographic-motion/engine/node/cover.mjs

@@ -187,7 +187,7 @@ function prepare({ out, env, log }) {
   const treatment = asBlocked(() => loadCoverTreatment(out));
   const stageDir = path.join(out, COVER_STAGE);
   if (!existsSync(path.join(stageDir, "index.html"))) throw new BlockedError(EXIT.STAGE_CONTRACT_ERROR, `STAGE_CONTRACT_ERROR: ${path.join(stageDir, "index.html")} is missing; write the cover page first (references/cover.md)`);
-  const scan = scanStage(stageDir);
+  const scan = scanStage(stageDir, { clips: false });
   for (const w of scan.warnings) log(`warning: ${w}`);
   const { assets } = checkAssets({ out, treatment, rasters: scan.rasters, coverDir: COVER_STAGE });
   return { treatment, stageDir, assets, faces: stageFonts(env) };

package/plugin/skills/lit-typographic-motion/engine/node/stage-gate.mjs

@@ -107,6 +107,7 @@ export function formatStageReport({ gate, manifest, outputs, round, framesViewed
     `outputs: ${outputs.film} · ${outputs.preview} · ${outputs.poster} · ${outputs.still}${withheld ? "  [WITHHELD: MO-C-03 flash audit failed; exports are diagnostics in withheld/, not deliverables]" : ""}`,
     `format / duration / fps: ${manifest.format} ${manifest.width}x${manifest.height}, ${manifest.durationSec} s (treatment ${manifest.treatmentDurationSec} s) @ ${manifest.fps} fps, ${manifest.frameCount} frames`,
     `renderer: ${manifest.renderer} (software rung, stage flags: ${manifest.chromeFlags.join(" ")})`,
+    ...(manifest.clips?.length ? [`clips: ${manifest.clips.map((c) => `${c.id} ${c.frames} frames at ${c.fps} fps`).join(", ")} (keyed overlays, picked from film time)`] : []),
     `sound: ${manifest.sound?.mode ?? "none"}${manifest.sound?.label ? ` (${manifest.sound.label})` : ""}`,
     "",
     `QA gate: ${gate.pass ? "PASS" : "FAIL"}`,

package/plugin/skills/lit-typographic-motion/engine/node/stage-serve.mjs

@@ -8,6 +8,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { EXIT } from "../core/constants.mjs";
 import { BlockedError } from "./chrome.mjs";
+import { decodePng } from "./png.mjs";
 import { checkFont, fontLocation, fontsDir, loadFontManifest } from "./runtime.mjs";
 import { readPlate } from "./blender.mjs";
 
@@ -29,6 +30,13 @@ export const CONTENT_TYPES = Object.freeze({
 });
 export const RASTER = Object.freeze([".png", ".jpg", ".jpeg", ".webp", ".gif"]);
 export const RASTER_LIMITS = Object.freeze({ count: 24, bytes: 8 * 1024 * 1024, flipbook: 10 });
+// Keyed overlay clips (references/stage.md, Clips). A frame folder that stage/clips/clips.json declares is held
+// to these caps and not to RASTER_LIMITS: a clip is a sticker laid on the film, never the film itself, so its
+// frames are 8-bit RGBA PNGs with real transparency, at most `side` px on the long side, at most `fps` per second.
+export const CLIP_LIMITS = Object.freeze({
+  clips: 12, framesPerClip: 360, framesTotal: 1500, bytesPerClip: 40 * 1024 * 1024, bytesTotal: 128 * 1024 * 1024, side: 720, fps: 30,
+});
+export const CLIPS_DIR = "clips";
 
 // The product's verified faces as CSS families. Archivo's widths are one family at three stretches.
 const FAMILIES = [
@@ -108,7 +116,7 @@ function pngInfo(b) {
     if (type === "IDAT" || type === "IEND") break;
     o += 12 + len;
   }
-  return { width: b.readUInt32BE(16), height: b.readUInt32BE(20), animated };
+  return { width: b.readUInt32BE(16), height: b.readUInt32BE(20), animated, bitDepth: b[24], colorType: b[25] };
 }
 function jpegInfo(b) {
   if (b[0] !== 0xff || b[1] !== 0xd8) return null;
@@ -166,6 +174,98 @@ export function rasterInfo(file) {
   return null;
 }
 
+// ---- declared clips: stage/clips/clips.json and the frame folders it names ----
+const clipFail = (message) => new BlockedError(EXIT.STAGE_CONTRACT_ERROR, `STAGE_CONTRACT_ERROR: ${message}`);
+const clipFrame = (n) => `frame_${String(n).padStart(4, "0")}.png`;
+const CLIP_ID = /^[A-Za-z0-9][A-Za-z0-9_-]{0,39}$/u;
+const CLIP_DIR = /^[A-Za-z0-9][A-Za-z0-9._-]{0,79}$/u;
+
+/** The clips stage/clips/clips.json declares ([] when there is no file), checked for shape only. Exit 17 on a bad one. */
+export function declaredClips(stageDir, limits = CLIP_LIMITS) {
+  const file = path.join(stageDir, CLIPS_DIR, "clips.json");
+  if (!existsSync(file)) return [];
+  let doc;
+  try {
+    doc = JSON.parse(readFileSync(file, "utf8"));
+  } catch (error) {
+    throw clipFail(`${CLIPS_DIR}/clips.json is not valid JSON (${error.message})`);
+  }
+  if (!doc || !Array.isArray(doc.clips)) throw clipFail(`${CLIPS_DIR}/clips.json needs { "clips": [ { "id", "dir", "count", "fps" } ] }`);
+  if (doc.clips.length > limits.clips) throw clipFail(`${doc.clips.length} clips declared (at most ${limits.clips} clips)`);
+  const ids = new Set();
+  const dirs = new Set();
+  return doc.clips.map((c, n) => {
+    const at = `${CLIPS_DIR}/clips.json clip #${n + 1}`;
+    if (!c || typeof c !== "object") throw clipFail(`${at} is not an object`);
+    if (typeof c.id !== "string" || !CLIP_ID.test(c.id)) throw clipFail(`${at}: id must be a plain token of letters, digits, - and _ (got ${JSON.stringify(c.id)})`);
+    if (ids.has(c.id)) throw clipFail(`${at}: duplicate id ${c.id}`);
+    ids.add(c.id);
+    if (typeof c.dir !== "string" || !CLIP_DIR.test(c.dir) || c.dir.includes("..")) throw clipFail(`clip "${c.id}": dir must be a folder name directly under ${CLIPS_DIR}/ (got ${JSON.stringify(c.dir)})`);
+    if (dirs.has(c.dir)) throw clipFail(`clip "${c.id}": dir ${c.dir} is already declared by another clip`);
+    dirs.add(c.dir);
+    if (!Number.isInteger(c.count) || c.count < 1) throw clipFail(`clip "${c.id}": count must be a whole number of frames (got ${JSON.stringify(c.count)})`);
+    if (!Number.isInteger(c.fps) || c.fps < 1 || c.fps > limits.fps) throw clipFail(`clip "${c.id}": fps must be a whole number from 1 to ${limits.fps} (got ${JSON.stringify(c.fps)})`);
+    return { id: c.id, dir: c.dir, count: c.count, fps: c.fps };
+  });
+}
+
+/**
+ * Check every declared clip against its bytes: exactly frame_0001.png..frame_<count>.png in clips/<dir>/, each a
+ * still 8-bit RGBA PNG of one size within the overlay cap, real transparency in the first, middle and last frame,
+ * then the per-clip and total caps. Returns [{ id, dir, count, fps, width, height, bytes, frames }]; `frames`
+ * are stage-relative paths.
+ */
+export function scanClips(stageDir, { limits = CLIP_LIMITS, files = listStage(stageDir) } = {}) {
+  const decls = declaredClips(stageDir, limits);
+  let totalFrames = 0;
+  let totalBytes = 0;
+  const clips = decls.map((d) => {
+    const prefix = `${CLIPS_DIR}${path.sep}${d.dir}${path.sep}`;
+    if (d.count > limits.framesPerClip) throw clipFail(`clip "${d.id}": ${d.count} frames (at most ${limits.framesPerClip} per clip)`);
+    const have = new Map(files.filter((f) => f.rel.startsWith(prefix) && RASTER.includes(path.extname(f.rel).toLowerCase())).map((f) => [f.rel.slice(prefix.length), f]));
+    const frames = [];
+    for (let n = 1; n <= d.count; n++) {
+      const f = have.get(clipFrame(n));
+      if (!f) throw clipFail(`clip "${d.id}": ${CLIPS_DIR}/${d.dir}/${clipFrame(n)} is missing (declared ${d.count} frames, named frame_0001.png onward)`);
+      frames.push(f);
+    }
+    if (have.size !== d.count) {
+      const named = new Set(frames.map((f) => f.rel.slice(prefix.length)));
+      const stray = [...have.keys()].find((name) => !named.has(name));
+      throw clipFail(`clip "${d.id}": ${CLIPS_DIR}/${d.dir}/${stray} is not one of the ${d.count} declared frames; raise count or remove it`);
+    }
+    let size = null;
+    for (const f of frames) {
+      const info = rasterInfo(f.real);
+      if (!info) throw clipFail(`clip "${d.id}": ${f.rel} is not a readable PNG`);
+      if (info.animated) throw clipFail(`clip "${d.id}": ${f.rel} is an animated image; a clip is a folder of still frames`);
+      if (info.colorType !== 6 || info.bitDepth !== 8) throw clipFail(`clip "${d.id}": ${f.rel} must be an 8-bit RGBA PNG with an alpha channel (a keyed frame), not an opaque image`);
+      if (Math.max(info.width, info.height) > limits.side) throw clipFail(`clip "${d.id}": ${f.rel} is ${info.width}x${info.height}; a clip is an overlay of at most ${limits.side} px on the long side`);
+      if (size && (size.width !== info.width || size.height !== info.height)) throw clipFail(`clip "${d.id}": ${f.rel} is ${info.width}x${info.height} but frame_0001.png is ${size.width}x${size.height}; one size per clip`);
+      size = { width: info.width, height: info.height };
+    }
+    const bytes = frames.reduce((sum, f) => sum + f.bytes, 0);
+    if (bytes > limits.bytesPerClip) throw clipFail(`clip "${d.id}": ${(bytes / 1048576).toFixed(1)} MB (at most ${(limits.bytesPerClip / 1048576).toFixed(0)} MB per clip)`);
+    for (const f of [frames[0], frames[Math.floor((frames.length - 1) / 2)], frames[frames.length - 1]]) {
+      let pixels;
+      try {
+        ({ pixels } = decodePng(readFileSync(f.real)));
+      } catch (error) {
+        throw clipFail(`clip "${d.id}": ${f.rel} cannot be decoded (${error.message}); use a non-interlaced 8-bit RGBA PNG`);
+      }
+      let hasAlpha = false;
+      for (let i = 3; i < pixels.length && !hasAlpha; i += 4) hasAlpha = pixels[i] < 255;
+      if (!hasAlpha) throw clipFail(`clip "${d.id}": ${f.rel} has no transparent pixel; a clip is keyed, not a full-frame video`);
+    }
+    totalFrames += d.count;
+    totalBytes += bytes;
+    return { ...d, ...size, bytes, frames: frames.map((f) => f.rel) };
+  });
+  if (totalFrames > limits.framesTotal) throw clipFail(`${totalFrames} clip frames in all (at most ${limits.framesTotal})`);
+  if (totalBytes > limits.bytesTotal) throw clipFail(`${(totalBytes / 1048576).toFixed(1)} MB of clip frames in all (at most ${(limits.bytesTotal / 1048576).toFixed(0)} MB)`);
+  return clips;
+}
+
 // ---- the static pre-flight scan ----
 const TEXT = new Set([".html", ".js", ".mjs", ".css", ".svg", ".json"]);
 const NAMESPACES = /^http:\/\/www\.w3\.org\/(?:2000\/svg|1999\/xlink|1999\/xhtml|XML\/1998\/namespace|2000\/xmlns\/?)$/u;
@@ -184,9 +284,11 @@ const NETWORK_API = /\bnew\s+(WebSocket|WebTransport|RTCPeerConnection|EventSour
 
 /**
  * Scan the stage dir before launch. Throws exit 17 (contract) or 19 (network) naming the file and
- * the thing found; returns { files, rasters, warnings, plate } otherwise (plate: the Blender plate, or null).
+ * the thing found; returns { files, rasters, warnings, plate, clips } otherwise (plate: the Blender plate, or null;
+ * clips: the declared keyed clips as scanClips checked them, whose frames are not page rasters). `clips: false`
+ * (cover mode) ignores clips.json, so a declared folder is held to the raster limits there.
  */
-export function scanStage(stageDir) {
+export function scanStage(stageDir, { clips: allowClips = true } = {}) {
   if (!existsSync(path.join(stageDir, "index.html"))) throw new BlockedError(EXIT.STAGE_CONTRACT_ERROR, `STAGE_CONTRACT_ERROR: ${path.join(stageDir, "index.html")} is missing; write the stage page first (references/stage.md)`);
   const files = listStage(stageDir);
   const warnings = [];
@@ -196,6 +298,8 @@ export function scanStage(stageDir) {
   const plate = readPlate(stageDir, "plate");
   const preview = readPlate(stageDir, "plate-preview");
   const listed = new Set([plate, preview].filter(Boolean).flatMap((p) => p.frames.map((f) => path.join(p.dir, f.name))));
+  const clips = allowClips ? scanClips(stageDir, { files }) : [];
+  for (const c of clips) for (const rel of c.frames) listed.add(rel);
   for (const f of files) {
     const ext = path.extname(f.rel).toLowerCase();
     if (!CONTENT_TYPES[ext] && f.rel !== "scene.py") warnings.push(`${f.rel}: not a servable type; the page cannot load it`);
@@ -235,7 +339,24 @@ export function scanStage(stageDir) {
   for (const [size, names] of bySize) {
     if (names.length >= RASTER_LIMITS.flipbook) throw new BlockedError(EXIT.STAGE_CONTRACT_ERROR, `STAGE_CONTRACT_ERROR: ${names.length} rasters of ${size} look like a flipbook; animate the page, not a frame sequence`);
   }
-  return { files, rasters, warnings, plate };
+  return { files, rasters, warnings, plate, clips };
+}
+
+/**
+ * window.LitClips for LitStage.clip: id -> { src, count, fps, width, height }, built from clips.json and the first
+ * frame's header. null when the stage declares no clips (or one the scan would refuse).
+ */
+function clipsScript(stageDir) {
+  let table;
+  try {
+    table = Object.fromEntries(declaredClips(stageDir).map((c) => {
+      const info = rasterInfo(path.join(stageDir, CLIPS_DIR, c.dir, clipFrame(1)));
+      return [c.id, { src: `${CLIPS_DIR}/${c.dir}`, count: c.count, fps: c.fps, width: info.width, height: info.height }];
+    }));
+  } catch {
+    return null;
+  }
+  return Object.keys(table).length ? `window.LitClips = ${JSON.stringify(table)};\n` : null;
 }
 
 /**
@@ -243,6 +364,7 @@ export function scanStage(stageDir) {
  * type } | { kind: "blocked", reason } | { kind: "missing" }, and records every refusal.
  */
 export function stageRouter({ stageDir, faces, style = null }) {
+  const clipsJs = clipsScript(stageDir);
   const root = realpathSync(stageDir);
   const css = fontsCss(faces);
   const byRoute = new Map(faces.map((f) => [f.route, f.file]));
@@ -266,6 +388,7 @@ export function stageRouter({ stageDir, faces, style = null }) {
     if (pathname === "/lit/stage-kit.js") return { kind: "file", file: KIT_FILE, type: CONTENT_TYPES[".js"] };
     if (pathname === "/lit/loop-kit.js") return { kind: "file", file: LOOP_KIT_FILE, type: CONTENT_TYPES[".js"] };
     if (pathname === "/lit/fonts.css") return { kind: "body", body: css, type: CONTENT_TYPES[".css"] };
+    if (clipsJs && pathname === "/lit/clips.js") return { kind: "body", body: clipsJs, type: CONTENT_TYPES[".js"] };
     if (pathname.startsWith("/lit/three/")) {
       const rel = pathname.slice("/lit/three/".length);
       const file = path.join(THREE_DIR, rel);

package/plugin/skills/lit-typographic-motion/engine/node/stage.mjs

@@ -480,6 +480,7 @@ export async function renderStage({ out, round = 1, stillsOnly = false, env = pr
       frameCount, seed: treatment.seed, renderer: finalState.webglRenderer ?? "no WebGL", rung: ctx.rung, chromeFlags: master.flags, usesWebGL: finalState.usesWebGL,
       cuts, stills: { sha256: stills.sha256, poster: plan.poster, reduced: plan.reduced }, posterEncoding: poster,
       geometry: geometryFor(width, height),
+      clips: scan.clips.map((c) => ({ id: c.id, frames: c.count, fps: c.fps, width: c.width, height: c.height, bytes: c.bytes })),
       plate: scan.plate ? { blender: scan.plate.blender, engine: scan.plate.engine, device: scan.plate.device, samples: scan.plate.samples, fps: scan.plate.fps, frames: scan.plate.frames.length } : null,
       sound: { mode: sound.mode, label: sound.label, file: sound.file ? path.relative(out, sound.file) : null, sha256: sound.file ? sha256(readFileSync(sound.file)) : null, lufs: sound.bed?.lufs ?? null },
       preview: { encoder: preview.encoder, rung: preview.rung, attempts: preview.attempts },

package/plugin/skills/lit-typographic-motion/engine/stage/stage-kit.js

@@ -677,6 +677,45 @@
   }
   const wipe = (el, p, opts) => clipRect(el, p, opts);
 
+  // A declared keyed clip (stage/clips/clips.json, served as window.LitClips by /lit/clips.js). One wrapper sits at
+  // `box` over the film and holds the clip's frame for t: frame floor((t - start) * fps) + 1, counted from `from`
+  // and kept within from..to. Nothing reads a real clock and no <video> is involved, so the frame is a pure
+  // function of film time. Before `start` and past `to` the wrapper is hidden and show returns null, unless
+  // `hold` keeps the last frame or `loop` wraps by frame index. The wrapper is what a page scales or fades.
+  function clip({ parent, id, box } = {}) {
+    const all = root.LitClips;
+    if (!all) throw new Error('LitStage.clip: load <script src="/lit/clips.js"></script> after the kit; this stage declares no clips (clips/clips.json)');
+    const c = all[id];
+    if (!c) throw new Error(`LitStage.clip: no clip "${id}" in clips/clips.json (declared: ${Object.keys(all).join(", ")})`);
+    if (!parent || !box || !(box.w > 0) || !(box.h > 0)) throw new Error("LitStage.clip: needs { parent, id, box: { x, y, w, h } }");
+    const wrap = document.createElement("div");
+    wrap.setAttribute("data-lit-clip", id);
+    Object.assign(wrap.style, { position: "absolute", left: `${box.x}px`, top: `${box.y}px`, width: `${box.w}px`, height: `${box.h}px`, display: "none", pointerEvents: "none" });
+    parent.append(wrap);
+    let shown = 0;
+    let img = null;
+    return (t, { start = 0, from = 1, to = c.count, loop = false, hold = false } = {}) => {
+      if (!(from >= 1 && to <= c.count && from <= to)) throw new Error(`LitStage.clip: from..to must lie within 1..${c.count} (got ${from}..${to})`);
+      const n = to - from + 1;
+      const k = Math.floor((t - start) * c.fps + 1e-6);
+      const i = k < 0 ? 0 : k < n ? from + k : loop ? from + (k % n) : hold ? to : 0;
+      wrap.style.display = i ? "block" : "none";
+      if (!i) return null;
+      if (i !== shown) {
+        // A new <img> per change: init.js decodes every img in the document before a frame is captured.
+        const next = document.createElement("img");
+        next.src = `${c.src}/frame_${String(i).padStart(4, "0")}.png`;
+        next.alt = "";
+        Object.assign(next.style, { display: "block", width: "100%", height: "100%", objectFit: "contain" });
+        if (img) img.replaceWith(next);
+        else wrap.append(next);
+        img = next;
+        shown = i;
+      }
+      return wrap;
+    };
+  }
+
   // ---- the page contract ----
   const FORMATS = [[1920, 1080], [1080, 1920]];
   function define(spec) {
@@ -697,5 +736,6 @@
     clipRect, clipCircle, maskLinear, wipe,
     mix, rgba,
     clamp, lerp, invLerp, remap, smoothstep,
+    clip,
   });
 })(typeof window !== "undefined" ? window : globalThis);

package/plugin/skills/lit-typographic-motion/references/stage.md

@@ -15,7 +15,7 @@ The page lives at `<dir>/stage/index.html`, next to the local files it uses (SVG
 CSS, WAV). Only that folder is served, under the origin `http://lit.stage`; a symlink that resolves
 outside it is a contract error.
 
-Four routes come from the renderer itself and are always available:
+These routes come from the renderer itself (the first three bullets always, the last only with declared clips):
 
 - `<link rel="stylesheet" href="/lit/fonts.css">` declares the verified faces (table below).
 - `<script src="/lit/stage-kit.js"></script>` defines the global `LitStage`.
@@ -23,6 +23,8 @@ Four routes come from the renderer itself and are always available:
   film's house style for its format: custom properties, the type-role and colour classes, `window.LitStyle`
   (tokens and pixel zones) and `window.LitTimeline` (the treatment's shots). Set copy with the classes;
   the gate checks the rendered result either way.
+- `<script src="/lit/clips.js"></script>` defines `window.LitClips` when the stage declares keyed clips
+  (Clips); without a declaration the route does not exist.
 
 The page hands the renderer its spec with `LitStage.define({ width, height, fps, duration, render })`, or
 by assigning the same object to `window.litStage`. `define` checks the spec as soon as it is called:
@@ -102,6 +104,10 @@ along an angle.
 `rgba(colour, alpha)` sets alpha. `clamp`, `lerp`, `invLerp`, `remap(x, a, b, c, d)` and
 `smoothstep(a, b, x)` cover the rest.
 
+**Clips.** `clip({ parent, id, box })` registers a declared keyed clip once and returns a `show(t, opts)`
+function to call from `render(t)` (see Clips): `const boom = clip({ parent, id: "boom", box: { x: 1200, y: 300,
+w: 520, h: 511 } }); boom(t, { start: 2.1 });`.
+
 **Registration.** `text(el, { decor })` marks an element as a text run; `text({ content, x, y, w, h })`
 registers canvas or WebGL text for the frame being drawn (see Text and the QA).
 
@@ -124,6 +130,46 @@ A family outside this list falls back to a system face; the text QA reports it (
 when the run carries copy. Ask only for weights the family has, since the browser would fake a bold
 otherwise, and never animate letter-spacing or width on Hangul.
 
+## Clips
+
+Real keyed footage (a reaction clip, a spinning object shot on a green screen) can join the film as a
+layer of the page. The footage is keyed outside the renderer into one 8-bit RGBA PNG per frame, the frames
+are declared, and the page picks the frame from film time. Nothing is encoded by hand: the frames are
+captured with the rest of the page, so the flash audit, the determinism replay and the text checks run on the
+final pixels as for any other film. A declared clip is held to its own caps below; every other raster keeps
+the limits under "What a page may not contain".
+
+1. Put each clip's frames in the run's stage folder as `stage/clips/<dir>/frame_0001.png`,
+   `frame_0002.png` and so on, with no gap and no other image in that folder.
+2. Declare them in `stage/clips/clips.json`:
+
+   ```json
+   { "clips": [ { "id": "boom", "dir": "01-vine-boom", "count": 122, "fps": 30 } ] }
+   ```
+
+   `id` is the name the page uses, `dir` a folder directly under `clips/`, `count` the number of frames
+   and `fps` the clip's own rate (1 to 30). A clip used twice is declared once.
+3. The page loads `<script src="/lit/clips.js"></script>` after the kit, calls
+   `LitStage.clip({ parent, id, box })` once per use, and calls the returned `show(t, opts)` inside
+   `render(t)`. `parent` is the element the clip sits in and `box` its place in pixels; the frame is fitted
+   inside it. `show` returns the clip's wrapper element, or `null` while the clip is hidden, so a page can
+   scale, fade or move the wrapper from `t` like any other layer.
+
+The frame shown is `floor((t - start) * fps) + 1`, counted from `from`. A cue is therefore plain
+arithmetic: a clip whose own sound begins at frame N and must land on a cue at `cue` seconds has
+`start = cue - (N - 1) / fps`. Options: `start` (film seconds, default 0), `from` and `to` (the frame range,
+default the whole clip), `loop` (wrap by frame index) and `hold` (keep the last frame). Before `start`, and
+past `to` without `loop` or `hold`, the clip is hidden.
+
+The scan refuses, with exit 17 and the clip named: more than 12 clips; more than 360 frames in a clip or
+1500 in all; more than 40 MB in a clip or 128 MB in all; a frame over 720 px on its long side (a clip is
+an overlay, not the film); a rate above 30 fps; frames of mixed sizes; a missing or extra frame; a frame
+that is not an 8-bit RGBA PNG, or that has no transparent pixel in the first, middle and last frame (an
+opaque video is not keyed); an animated image; and a duplicate `id`. A frame folder that is not declared,
+and any frame sequence beside a declared clip, is still a flipbook. Cover mode takes no clips. The text
+checks read DOM text only, so keep clips clear of copy and check the stills. The manifest and the report
+list each clip.
+
 ## Who owns time
 
 The renderer does. An init script installed before the page loads replaces the wall clock with a virtual
@@ -151,7 +197,8 @@ the first differing 64×64 region. Variation comes from `LitStage.rand(seed)`.
   150 KB or carrying a `@license` banner is flagged as a likely library in the warnings.
 - Too many or animated rasters. At most 24 raster files (PNG, JPG, WebP, GIF) and 8 MB in total; ten or
   more rasters of the same pixel size are treated as a flipbook; any animated GIF, APNG or WebP is refused.
-  All are exit 17. Rasters are textures and stills inside a drawn scene.
+  All are exit 17. Rasters are textures and stills inside a drawn scene; the one frame sequence a page may
+  carry is a declared keyed clip (Clips).
 - A film made some other way. A frame loop encoded by hand, a screen recording or an image sequence pushed
   through ffmpeg is not the deliverable, whatever it looks like. Every frame goes through this renderer.