dsh-claude-motion 2.11.0 → 2.12.0

package/skills/claude-motion/artifact-type/reference/recreate-ui.md

@@ -7,8 +7,7 @@ to what the camera sees. Claude is far better at recreating an interface
 from code than from memory or a screenshot, so when the source is
 reachable (their repo, a pasted component, a design file, a running
 build), read it and build from it; screenshots are for checking, not for
-measuring. It has to be THEIR product (or an original design): another
-company's distinctive UI is not yours to recreate.
+measuring. It has to be THEIR product or an original design.
 
 ## 1. Find the real thing
 
@@ -79,7 +78,7 @@ product chrome.
 - **Strip behavior**: no `<script>`, handlers, iframes, external
   `src`/`href`/`url()`; a product video becomes a clip asset. Product imagery becomes film assets
   (`assets/…`, referenced through `kit.assets.url(name)`) or inline SVG.
-- **Fonts**: ship the product's faces as font assets (a Google family, in a film of scenes: a slot of `fonts`, finalize.md's **Fonts**) and map its
+- **Fonts**: ship the product's faces as font assets (a Google family, in a film of scenes: a slot of `fonts`, rough-cut.md's `fonts`) and map its
   families onto them with a few override rules at the end of your module
   (`--font-ui: "BrandSans-500"`); a look-alike face is the first thing
   that reads "mock". **Icons**: product chrome is half icons, and a wrong
@@ -138,3 +137,129 @@ Say in the hand-off which parts are design rather than product, and put
 "Concept mock · Month YYYY" small and grey on the closing card. Never
 invent product features to fill a beat; film what exists or what the
 design shows.
+
+## When the film shows a product being used
+
+- **The person touches the real thing, not its caption** — retype the
+  placeholder inline, scrub the number field, recolor through the real
+  popover; never edit a heading that merely labels the design. Best
+  single beat in the walkthroughs: the cursor drifting down a menu with
+  the row tint following before it settles — a person deciding.
+- **Fidelity is the whole trick.** Called out as
+  blockers: a 28 px toolbar button drawn 24, a selection ring spanning the
+  row instead of hugging the text, a drag ghost painting under artboards,
+  text snapping under a slow zoom. Names and data are fictional ("Acme");
+  anything speculative gets a tiny grey "Concept mock · Month YYYY" on the
+  closing card.
+
+## Small things that are easy to get wrong
+
+- Cursor: about 30 px on screen at any zoom (counter-scale by 1/z), a click ring and press dip, a 5–8% hover tint on targets.
+- Marks that annotate UI ride with the camera; 8–10 px at 1080p, drawn on over 0.3–0.45 s, held 0.8 s or more.
+- Zoom: body UI text is about 26 px on screen or more, so 14 px UI text wants 1.9× or more. Build a mock window smaller and denser (about 1440×900 on a 1920-wide stage) so that a 2–3× camera has somewhere to go, and never sit on a whole window longer than about 1.2 s.
+- Causality: the field is clicked, text types with visible keystrokes (20–26 characters a second, with jitter), the button lights, the result builds.
+
+## The kit for product films
+
+**Marks** draw themselves on, as if by hand: `const marks = new kit.Marks(kit.svgLayer()); marks.add({id, kind, t0, dur, out,
+color, width, …geometry}); marks.render(t)`. Set `color` from the film's palette: a mark with none draws red. Kinds and geometry: `circle {x,y,w,h}`, `underline {x,y,w}`, `arrow {from:[x,y], to:[x,y]}`,
+`bracket {x,y,h,side}`, `scribble {x,y,w,h}`, `burst {x,y,r}`, `check {x,y,size}`, `cross`, `path {d:[[x,y],…]}`.
+
+**Geometry** for camera keys and cursor targets (stage px; measure in
+`init` after building, or per frame for moving things): `kit.srect(node)` → `{x,y,w,h}` as seen on the
+stage (camera included); `kit.camrect(node, cam)` → the same in the
+camera's un-zoomed scene space (author camera keys, marks and cursor
+targets in this space); `kit.center(node, dx, dy)` → a `() => [x,y]`
+for cursor keys; `kit.phraseRect(el, 'phrase')` /
+`kit.phraseCamRect(el, phrase, cam)` → the box of a sub-string (null
+until it has streamed in) for underlines and circles.
+
+**Cursor** — `const cur = kit.cursor()` mounts the arrow at stage level
+and returns it; move `cur.el` into your camera layer to author in scene
+coordinates (it then scales with the zoom; counter-scale by 1/z if you
+want it a constant ~30 px). `cur.keys = [{t, at: [x,y] | () => [x,y],
+bow?: 0.12, lin?}]` (eased, arced travel between keys), `cur.clicks =
+[t…]` (ring + press dip), `cur.holds = [[a,b]…]`, `cur.ewSpans`,
+`cur.shapes = [{spans: [[a,b]], gfx: kit.cursors.text}]`,
+`cur.visible = t => opacity`; `cur.render(t)`.
+
+**Walkthrough devices** — `kit.chip(text, {x, y, anchor: [ax, ay]})`
+→ a caption chip (white pill, 26 px system sans unless `style:
+'font-family:…'` names a font asset; leader + dot to the anchor);
+`kit.show(node, t, tIn, tOut?)` fades/raises it from t;
+`kit.spotlight(rect, amount 0..1, {pad = 24, radius = 18})` dims
+`kit.fx` outside the rect (call inside `render`, after your own fx
+drawing).
+
+**Plates (HTML sprites)** — `await kit.raster(htmlOrNode, {css, width,
+height, scale = 1})` in `init` → a canvas of that fragment rendered with
+the stage fonts by the export's own DOM rasterizer; `drawImage` it per
+frame for heavy static screens you only pan or zoom. Whatever `init`
+makes or decodes (plates, `kit.assets.image()`, measured rects) lives
+for the whole film; frames never reload assets. `kit.plateStats()`.
+
+## Content and design rules shared by every appifact family
+
+<!-- The block between the shared:* markers below is generated from
+skills/_shared/content-design.md by scripts/inline-shared.ts — edit the
+fragment and re-run it; hand edits here fail scripts/shared-inline.test.ts. -->
+
+In a film, motion.md and finalize.md decide how much to draw and when to ask.
+
+<!-- shared:content-design -->
+These rules are about the CONTENT authored into the appifact — the
+deck, the artboards, the dashboard, the seeded cards and rows — as
+opposed to its chrome (the kit, the toolbar, the document machinery).
+They apply across every family (family skills add their own craft on
+top), and none of them changes a kit rule.
+
+- **Do not add filler content.** Never pad a design with placeholder
+  text, dummy sections, or informational material just to fill space.
+  Every element should earn its place. If a section feels empty, that's
+  a design problem to solve with layout and composition — not by
+  inventing content. One thousand no's for every yes. Avoid "data slop"
+  — unnecessary numbers, icons, or stats that are not useful. Less is
+  more; bias towards minimalism.
+- **Ask before adding material.** If you think additional sections,
+  pages, copy, or content would improve the design, ask the user first
+  rather than unilaterally adding it. The user knows their audience and
+  goals better than you do.
+- **Targeted changes stay targeted.** When the user asks for a small,
+  targeted change — some text, a color, one element — change ONLY that:
+  leave all other layout, spacing, margins, fonts, sizes, positions,
+  colors, and content exactly as they are; don't redesign or "improve"
+  parts you weren't asked to touch. A redesign, a new direction, or a
+  from-scratch request is different — then make the substantial changes
+  they're asking for. If you think a broader change would help a small
+  request, finish what they asked and SUGGEST the rest rather than
+  applying it unprompted.
+- **Follow an existing design's visual vocabulary.** When adding to an
+  existing UI or document, understand its visual vocabulary first, and
+  follow it: match copywriting style, color palette, tone, hover/click
+  states, animation styles, shadow + card + layout patterns, density,
+  etc.
+- **Avoid AI slop tropes:** including but not limited to aggressive use
+  of gradient backgrounds, emoji (unless explicitly part of the brand),
+  and containers with rounded corners and left-border accent color.
+  Emoji in content: only if the brand or design system uses them.
+  (Appifact chrome is stricter still — never emoji as UI glyphs —
+  that rule is unconditional.)
+- **Recreate from source, not from memory or screenshots.** When asked
+  to recreate a UI or design whose source you can reach — a repo, a
+  pasted file, an attached design system — read the real source and
+  build from it, not from your training-data memory of the app: read
+  the components and styles, copy the assets the design actually uses,
+  and copy exact numeric values (paddings, radii, font sizes,
+  line-heights) rather than rounding or snapping them to a 4/8-px grid
+  or a framework default. Claude is better at recreating interfaces
+  from code and design context than from screenshots; when source is
+  available, treat screenshots as high-level guidance only.
+- **Do not recreate copyrighted designs.** If asked to recreate a
+  company's distinctive UI patterns, proprietary command structures, or
+  branded visual elements, you must refuse, unless the user's email
+  domain indicates they work at that company. Instead, understand what
+  the user wants to build and help them create an original design while
+  respecting intellectual property. (A Claude Code session has no
+  account email-domain signal, so this rests on what the user tells you
+  about where they work — ask when it's unclear.)
+<!-- /shared:content-design -->

package/skills/claude-motion/artifact-type/reference/render-offline.md

@@ -120,7 +120,9 @@ PNGs (ImageMagick: `montage t_*.png -tile 4x -geometry 480x270+4+24 sheet.png`).
   frames made here and the viewer's screen can differ.
 - A Google family named in `fonts` is not fetched here: a still shows its `or` (words that the ten
   shipped faces, rough-cut.md, can't spell: the machine's face). Say so with any
-  still you hand over (finalize.md's "Of fonts", F), and judge no spacing by it, only that each
+  still you hand over (later.md's "What to say about fonts", F), and judge no spacing by it, only that each
   line fits.
 - claude.ai chat may be unable to `read` an artifact's type files; there, ask
   for the skill's zip or work from Claude Code / Cowork.
+
+The film folder and the scripts that work on it are in film-folder.md.

package/skills/claude-motion/artifact-type/reference/rough-cut.md

@@ -1,251 +1,147 @@
-# A film of scenes, in a look of your own: its records
+# The film's records
 
-Part of "A new film: three questions, then the film" in this type's
-instructions, which say when each step happens and what you reply. This page is
-the records' format and how to write them. The example is another film's (a bell
-foundry's open day): copy how it is built, never its scenes, words, colors,
-typeface, shapes or times. `if_version`, wherever this page says it: only if your tool's
-input lists it; the version is in your last `list`, `get` or write of that document.
+This page holds the first batch and how a scene module is built. SKILL.md says when each step happens; finalize.md says
+how the film gets drawn. The example is another film's (a bell foundry's open day): copy how it's built, never its
+scenes, words, colors, typeface, shapes or times. `if_version` applies only if your tool's input lists it.
 
 ## The first batch
 
-Sent at once, before any scene is designed, in this order. The film then plays:
-the player draws a plain card with the scene's name for each scene still to come.
+Send it at once, before you design any scene, in this order. The film then plays, with a plain card for each scene
+still to come.
 
 **`film/meta`**, then **`modules/scenes.json`** (`kind` json):
 
 ```json
-{"v":1,"stage":"rough","look":"Cast bronze: Heavy metal shapes lit by furnace glow, rising slowly into place",
+{"v":1,"stage":"rough","look":"First bell: A drawn brick yard in morning light, with smoke and long shadows",
  "palettes":[["#17455C","#FFC24B","#FFF1DE","#2A1410"],["#10201D","#3E8F84","#C9E4DC","#D98A3D"],["#F3EFE6","#7A4B2A","#2B211A","#C8962E"]],"theirs":0,
- "width":1920,"height":1080,"fps":60,"background":"#10201D",
+ "width":1920,"height":1080,"fps":60,"background":"#F3EFE6",
  "fonts":{"display":{"family":"…","or":"…"},"sans":{"family":"…","or":"…"}},"scenes":[
   {"id":"yard","name":"The yard","dur":3,"desc":"Gates open on the foundry yard; the date sets in."},
   {"id":"pour","name":"The pour","dur":4.5,"desc":"The ladle tips; bronze runs into the mould."},
-  {"id":"ring","name":"First ring","dur":4,"desc":"The bell swings once; rings spread."},
+  {"id":"ring","name":"First ring","dur":4,"desc":"The bell swings once; the birds go up."},
   {"id":"come","name":"Come and see","dur":3.5,"desc":"End card: day, place, free entry."}]}
 ```
 
-- Three or four scenes for 20 s, five or six for 30, 24 at most, each ONE subject and ONE
-  action: an establishing open → the subject arrives → the thing happens →
-  closer scenes, each landing on motion → back out → an end card held 3 s or
-  more. The seconds add up to the Length answer; 300 at most.
-- `id`: lower-case letters, digits and `-`, a letter first, 32 at most. It never
-  changes, and no two are alike: comments and the user's own edits hang on it.
-  `name`: one to three words (48 characters at most), for a listener ("The pour",
-  not "Scene 2"): it labels the timeline and the card. `dur`: seconds, above 0.
-  `desc`: one plain sentence on what happens. A bad `id`,
-  `dur` or count stops the whole film.
-- One continuous action (one window, one camera move, one cursor's errand) is ONE scene, however
-  long: nothing carries over a cut. The one exception: a character or object that moves about or
-  travels (a window, screen, cursor, card or logo is not one). Where two scenes in a row show it,
-  the second must **open in the same framing, with it as the first's code left it**: place, size,
-  pose, speed; plan none of its moves ahead, in thought or in `shared.js`.
+**Scenes.** Plan two or three for 10 seconds, three or four for 20 and five or six for 30; the player takes 24 at most, and the seconds add
+up to the Length answer, 300 at most. Judge how rich the film should be (motion.md), and say "rich" or "plain" in `look`. Each scene makes one clear point, not one symbol, that the viewer can take in at once: cut what doesn't serve it, and keep the detail that does. Many films go from an establishing
+open, through the subject arriving and the thing happening, to an end card held 3 s or more, but that's a habit, not a
+rule: a poem may want one long drifting shot. Nothing blinks or cuts more than three times a second, rough or finished.
+
+- `id`: lower-case letters, digits and `-`, a letter first, 32 at most. It never changes and no two are alike, because
+  comments and the user's own edits hang on it. A bad `id`, `dur` or count stops the whole film.
+- `name`: one to three words (48 characters at most), for a listener: "The pour", not "Scene 2".
+- `dur`: seconds, above 0. `desc`: one plain sentence on what happens. A person is in it only if the ask needs one (motion.md).
+
+One continuous action (one window, one camera move, one cursor's errand) is ONE scene, however long: nothing carries
+over a cut. The one exception: a character or object that moves about or travels (a window, screen, cursor, card or logo
+is not one). Where two scenes in a row show it, the second must **open in the same framing, with it as the first's code
+left it**: place, size, pose, speed; plan none of its moves ahead, in thought or in `shared.js`.
+
+**Other fields.**
+
 - `stage`: `"rough"` until the film's last write: to the page, "not done yet".
-- `width`, `height`: vertical (Reels, TikTok, Shorts) is 1080 by 1920. `background`:
-  the picked ground (an overlay: `"transparent"`, and `.ground` paints nothing). `look`: the look in words, for you when you draw the scenes, which may
-  be another conversation: the picked option's name and line, and whatever they typed
-  or asked for, word for word; you decided: a name and line of your own.
-- `palettes`: every palette the Colors question offered, picked or not (a skipped
-  form's too), in the order shown (the picked one is not moved up), each its four
-  colors as `#rrggbb` in role order (ground, main, second, accent); offered in words
-  alone: settle each one's four now. `theirs`: how many of them, counted from the
-  first, are the user's (their brand, a design system), picked or not. One system's
-  tile and two palettes of your own: 1. The example: three of your own, the second
-  picked: 0. They answered Other, or in words of their own: the palette you made of
-  that stands ahead of the rest, and counts as theirs. Hexes alone: no name, no
-  title. No Colors question asked: the film's own four alone, `theirs` 1 if they are
-  the user's, else 0. For the page to offer again: keep both keys, as they are, at
-  every later write of this record.
-- `fonts`: the faces the film is set in. Four optional slots: `sans`, `serif`, `mono` for text,
-  `display` for headlines. A slot takes one of the ten faces that ship with the player, by id
-  (a plain string), or nearly any Google Fonts family with the nearest of the ten to stand in (in a text slot, one for text):
-  `{"family":"…","or":"…"}`. From memory: look nothing up. The player fetches it; `or` shows
-  where it can't (no such name; a family that also holds Chinese, Japanese or Korean; no
-  network). A family brings weights 400 and 700, or its nearest, never thickened; for others
-  name them all, four at most, beside `or`: `"weights":[400,800]`. `display` unnamed: headlines
-  take the film's `sans`, so a film set in a serif or a mono names it. Keep `fonts` at every
-  later write.
-
-The ten. For text: `plus-jakarta-sans` (wide), `manrope` (round), `space-grotesk` (angular),
-`instrument-sans` (narrow), `fraunces` (serif), `dm-mono`, `departure-mono` (pixel), these two
-of one weight. Headlines: `fraunces-display` (hairline), `inter-display` (loud),
-`shantell-sans` (hand-drawn).
-
-**Pick for THIS film**, from the look's words and the subject, never from habit: films
-in the same faces look machine-made, and your habit is the same quiet sans under every
-headline, with mono labels. Think where this look's lettering would be at
-home (a road sign, a dashboard, a shop sign, a terminal), then what KIND of face
-is found there (an old-style serif, a didone, a humanist, rounded or wide
-sans, a typewriter, a brush script), then a family of that kind, fit for work (questions.md). The first that comes to
-mind is the one every film would get, so look past it, to a name you are sure of. Most
-films want two, a `display` over a text face that has a bold, unlike in kind, weight or
-voice. A third only as `mono`: for code, a terminal, or figures that count up or sit in
-columns.
-
-The user names a family: that one, spelt right, in the slot they mean (titles:
-`display`; the text: `sans`, serif or not; the whole film or a house face: `sans`, and no
-`display`; one of the ten: its id). If it isn't Google's (Helvetica Neue): the nearest
-Google family. Files they gave: the nearest of the ten under them, no `display` of yours,
-their names in `look`; finalize.md's step 2 brings theirs in. The ten have Western European letters only (no ł, ő,
-ş). Any other letters (Polish, Turkish, Greek, Cyrillic, Arabic): two slots at most, each a well-known
-Google family that has them and Latin, none that the player ships, two weights each; `or` as ever (it won't show). Chinese, Japanese, Korean: leave `fonts` out,
-whatever they named.
-
-**`modules/base.css`** (`kind` css), six lines at most for now: the picked colors
-as variables (`--ground`, `--main`, `--second`, `--accent`, each once, a plain
-`#rrggbb`, no two alike), the ground painted from them (`.ground`, one per scene, at the
-bottom), the type stacks the film uses, written as below or as
-`var(--serif, Georgia, serif)`, `var(--mono, ui-monospace, monospace)`, never a family's
-name (`#stage` takes the one most words wear; in a serif or mono film `.line` has that one
-inside, in place of the sans one), the few classes every scene uses. It is applied
-before any scene, and keeps scenes written apart looking like one film.
+- `width`, `height`: vertical (Reels, TikTok, Shorts) is 1080 by 1920.
+- `background`: the picked ground (an overlay: `"transparent"`, and `.ground` paints nothing).
+- `look`: the look in words, for whoever draws the scenes, perhaps in another conversation: the picked option's name and
+  line, and whatever they typed, word for word. If you decided, a name and line of your own. Either way, add rich or plain. Before you write the look line, hold it against motion.md's never-draw list: no red rising sun with rays; no spread eagle or heroic figure against a red or pale disc, rays or a field of red. A sunset, a moon or a sunrise that the person asks for stays.
+- `palettes`: every palette the Colors question offered, picked or not, in the order shown (the picked one is not moved
+  up), each its four colors as `#rrggbb` in role order (ground, main, second, accent); for a palette offered in words alone, settle its
+  four now. `theirs`: how many of them, from the first, are the user's. If they answered Other or in words of their
+  own, the palette you made of that stands first and counts as theirs.
+  With no Colors question: the film's own four alone, `theirs` 1 if they are the user's, else 0. Keep both keys at every
+  later write: the page offers them again.
+
+**`fonts`** names the film's faces, in four optional slots: `sans`, `serif` and `mono` for text, `display` for headlines. A
+slot takes one of the ten faces that ship with the player, by id, or nearly any Google Fonts family with the nearest of
+the ten to stand in: `{"family":"…","or":"…"}`. Name it from memory and look nothing up; the player fetches it, and `or`
+shows where it can't. A family brings weights 400 and 700, or its nearest, never thickened; for others list them, four at most:
+`"weights":[400,800]`. With `display` unnamed, headlines take `sans`. A line must still fit where `or` shows, so leave it room.
+With a design system in play, its faces come first: from `type.families` in its `tokens.json`, a family Google hosts goes in its slot by name. Keep `fonts` at every later write. Never download a font or search the machine for one.
+
+The ten. Text: `plus-jakarta-sans` (wide), `manrope` (round), `space-grotesk` (angular), `instrument-sans` (narrow),
+`fraunces` (serif), `dm-mono`, `departure-mono` (pixel), these two of one weight. Headlines: `fraunces-display` (hairline,
+one weight, the only italic), `inter-display` (loud, to 900), `shantell-sans` (hand-drawn, slants from 600 up). `manrope` goes to 800.
+
+**Type is Inter and Space Grotesk unless the brief calls for other lettering.** With Western European words, no design
+system, and no family or lettering asked for in the request or in `Style (other)`, `display` is `space-grotesk` and `sans` is
+`{"family":"Inter","or":"instrument-sans"}`. A Style option alone leaves this default in place. Inter sets wider than
+`instrument-sans`, so leave each line room for it. If only `display` is named, `sans` still takes that default; if a text face
+is named, leave `display` unnamed. For other lettering, think what kind of face is at home there (a hymn book, a shop
+sign), then a family of that kind fit for work. Two faces are enough; a third only as `mono`, for code or figures in
+columns; figures that count up need `tabular-nums` in a mono, `instrument-sans`, `space-grotesk`, `plus-jakarta-sans` or
+`inter-display`.
+
+If the user names a family, use it, spelt right, in the slot they mean (titles: `display`; the text: `sans`; the whole film:
+`sans` and no `display`; one of the ten: its id), or the nearest Google family if it isn't Google's, and say so:
+"X isn't on Google Fonts, so I chose Y, the closest match there, and I'll use X if you send me its font files." Of a fetched family
+they named (Z is the shipped face underneath, or "a system font" for words the ten can't spell), say "X loads from Google Fonts when the animation opens, and Z shows instead if X can't load." With no `fonts` and no font file of theirs, say "The text uses each device's default font, so send me the font files if you want a specific one." In the one closing sentence, what you refused or
+the Export note comes first, then these font notes; after a font note, what you made up gets a short sentence of its own. Font files they gave go in as assets over the nearest of the ten, with no
+`display` of yours, each named by its stem in `base.css` ahead of the stack (`#stage { font-synthesis:style; font-family:"Face-400", var(--sans, system-ui, sans-serif) }`); a bold is a face of its own. The ten have Western European letters only: for other scripts use one or two well-known Google families that hold
+them, and for Chinese, Japanese or Korean leave `fonts` out.
+
+**`modules/base.css`** (`kind` css), six lines at most for now: the picked colors as variables, each once, a plain
+`#rrggbb`, no two alike (the page reads them to offer palettes); `.ground`, the element every scene paints first, at the bottom; the type stacks,
+written as below or as `var(--serif, Georgia, serif)` or `var(--mono, ui-monospace, monospace)`, never a family's name
+(`#stage` wears the one most words wear); the few classes every scene uses. Pin a group of words by the edge it grows
+away from, so that a line that wraps has room on any shape of film.
 
 ```css
-#stage { --ground:#10201D; --main:#3E8F84; --second:#C9E4DC; --accent:#D98A3D; color:var(--second); font-family:var(--sans, system-ui, sans-serif) }
+#stage { --ground:#F3EFE6; --main:#7A4B2A; --second:#2B211A; --accent:#C8962E; color:var(--second); font-family:var(--sans, system-ui, sans-serif) }
 .ground { position:absolute; inset:0; background:var(--ground) }
 .words { position:absolute; margin:0; display:flex; flex-direction:column; gap:24px } .words > * { margin:0 }
 .line { font-family:var(--display, var(--sans, system-ui, sans-serif)); font-size:84px; line-height:1.05; font-weight:700 } .sub { font-size:36px }
 ```
 
-**`film/script`**, last: `{"code":"window.CUT = kit.scenes();"}`, that line and
-nothing else, for the film's whole life. No later step writes it again.
+**`film/script`**, last: `{"code":"window.CUT = kit.scenes();"}`, that line and nothing else, for the film's whole life.
 
 ## A scene
 
-One document per scene, `modules/scene-pour.js` (`kind` js) for the scene `pour`, one
-`set` each, in film order, ONE call per message: think about one scene, write it,
-send it, read the reply, go to the next. Calls sent together arrive together.
+One document per scene: `modules/scene-pour.js` (`kind` js) for the scene `pour`. The player looks for that name and no
+other. finalize.md has a whole one; this is the bare shape.
 
 ```js
 const { seg, eio, lerp } = kit;
 kit.scene('pour', {
   init(kit) {
     kit.stage.append(kit.h('<div class="ground"><div class="pour-ladle"></div></div>'));
-    this.ladle = kit.stage.querySelector('.pour-ladle').style;
-  },
-  render(t) {
-    this.ladle.transform = 'rotate(' + lerp(4, -24, eio(seg(t, 0.3, 1.2))) + 'deg)';
-  },
-});
-```
-
-That is the bare shape. A finished scene, whole: finalize.md. A rough one: "How rough".
-
-- A scene is a small cut of its own. One `kit.scene` call per module, for the
-  module's own id. `init(kit)` builds the scene once inside `kit.stage` (optional;
-  may be async). `render(t, kit)` is required, synchronous and pure: every varying
-  property set from `t` alone, SECONDS since the scene began. No CSS transitions
-  or animations, no timers. Both are called as methods, so `this` carries what
-  `init` built over to `render` (under any names but `lead` and `tail`, the player's).
-  At a module's top level: constants and that call, no DOM. `init` awaits whatever
-  `render` needs: the player tries `render(0)` as soon as `init` settles, and a throw
-  there fails the scene.
-- The whole film loads again at every write: keep each `init` light.
-- A scene's `kit` is its own: `kit.stage` is the scene's box, which fills the stage
-  and has no ground of its own (`scenes.json`'s `background` lies behind it); what
-  `kit.css`, `kit.cursor`, `kit.svgLayer` and `kit.chip` make stays in the scene;
-  `kit.video`'s `start` and `kit.typist`'s `t0` count from the scene's beginning.
-  `kit.dur`: the scene's seconds. `kit.start`: where it begins in the film. `kit.fx`
-  is one canvas, shared by all scenes: set its state (lineWidth, fillStyle,
-  a clip) in `render`, never once in `init`.
-- A scene's own class names begin with its id (`pour-ladle`).
-- Scenes cut from one to the next: open what moves about as it was left; else build each to stand
-  alone, and to hold its first and last picture for a `t` below 0 or past `kit.dur` (`seg` does).
-  The first scene at `t` 0 is the poster and thumbnail: never blank.
-- No flashes: nothing blinks or cuts more than three times a second, rough or
-  finished. No scene under a second.
-- `scenes.json`, `base.css`, `shared.js`, `score.js` and any name that begins `scene-`
-  or `layer-` are the player's: name no other module so.
-- A line of words is ONE string in ONE element, as the viewer reads it: the page
-  lets the user retype it, and finds it by those words. So no id, class name or
-  key spelt like words on screen.
-- Lines that belong together (headline, subtitle, button) sit in ONE flow
-  container (`.words`, a flex column with a gap), placed as a group, so that a line
-  that wraps pushes the next one down; never each at its own `top`. A lone line sits
-  in a `.words` too: `.line` has no place of its own.
-- Markup in single-quoted strings, `style="…"` in double quotes, no quotes inside
-  a style: a nested quote silently ends the style; the rest is lost.
-- Helpers: `kit.el`, `kit.h`, `seg(t,a,b)` (0 to 1 across a to b), `lerp`, `clamp01`,
-  `eo` `ei` `eio` (eases). The rest of the kit waits for finalize.md's step 1 (film-api.md).
-  `kit.h` returns ONE element, the first in its string: wrap siblings in one root,
-  or call it once for each.
-
-## How rough
-
-Only for a film whose scenes are rough already (a change to it, Continue). No new film
-is written so.
-
-A wireframe: the real words, places, sizes and timing.
-
-- What you write: the picked ground, one ink that reads on it (`--second`), and type in
-  the sizes and weights it will have, from `base.css`. All four picked colors stand
-  there as variables from the start; `--main` and `--accent` wait for Finalize.
-- What the player shows: a rough scene as if drawn by hand in black and white: not
-  yours to imitate, mend or undo. No picked color shows until Finalize redraws the
-  scene: say so only if asked, or after a change of color.
-- Every object is an outline (2 px, no fill). One that holds no words of its own
-  gets a short label in small capitals saying what it will be: LADLE, LOGO, CHART.
-  A label is a placeholder, not the film's words: write it `data-label="LADLE"`
-  (`base.css` draws it), so that the page never offers it for retyping, and at
-  Finalize the drawing takes its place. Words that belong to the film (a chart's
-  BEFORE and AFTER) are real text, and stay.
-- No fill, texture, shadow, secondary motion, camera, sound, font file or image asset.
-
-`base.css` holds these too:
-
-```css
-.box { position:absolute; margin:0 }
-.box { border:2px solid var(--second); box-sizing:border-box; font-size:30px; letter-spacing:.12em }
-.box::after { content:attr(data-label); position:absolute; left:14px; bottom:10px }
-```
-
-```js
-const { seg, eo, lerp } = kit;
-kit.scene('pour', {
-  rough: true,
-  init(kit) {
-    kit.stage.append(kit.h('<div class="ground">' +
-      '<div class="box" data-label="MOULD" style="left:760px;top:560px;width:400px;height:360px"></div>' +
-      '<div class="box pour-stream" style="left:942px;top:330px;width:36px;height:230px"></div>' +
-      '<div class="box pour-ladle" data-label="LADLE" style="left:960px;top:170px;width:300px;height:170px;transform-origin:0 100%"></div>' +
-      '<div class="words" style="left:140px;top:150px;width:560px"><h2 class="line">Eleven hundred degrees, four minutes</h2>' +
-      '<p class="sub">Bronze, poured by hand</p></div></div>'));
-    for (const k of ['ladle', 'stream']) this[k] = kit.stage.querySelector('.pour-' + k).style;
+    this.ladle = kit.stage.querySelector('.pour-ladle');
   },
   render(t) {
-    this.ladle.transform = 'rotate(' + lerp(0, -24, eo(seg(t, 0.4, 1.2))) + 'deg)';
-    this.stream.opacity = t > 1 && t < 3.6 ? 1 : 0;
+    this.ladle.style.transform = 'rotate(' + lerp(4, -24, eio(seg(t, 0.3, 1.2))) + 'deg)';
   },
 });
 ```
 
-## Scenes missing or broken
-
-A turn cut short leaves listed scenes with no module; a scene whose code fails
-shows its name card in place of the scene, and nobody tells you. At "Continue the
-animation." (it may go on "Scenes left: 2, 3.": positions in `scenes.json`, from 1,
-never a count: here `pour` and `ring`; "Scenes left: 2." is `pour` alone), or when you find it so: `list` `modules`; read the named scenes that have a module, or all,
-for a slip and mend it (`if_version`). No scene is rough: finalize.md's "Cut short"
-(not in this conversation: `read` it first): what is missing is written finished, then, the
-stage still rough, the score and `"final"`. Else write what is missing, rough, in film order,
-one `set` per message, and go no further.
-
-## A change
-
-`list` `modules` (every document whole, with its version), change the scenes it
-touches at the same roughness (`rough: true` stays), `set` each with `if_version`. A
-change of color: the variables in `base.css` (a new ground: `scenes.json`'s
-`background` too); where scenes are rough, the one sentence more says it will show at Finalize. A scene added,
-dropped, renamed, retimed or moved is an edit to `scenes.json` (`if_version`;
-`"stage"` stays `"rough"`; no scene is rough: finalize.md's "Cut short" follows): a new scene's module after it, a dropped scene's module
-`delete`d (`if_version`). Scenes that stay keep their ids. On a final film the
-same, finished, as finalize.md says of a final film (not in this conversation: `read`
-`artifact-type/reference/finalize.md` first): a new scene has no `rough: true`, the stage stays `"final"`, and
-`score.js` is fitted to the new times, with no `T.` of a dropped id left (it would
-sound at 0:00). `modules/{retyped,recolored,refaced,fetched-fonts,recut,retouched}.json` are the page's own
-records: never write or delete them. If the film holds one besides fetched-fonts.json,
-first `read` `artifact-type/reference/by-hand.md`, which says what counts.
-
-## Finalize
-
-Its steps are on a page of their own, `artifact-type/reference/finalize.md`.
+- One `kit.scene` call per module, for its own id. At the top level: constants, the drawings it adds to `W` for
+  later scenes (finalize.md) and that call, no DOM.
+- `init(kit)` builds the scene once inside `kit.stage`. It's optional and may be async. The whole film loads again at
+  every write, so keep it light, and await whatever `render` needs: the player tries `render(0)` as soon as `init` settles,
+  and a throw there fails the scene.
+- `render(t, kit)` is required, synchronous and pure: it sets every varying property from `t` alone, in seconds since the
+  scene began. No CSS transitions or animations, no timers, nothing remembered from the frame before. What `init` built
+  goes on `this`, under any names but `init`, `render` and `rough`.
+- A scene's `kit` is its own: `kit.stage` fills the stage and has no ground of its own, and what `kit.css` and `kit.svgLayer`
+  make stays in the scene. `kit.dur` is the scene's seconds, `kit.start` where it begins; `kit.video`'s `start` and `kit.typist`'s
+  `t0` count from the scene's beginning. `kit.fx` is one canvas shared by all scenes: set its state in `render`, never in `init`.
+- Scenes cut from one to the next. Open what moves about as it was left; else build each to stand alone, holding its
+  first and last picture for a `t` below 0 or past `kit.dur` (`seg` does). The first scene at `t` 0 is the poster and
+  thumbnail: never blank.
+- A scene's class names and ids begin with its id (`pour-ladle`). `scenes.json`, `base.css`, `shared.js`, `score.js` and any
+  name that begins `scene-` or `layer-` are the player's: name no other module so.
+- Helpers: `kit.el`, `kit.h` (returns ONE element: wrap siblings in one root), `seg(t,a,b)` (0 to 1 across a to b), `lerp`,
+  `clamp01`, `eo` `ei` `eio` (eases). The rest is in film-api.md.
+
+Three things the page's own tools depend on:
+
+- **A line of words, a drawing's labels and signs too, is ONE whole string literal in an HTML element, never svg `<text>`
+  or `fillText` (svg the user gave aside).** The page lets the user retype it and finds it by those words, so no id, class or key is spelt like
+  them. Word by word: `kit.TextFx` or `line.split(' ')`, never written in pieces.
+- **Lines that belong together** sit in ONE flow container (`.words`), placed as a group, so that a line that wraps pushes
+  the next one along. A lone line sits in a `.words` too.
+- **Markup goes in single-quoted strings, `style="…"` in double quotes, no quotes inside a style:** a nested quote silently
+  ends the style, and the rest is lost.
+
+`modules/{retyped,recolored,refaced,fetched-fonts,recut,retouched}.json` are the page's own records: never write or
+delete them. If the film holds one besides fetched-fonts.json, first read `artifact-type/reference/by-hand.md`.
+
+A change, Scenes missing or broken, How rough, Finalize ("A rough cut redrawn"), Cut short: now in `artifact-type/reference/later.md`.