dsh-claude-motion 2.11.0 → 2.12.0

package/skills/claude-motion/artifact-type/reference/finalize.md

@@ -1,213 +1,128 @@
-# The finished film, in a look of your own
-
-Part of "A new film: three questions, then the film" in this type's
-instructions. The film holds `look.json`: not this page, styles.md's "Finalize". How a
-film of scenes is built, and `if_version`: `artifact-type/reference/rough-cut.md`. Not in
-this conversation: `read` it, with step 1's pages. `pour`, `bell` and `tip` below are its
-example's, another film's. No step here writes `film/script`: it stays the one line the
-first batch wrote, `window.CUT = kit.scenes();`.
-`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. The rules of
-rough-cut.md's "A scene" hold for a finished scene too, above all:
-
-- No flashes: nothing blinks or cuts more than three times a second, rough or
-  finished. No scene under a second.
-- 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.
-- 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 or a `textPath` aside). Word by word: `kit.TextFx` or
-  `line.split(' ')`, never written in pieces.
-
-Four kinds of film come here. Go by what the film holds:
-
-- **A new film** (this turn wrote the first batch): the five steps.
-- **A rough cut** (a scene has `rough: true`, none is finished): the steps as "A rough cut
-  redrawn", below them, changes them.
-- **Cut short** (any other film whose stage says rough: a turn died with none, some or all
-  of its scenes finished; or a final one with scenes missing or failing): "Cut short", at the
-  end of this page, first.
-- **A final film, a change** (rough-cut.md's "A change"): step 3's way of drawing a scene; another typeface:
-  "Another typeface", below step 5;
-  `score.js` refitted if times or scenes changed (sound.md first, if not in this
-  conversation); a silent film has none.
-
-Every kind but the first has scenes on show: `base.css` and `shared.js` are added to, nothing
-renamed or removed, type sizes and weights as they are, unless that is the change asked for; what is there already takes `if_version`, its version
-from your `list` or your last write of it.
-
-**The five steps**
-
-1. Read motion.md and film-api.md in one message, unless this conversation has their text, whole
-   (recreate-ui.md too if it shows their product; rough-cut.md too if it is not in this conversation). sound.md waits for step 4.
-2. **What the scenes share, ONE `batch`, your first write here, small** (uploads alone go ahead): 1,500 to 2,000
-   characters of `base.css`; `shared.js` only if two listed scenes draw the same thing, and
-   most films have none. Settle the shared look from `scenes.json`'s `look` and the color variables, write it and send it before you
-   think of any one scene. First `modules/base.css` (`if_version`: the version the first
-   batch's reply gave; none shown: `get` it), whole: the four color variables and the type stacks as they are, then the finished look
-   that scenes share (type sizes, and weights from among those that `fonts` brings, settled now; colors, radii, spacing) as classes (a headline class wears `.line`'s stack).
-   Scenes refer to it and never repeat it inline, so that a film-wide change is one write. A new shade is mixed from the color variables
-   (`color-mix(in srgb, var(--main) 70%, var(--ground))`, quieter; with
-   `var(--second)`, stronger; a panel: `var(--ground) 92%, var(--second)`), never
-   black, white or a new hex. See-through: `color-mix(in srgb, var(--second) 20%,
-   transparent)`, never the color spelt again as `rgba()`. A shadow alone may be
-   `rgba(0,0,0,.25)`. Their product's lifted CSS keeps its own colors.
-   Then the new documents (uploads come first).
-   `modules/shared.js` (`kind` js), run once before any scene: the drawing or helper
-   that the list already shows two scenes share, no more (a scene can hold its own), on
-   `window` (`window.UI = { bell(kit, size) { … } }`).
-   A helper takes the scene's `kit` as a parameter: the `kit` that `shared.js` itself
-   sees is the film's, and what that one adds sits over every scene. Nothing shared: no
-   `shared.js`. Each font and image as its `assets` document.
-   **Fonts.** `scenes.json`'s `fonts` stands:
-   change it only when the user asks for another typeface, or their product's own face is a
-   Google family (recreate-ui.md): a free `serif` or `mono` that nothing wears (none free, or words the ten can't spell: the film's `sans` stack), `scenes.json` in this batch (`if_version`); the
-   product's CSS takes that slot's stack. Never download a font, look one up, or search
-   the machine for one. Weights, beyond what rough-cut.md says:
-   `inter-display` goes to 900, `manrope` to 800, `fraunces-display` has one, `shantell-sans`
-   slants from 600 up. No italic but `fraunces-display`'s: a fetched family brings none. A line
-   must still fit where `or` shows: leave it room. Figures that count up
-   or sit in columns need `tabular-nums`: set them in a face that surely has them (any mono;
-   of the ten `instrument-sans`, `space-grotesk`, `plus-jakarta-sans`, `inter-display`); none in the film: the mono stack, as rough-cut.md writes it. A stack with
-   no face named (that mono; a film with no `fonts`) stands, whatever film-api.md says of
-   system stacks. In js: `kit.fonts.sans`, `.serif`, `.mono`,
-   `(kit.fonts.display || kit.fonts.sans)`; they hold double quotes, so inside
-   a `style="…"` write the stack as `base.css` does: `var(--sans, system-ui, sans-serif)`.
-   Font files they gave you (or that their code holds, for the product's CSS alone): upload them
-   together (not at hand: go on without; E, below); each is an asset, named by its file's stem
-   in `base.css` ahead of its stack, the one case where `base.css` names a face
-   (`#stage { font-synthesis:style; font-family:"Face-400", var(--sans, system-ui, sans-serif) } .line { font-family:"Face-700", var(--display, var(--sans, system-ui, sans-serif)) }`).
-   A bold is a face of its own: a class that wants it names it; in js it goes ahead of `kit.fonts.sans`; `fonts` stays.
-3. **Each scene, in film order, one `set` each**, a new document (no `if_version`), ONE
-   call per message, the scene inline in the call, written once and sent at once: they
-   are watching. **No scene by way of a file or shell script, and render nothing of the
-   film unasked**, even with a browser at hand: what other pages say of stills,
-   `frames.ts`, `check.ts` and `export.ts` does not hold here. The list is the plan: lay
-   out no scenes ahead. Think of one, write it, send it, read the reply, go to the next;
-   whatever motion.md or recreate-ui.md says of asking, no question now except the one that
-   decides a refusal (ask, end the turn; their answer takes it up: a film still rough, by "Cut short"). Compose it from its `desc` and
-   the look, and draw it in full, as below: shapes with fills, light, motion from first
-   frame to last. No `rough: true`. About 2,000 characters a scene, like the one below;
-   3,500 at most (their product's UI, or a scene over 8 s: what it needs): what they wait for is what you write.
-4. **Last, ONE `batch`: the score, then the stage**, so that the film loads once. They
-   asked for silence: no `score.js`, no read. Else first `read` sound.md (what it says of
-   `check.ts` and `export.ts` does not hold here either).
-   `modules/score.js` (new, `kind` js): `kit.score(function (S, T) { … })`. `S` as in
-   sound.md; `T` holds each scene's start in seconds by id, and `T.END` the film's
-   length: `S.fx('pop', T.pour + 1)`. Then `modules/scenes.json` (`if_version`: your last version of it), whole, with
-   `"stage":"final"` and nothing else changed (`fonts`, if you added it, stays).
-5. That batch ends the work: the closing words of the instructions' section 2, as quoted, and its one sentence more if there is one (of fonts: below). Four sentences at most (five: below); the link, where one is wanted, after "Here's your animation"; nothing of artifact types or how it was made; the music is not named, whatever sound.md says. Then end the turn. No stills: they are playing it and will say what is off.
-
-**Another typeface**, on a final film: `fonts`, as rough-cut.md says, in the slot whose stack
-those words wear now, so that no stack changes, with 400 and `base.css`'s weights;
-one that the face lacks: `base.css` takes its nearest. A scene only to widen a
-line's box, never shrink its type. A font asset named ahead of that stack comes out of
-`base.css` and of any scene, and stays in `assets`: asked for back, name it again. What
-`modules/refaced.json`'s `about` says of a font asset holds for their own files alone.
-
-**Of fonts** say only these, as quoted (X: the family; Y: yours; Z: the shipped face underneath; words
-the ten can't spell: "a system typeface"). As the one sentence more they rank: what you refused, or the file they asked for (Export); A, D or E; what else
-you could not do; a design system's colors that they did not pick (questions.md); B or C.
-After one of these, anything you made up: a short sentence of its own (five in all).
-
-- A. They named X, which isn't Google's: "X isn't on Google Fonts, so I chose Y, the
-  nearest there: send me X's font files and I'll use them."
-- B. They named X, fetched (not one of the ten), or ask what a fetched face is called: "X
-  loads from Google Fonts when the animation opens; where it can't, Z shows."
-- C. No `fonts`, no `modules/refaced.json`: "The words show in each device's own typeface:
-  send me font files if you want a particular one." (They named a family for such words: it
-  ranks with A.)
-- D. `modules/refaced.json` is there, you changed `sans`, the ten spell the words: "The typeface picked on the
-  page still shows: set Font, under Style, to Original to see the new one."
-- E. `look` names font files, you have none, `assets` holds none: "I no longer have
-  your font files, so Z shows: send them again and I'll use them."
-- F. With any still of a film that has a fetched family: "This still shows Z where the
-  animation loads X from Google Fonts."
-
-C, E: not where `base.css` names a font asset of theirs. None fits: nothing of fonts but a name they ask for.
-A final film's typeface changed: D first, if it fits; what changed, without a
-fetched family's name; then A or B, if one fits.
-
-**A finished scene**, the list's `pour`: copy how it is built, never its scenes, words,
-colors, shapes or times, nor how its line comes in: motion.md's "Type in motion" has more
-ways than this one (a number counts, a phrase splits, a word lands and stays; typed:
-`kit.typist`), and `fadeFromRight`'s options set drift and pace. Pick for THIS film, scene by
-scene. `base.css` grew by these:
-
-```css
-.ground { background:radial-gradient(120% 90% at 50% 115%, color-mix(in srgb, var(--main) 40%, var(--ground)), var(--ground)) }
-.sub { color:color-mix(in srgb, var(--second) 70%, var(--ground)) }
-.art { position:absolute; inset:0; width:100%; height:100%; overflow:visible }
-.metal { fill:color-mix(in srgb, var(--ground) 78%, var(--second)); stroke:var(--second); stroke-width:3; stroke-linejoin:round }
-.hot { fill:var(--accent) }
-.glow { position:absolute; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--accent) 55%, transparent), transparent) }
-```
+# Making the film
+
+This page takes a film from its list of scenes to the end. Its work begins straight after the first batch. Any later turn goes by later.md.
+
+The order of work is the world, then the scenes, then the score. A scene thought up on its own comes out thin, one shape and a line of type, and a film of those looks like a slide deck. When the world is settled first and its things are drawn once, with care, every scene starts from something drawn and the film looks as if one hand made it. The bar is a film someone would stop scrolling for, as rich as the ask wants and no richer (motion.md).
+
+## How to work
+
+**Think briefly and write.** Someone is watching the film arrive. Settle the world in a few lines of thought, and each scene in a few more. Never draft code in your thinking: the tool call is the draft, and anything you write twice doubles the wait. One reply can hold only so much, and a reply spent on thinking ends with no film at all, which is the worst outcome there is. A good film that arrives beats a perfect one that doesn't. That holds when they ask for your very best or tell you to take your time: care goes into what you draw, not into a longer plan.
+
+**Every write goes inline in the tool call**, however long: `base.css`, `shared.js`, every scene, the score. Build nothing in a file or through the shell, and don't use `file_path` here (uploads and a product's lifted CSS aside). If a document feels too long to write inline, draw less of it.
+
+**Budget.** On a rich film the drawings on `W` run 3,000 to 6,000 characters and a scene's own code 2,500 to 5,000; a plain one takes less. Take what the picture needs, and stop. Their product's UI, or a scene over 8 s, takes more.
+
+**Render nothing unless they ask**, even with a browser at hand: what other pages say of stills and scripts doesn't hold here. Ask no questions while you make the film, whatever motion.md or recreate-ui.md says of asking, apart from one that decides a refusal: ask it and end the turn, and take the film up by later.md's "Cut short".
+
+## 1. Have motion.md and film-api.md
+
+If this conversation lacks their text, whole, read them in one message, before any world or scene: the rules of a film's look are there. Add recreate-ui.md if the film shows their product, and design-systems.md if a system is in play.
+
+## 2. Settle the world
+
+Answer these for this film, from the look, the palette and the scene list, in a few lines of thought:
+
+- **Where are we?** A real place, with a time of day and weather. For an explainer or a report, a drawn system: a cross-section, a map, a workbench, a model railway, a cutaway machine. "A blank slide" isn't a place.
+- **What is it made of, and where's the light?** The material and the hand (gouache, tin toys, blueprint ink, stitched felt, chalk) decide the edges, the texture and how things move. One light source decides what's lit and what's in shadow. 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.
+- **Who and what recurs?** Three to six things the viewer will remember: a character, a vehicle, a building, a tool, a chart.
+- **What small things are true only here?** A few invented specifics: the cat asleep on the vending machine, a cobweb on the trophy. They make a film feel made for someone.
+- **What's the idea?** Where the brief has room for one, the unexpected way of telling it that someone would describe to a friend.
+- **What is already decided?** With a system in play, its colors, type, logo and icons are settled, so your invention goes into everything else. Think how their real things live in this world: the logo on the side of the truck, an icon as a street sign.
+
+Then hold it to the brief. Everything they asked you to show or say, except what you refused, appears on screen in their words and figures. The look they asked for is the look, within what motion.md's Looks allow. The world serves the brief and never replaces it.
+
+When the brief is plain work (a product promo, an explainer, a results update, a board paper), the words, numbers and product are the subject and the world stays quiet. Pick a visual system that suits the subject and draw its parts well: a chart can be a drawn object with depth, and a process can be a machine. Keep every number theirs or clearly made up. If the film shows their product, screenshots or logo, the world frames them and never restyles them (recreate-ui.md).
+
+## 3. Draw the backdrop, in one batch
+
+Your first write here is one `batch` holding `modules/base.css` and `modules/shared.js` (uploads alone go ahead of it; each font and image gets its `assets` document). Send it before you think about any one scene. In test films the thinking before this write goes much the same way: the world is settled, the functions for `shared.js` are named, and then, around the words "let me write shared.js now", the file is typed out in thought, coordinates and all, and typed again in the call. So the moment you know what those functions are called and roughly how big each thing is, the cast's too, stop there and begin the batch. The numbers inside a drawing come as you draw it.
+
+**`base.css`** (`if_version`: the version the first batch's reply gave; none shown: `get` it) goes whole: the four color variables and the type stacks as they are, then type sizes and weights as classes. Mix tones from the four with `color-mix`, and name them for what they paint: they follow when a person changes the palette on the page. With no system, every color in the film's code is one of the four or a mix of them, skin and leaves too: any other takes the page's dark-to-light palettes away. When one of the four is red beside a near-black and a white or cream, the big areas (sky, land, water) mix the pale and the dark, and red stays small. See-through is `color-mix(in srgb, var(--second) 20%, transparent)`, never the color again as `rgba()`; a shadow may be `rgba(0,0,0,.25)`. Their product's lifted CSS keeps its own colors.
+
+**`shared.js`** (`kind` js) runs once, before any scene. It starts one object, `window.W`, with a function for each layer of the backdrop: whatever stands behind most scenes. Even with no backdrop it starts `window.W`: the scenes add to it. The cast, the things that recur from step 2, isn't drawn yet: each is added to `W` by the scene that first shows it, so that each is drawn with its moment in view. Pass each helper the scene's `kit`. Keep its code plain, because a mistake here leaves every scene of the film a name card.
+
+These hold for every drawing on `W`:
+
+- **Build from many shapes.** A thing has a lit side and a shadow side, an edge, and the small parts that make it this thing and not a generic one: rivets, stitches, window frames.
+- **Write drawing functions with parameters,** such as `house(x, y, lit)`, and call them in loops. A seeded loop (`kit.rng`, never `Math.random`) turns five lines into a forest, a flock or a skyline.
+- **Make one world, not a new one per scene.** Scenes are views of the same place, which can change across the film while staying itself.
+- **Give things joints.** Put each moving part in its own `<g>` with its pivot at (0,0), so that a scene turns it by rotating one group. An animal the ask wants is a loose hand-drawn outline over a wash, a few big poses in three-quarter or side view, never joined geometric shapes. People go by motion.md.
+- **Draw things whole.** Simple means few details, not few parts. Nothing floats that should be attached. A figure seen in part runs off the frame's edge; it never loses its middle, and legs never stand alone mid-frame.
+- **Keep things alive.** A function for smoke, rain or leaves places each one from its own seed and `t` alone, never from the frame before.
+
+**Draw in SVG, with a `<g>` for each thing whose class starts with the scene's id (`ring-bell`).** The page's Layers list reads those part by part, so a person can pick out the bell or the ringer and change it. Give a gradient stop its color in `style`. No words in SVG or on a canvas (a logo's own aside).
+
+**Keep the picture light,** because Export snapshots the whole scene for every frame, and a person's laptop draws it as they watch. Aim for 300 elements in a scene at most. Repeat things with a `<pattern>`, not hundreds of shapes. Leave no `<canvas>` on the stage: texture painted once goes on a small tile used as a CSS background. Keep filters and blurs off anything large.
+
+A foundry's whole `base.css` and `shared.js` are at the end of film-api.md, with the head of its scene `ring`; the rest is below.
+
+## 4. Write the scenes
+
+In film order: one `set` per scene, a new document (`modules/scene-<id>.js`, no `if_version`), one call a message, inline, finished the first time. The user watches each one arrive, and calls sent together arrive together. The list is the plan, so don't lay out the scenes ahead.
+
+**A scene brings its cast.** At its head, under `const { … } = kit;`, a scene's file adds to `W` each thing of the cast that it's the first to show: `Object.assign(W, { bell(cls) {…}, ringer(cls, x, y) {…} })`. The files run in film order, so later scenes call those drawings. Keep a head's code simple, however rich its drawing. What no other scene shows is drawn inside its scene, just as richly.
+
+A scene is a staged picture. It calls on the world, adds what's particular to this moment, and moves:
+
+- **Stage in depth.** Far, middle and near layers, each its own element, with one camera move that carries them different distances.
+- **On a rich film, fill the frame.** Something goes on behind the subject, and something sits close to the lens. On a plain film, calm space is right.
+- **Move everything a little and one thing a lot.** One clear action carries the story; quiet life runs through the rest.
+- **Light the moment.** Light does more than another object would: a pool on a wall, a lamp, a falling shadow, a darkened edge. It needn't be warm or low. Noon, fog, neon and flat paper light are as good as dusk. Films made here drift toward dusk unless you choose otherwise.
+- **Give words a calm place.** Many shots need no words. Where a scene has them, put them on clear ground, on a soft scrim like `.calm` if need be, with nothing crossing them at any moment, and never across a character, an object or other words. Vary the place from scene to scene. On a really busy picture, put them on a solid overlay along the bottom, the same each time.
+- **Let layout breathe.** Words wrap differently in another face or at 1080 wide. Anchor a `.words` group by one edge and let it grow, as below, with nothing at a fixed spot under text that can wrap. In a film that isn't 1920×1080, work from `kit.W` and `kit.H`, written out in full, since a `W` taken from kit hides the film's drawings, and recompose: in a tall film, stack what sat side by side.
+
+A scene that throws shows only its name card, and nobody tells you. So give each name one meaning, hold elements rather than their `.style`, and loop in `render` over the list `init` made. Nothing flashes or cuts more than three times a second, and no scene is under a second.
 
 ```js
 const { seg, eo, eio, lerp, TextFx } = kit;
-kit.scene('pour', {
+kit.scene('ring', {
   init(kit) {
-    kit.stage.append(kit.h('<div class="ground">' +
-      '<div class="glow pour-glow" style="left:610px;top:400px;width:700px;height:700px"></div>' +
-      '<svg class="art" viewBox="0 0 1920 1080">' +
-      '<rect class="hot pour-stream" x="948" y="336" width="24" height="280" rx="12"/>' +
-      '<path class="metal" d="M760 920 L800 600 H1120 L1160 920 Z"/>' +
-      '<rect class="hot pour-fill" x="812" y="606" width="296" height="12" rx="6"/>' +
-      '<g class="pour-ladle"><path class="metal" d="M960 340 H1260 L1225 180 H995 Z"/>' +
-      '<path class="hot" d="M1001 204 H1219 L1223 226 H997 Z"/></g></svg>' +
-      '<div class="words" style="left:140px;top:150px;width:600px"><h2 class="line">Eleven hundred degrees, four minutes</h2>' +
-      '<p class="sub pour-sub">Bronze, poured by hand</p></div></div>'));
-    for (const k of ['glow', 'stream', 'fill', 'ladle', 'sub']) this[k] = kit.stage.querySelector('.pour-' + k).style;
-    this.line = kit.stage.querySelector('.line');
-    this.ladle.transformOrigin = '960px 340px';
-    this.stream.transformOrigin = '960px 336px';
-    this.fill.transformOrigin = '960px 612px';
+    this.birds = W.birds(kit, 14, 330, 470);
+    this.smoke = W.smoke(kit, 14, 1640, 400);
+    kit.stage.append(kit.h('<div class="ground"><div class="air"></div>' +
+            '<svg class="art ring-far" viewBox="0 0 1920 1080">' + W.town(kit, 7) + this.smoke.markup + this.birds.markup + '</svg>' +
+      '<svg class="art ring-mid" viewBox="0 0 1920 1080">' + W.wall('ring-bricks') +
+        '<path class="ring-yard" d="M0 900 Q620 860 1080 900 T1920 880 V1080 H0 Z" style="fill:color-mix(in srgb, var(--mortar) 70%, var(--main))"/>' +
+        '<path class="ring-fall" d="M640 922 L1180 1010 H1460 L1290 922 Z" style="fill:var(--shade)"/>' +
+        '<g class="ring-frame"><path d="M610 920 L700 130 H760 L700 920 Z M1310 920 L1220 130 H1160 L1220 920 Z" style="fill:var(--timber)"/><rect x="660" y="96" width="600" height="62" rx="8" style="fill:var(--timber)"/></g>' +
+        '<g class="ring-hang" transform="translate(960 150)">' + W.bell('ring-bell') + '</g>' +
+        '<path class="ring-rope" style="fill:none;stroke:var(--main);stroke-width:8"/>' + W.ringer('ring-man', 1420, 916) + '</svg>' +
+      '<svg class="art ring-near" viewBox="0 0 1920 1080"><g class="ring-branch"><path d="M-40 120 Q260 90 470 150" style="fill:none;stroke:var(--timber);stroke-width:16"/>' +
+        [60, 130, 210, 290, 370, 440].map((x, i) => '<path d="M' + x + ' ' + (112 + i * 3) + ' q34 ' + (i % 2 ? 74 : -66) + ' 84 ' + (i % 2 ? 20 : -10) + ' q-50 -6 -84 ' + (i % 2 ? -20 : 10) + ' Z" style="fill:color-mix(in srgb, var(--main) ' + (60 + i * 6) + '%, var(--second))"/>').join('') + '</g></svg>' +
+      '<div class="pool ring-pool" style="left:420px;top:120px;width:1080px;height:760px"></div><div class="edge"></div><div class="calm"></div><div class="words" style="left:110px;bottom:80px;width:900px"><h2 class="line">One stroke, heard across the valley</h2><p class="sub ring-sub">Cast here since 1871</p></div></div>'));
+    const q = (s) => kit.stage.querySelector(s);
+    this.birds.bind(q('.birds'));
+    this.smoke.bind(q('.smoke'));
+    Object.assign(this, { line: q('.line'), sub: q('.ring-sub'), hang: q('.ring-hang'), rope: q('.ring-rope'), man: q('.ring-man'), 
+      far: q('.ring-far'), mid: q('.ring-mid'), near: q('.ring-near'), pool: q('.ring-pool'), fall: q('.ring-fall') });
   },
   render(t) {
-    TextFx.fadeFromRight(this.line, t, 0.2);
-    this.sub.opacity = eo(seg(t, 1.1, 1.6));
-    this.ladle.transform = 'rotate(' + (lerp(4, -24, eio(seg(t, 0, 1.2))) + lerp(0, 14, eio(seg(t, 3.6, 4.5)))) + 'deg)';
-    this.stream.transform = 'scaleY(' + eo(seg(t, 1, 1.35)) * (1 - eo(seg(t, 3.5, 3.8))) + ')';
-    this.fill.transform = 'scaleX(' + eo(seg(t, 1.3, 3.6)) + ')';
-    this.glow.opacity = lerp(0.12, 1, eio(seg(t, 1.1, 3.6)));
-    this.glow.transform = 'scale(' + lerp(0.7, 1.08, eo(seg(t, 1.1, 4.5))) + ')';
+    const push = eio(seg(t, 0, 4));   // one slow move; each layer travels its own distance, and that is the depth
+    this.far.style.transform = 'scale(' + lerp(1.01, 1.03, push) + ')';
+    this.mid.style.transform = 'scale(' + lerp(1.02, 1.07, push) + ')';
+    this.near.style.transform = 'translateX(' + lerp(0, 60, push) + 'px) scale(' + lerp(1.04, 1.14, push) + ')';
+    const swing = 15 * Math.sin(t * 2.6) * Math.exp(-t * 0.3), pull = Math.sin(t * 2.6 + 0.4);
+    this.hang.setAttribute('transform', 'translate(960 150) rotate(' + swing.toFixed(2) + ')');
+    const turn = lerp(-3, 5, (pull + 1) / 2), th = turn * Math.PI / 180, a = swing * Math.PI / 180;
+    this.man.setAttribute('transform', 'translate(1420 916) rotate(' + turn.toFixed(2) + ')');
+    const hx = 1420 - 78 * Math.cos(th) + 190 * Math.sin(th), hy = 916 - 78 * Math.sin(th) - 190 * Math.cos(th);   // the hand, so that the rope meets it
+    this.rope.setAttribute('d', 'M' + (960 + 120 * Math.cos(a)) + ' ' + (240 + 120 * Math.sin(a)) + ' Q1200 ' + (440 + 20 * pull) + ' ' + hx.toFixed(1) + ' ' + hy.toFixed(1));
+    this.fall.style.transform = 'skewX(' + (-swing * 0.5).toFixed(2) + 'deg)';
+    this.birds.render(t - 0.4);
+    this.smoke.render(t);
+    this.pool.style.opacity = 0.8 + 0.12 * Math.sin(t * 0.9);
+    TextFx.fadeFromRight(this.line, t, 0.3);
+    this.sub.style.opacity = eo(seg(t, 1.3, 1.8));
   },
 });
 ```
 
-**A rough cut redrawn.** The user has seen it: same ids, names, order and seconds; the
-same words, each line exactly as in the rough scene.
-`modules/retyped.json` lists lines they retyped,
-`{"was":"…","v":"…"}`: the film shows `v` wherever the code says `was`. Leave `was` and
-the record as they are, and fit the layout to `v`. The steps, but:
-
-- Step 1, after the pages: `list` `modules`, unless you just did: every document whole, with
-  its version.
-- No `fonts` in `scenes.json` (an older rough cut) and no `modules/refaced.json`: ahead of step 2 `set` `scenes.json` (`if_version`) with `fonts` added, picked as
-  rough-cut.md says, with 400 and `base.css`'s weights; step 2's `base.css` adds the stack of
-  each slot named (`.line`: the display one).
-- Step 2 is two writes. `set` `modules/base.css` (`if_version`), adding to it: rename or
-  remove nothing (the rough scenes still on show use it), type sizes and weights as they
-  are. Then the batch, if there is anything for it. `shared.js` also takes what the rough scenes show two scenes share,
-  and a time inside a scene that the score needs too, as a constant
-  (`window.TT = { tip: 0.4 }`) read by both.
-- Step 3 is over the same document, with `if_version`. Redraw it: what is there was a
-  stand-in, not a base. What stands is where things sit and how large, what happens
-  when, and the words. Type keeps the sizes and weights it has; a new face changes widths:
-  widen a line's box, never shrink its type. A listed scene with no
-  module: new, as in the steps.
-
-**Cut short.** For any film: step 1's pages, if not in this conversation; `list` `modules`,
-unless you just did. A scene named in "Scenes left" that has a module failed when the page ran
-it, or the sentence is stale (it can be copied early and pasted late): read the scene for a
-slip and mend it (`if_version`). No slip to be seen: leave the scene as it is and say in one line
-that you found nothing to mend, and to tell you if it still fails; only if they then say so, or
-"Scenes left" names it again, write it again, plainer.
-
-- The stage says final (scenes missing or failing): those alone: the named ones, any other whose
-  code you see is broken, and any with no module in your `list` (no module: step 3), no more: no
-  step 2, 4 or 5. Say in one line what you mended. Nothing missing and no slip, the first
-  time: change nothing; say only that you found nothing to mend, and to tell you if it still fails.
-- The stage says rough: step 2 only if `base.css` is still the first batch's few lines. Step 3
-  for each scene that has no module (new) or is rough (redrawn, and step 2, as "A rough cut
-  redrawn" says), in film order; none: nothing. Then 4 and 5.
+Copy how it's built, never its scenes, words, colors, shapes or times, nor how its line comes in: motion.md has other ways. Choose the hour, the light and the palette anew for your own.
+
+## 5. The score and the stage
+
+Last, ONE `batch`, so that the film loads once. If they asked for silence: no score, and no read of sound.md. Else read sound.md first. `modules/score.js` (new, `kind` js) is `kit.score(function (S, T) { … })`: `S` as in sound.md, `T` holds each scene's start in seconds by id, and `T.END` the film's length: `S.fx('pop', T.ring + 1)`. Then `modules/scenes.json` (`if_version`: your last version of it), whole, with `"stage":"final"` and nothing else changed.
+
+## 6. Stop
+
+That batch ends the work. Close as SKILL.md quotes, with its one sentence more if there is one (the link, where wanted, after "Here's your animation"), and end the turn. Say nothing of artifact types or how it was made, and don't name the music.

package/skills/claude-motion/artifact-type/reference/kinds.md

@@ -0,0 +1,43 @@
+# Kinds of film that Motion doesn't make
+
+Motion's content rules, the same for every customer, for a new film and for a later change. Go by what the film
+would show or promote, never by what the ask calls itself ("educational"):
+
+- **For or against a party, a candidate for public office or a ballot measure** ("Vote Ortiz for mayor", "No on
+  Measure 9", an attack ad, an endorsement). Yes: each party's positions, side by side; "Polls close at 8", for no
+  side; a class's, club's or HOA's own election.
+- **A promo for gambling** (a casino, a betting app, a buy-in poker night, a lottery's jackpot). Yes: a shop's free
+  giveaway ("win a hamper, enter by Friday");
+  a school's, church's or charity's own small fundraiser, named as that in the ask (a raffle, a tombola, a bingo night);
+  never casino games, betting, poker or a standing lottery, whoever gains, nor a cause that comes up only after a no;
+  why the house wins.
+- **A promo for a crypto coin or token, or for trading them** (a presale, an airdrop, an NFT drop, an exchange's ad).
+  Yes: how a blockchain works; a bank's or fintech's demo.
+- **A fight or combat scene, in any style:** people or characters hitting, shooting or cutting each other (a duel, a
+  brawl, a boss fight, a knockout).
+  Robots or machines fighting: the same no.
+  A game's combat, in a trailer too: the same no.
+  Yes: a boxing gym's classes, no blows landing on anyone;
+  a club's or school's own combat sport: its classes, training and bouts under its rules (fencing, judo, kendo, taekwondo, junior boxing);
+  there touches and scoring hits may land, with no knockout, blood or injury;
+  never the blows of an event sold as a fight (a fight night, a prize fight, a promoter's card);
+  a self-defence lesson;
+  there strikes on the attacker's figure too;
+  a battle as a map with arrows; sport with no blows; slapstick with no punches or kicks (a slip, a
+  pie in the face); a pillow, pie or snowball fight; "fight the flu".
+
+A no: two kind sentences, nothing that judges the topic, no "can't", no "sorry":
+
+> Motion doesn't make election ads. I could make a film that sets each party's positions side by side: shall I?
+
+ONE offer: the nearest Yes. No more calls that turn; a film already created just stays empty. Only a part is of these
+kinds (one scene, an end card): say so, leave it out, go on with the rest. A push ("it's legal", "it's our own
+game"): the same no and offer.
+
+A Yes, like any other film: go on as the instructions say, no remark.
+
+**A film that already holds one of these, or is one.** If it is also in a look that you would refuse, has another
+company's design, or holds anything else that you would refuse: the instructions' rule stands, only its removal. If
+not: whatever adds none of it goes ahead, in that part too (a date, a typo, a timing, the order of scenes); only more
+of it (a new promise, a bigger offer, more blows) gets the no above. The instructions' "what you would refuse to make"
+doesn't mean these kinds.

package/skills/claude-motion/artifact-type/reference/later.md

@@ -0,0 +1,130 @@
+# Later turns on a film
+
+This page covers every turn after a film is first made: a change, the page's buttons, a film cut short, a reviewer's comment. First find which kind of film you have, then follow that part. `if_version` applies only if your tool's input lists it; the version is in your last `list`, `get` or write of that document.
+
+Before anything else: `modules/{retyped,recolored,refaced,fetched-fonts,recut,retouched}.json` are the page's own records, so 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. On any film, if rough-cut.md isn't in this conversation, read it, because the rules of a scene hold here. A film that holds `look.json` follows `styles.md` in place of rough-cut.md and finalize.md.
+
+Asked to bring in their logo, icons, product or colors, or a film for their organization where a design system is listed: read design-systems.md too.
+
+A film that speaks (it holds `modules/narration.js`, or its `film/script` sets `narration`): read `artifact-type/reference/recording.md` too, and follow its "Later" for any change to the lines, times or scenes.
+
+## Which kind of film?
+
+Go by what `scenes.json` and the scene modules say.
+
+- **An empty film (no `film/script`), or one you refused whole with no scene written:** SKILL.md's "A new film", in this same film, never passing `type_url` again; a list already written is rewritten with `if_version`. What you refused stays refused, whatever they press or type, "Continue" too: the same no and offer (kinds.md for a banned kind). The offer taken, or another ask you can make, goes ahead with no remark on the refusal.
+- **Listed scenes are missing, or you're told "Continue the animation."** This is the page's button, on a final film too. It may go on "Scenes left: 2, 5.", which are positions in `scenes.json` counted from 1, never a count. `list` `modules` and mend any scene whose code is broken. If a scene is rough, go to "Scenes missing or broken", and close with: "Done. Tell me what else to change, or say Finalize." Otherwise, go to "Cut short" for a final film, or take the next bullet.
+- **`"stage":"rough"`, no `look.json`, and no scene is rough** (a new film cut short), whatever they ask: read finalize.md, make any change they asked for, finished, then "Cut short", through to the score and `"final"`.
+- **Any other `"stage":"rough"`, with a change:** "A change", and close as for Continue.
+- **`"stage":"rough"`, with "Finalize the animation."** (the page's button) or their own words for it: read finalize.md and follow "A rough cut redrawn". A film with `look.json` follows "Finalize" in styles.md.
+- **`"stage":"final"`, or no `scenes.json`:** "Revising a film". If asked to Finalize it, say it already is.
+
+## Revising a film
+
+Never republish: the store is the truth. `list` `modules` (and `assets`) first, with each document whole and its version. With no list of scenes, `get` `film/script` too, and read film-api.md first. Before revising a finished film, also read motion.md and film-api.md. finalize.md says how a scene is drawn and how much a frame can carry.
+
+Change only what was asked: a scene's module, `scenes.json` for order, names, seconds and `desc`, or `base.css` and `shared.js` for something across the film. Then `set` just those, and keep names stable. A scene added, dropped or retimed goes by "A change", so that the score still fits. A thing on `W` that is to change everywhere changes where it's drawn, once: in `shared.js`, or at the head of the scene that first shows it. A small change stays small: the richness of a finished scene is no reason to redraw it.
+
+A reviewer's comment carries its pin ("How reviewers review", below). Map the time to its beat and the point to the element there before answering. Confirm anything ambiguous, then apply the round in one pass. Tell the user what changed, in their words. Music they asked for goes as "The music: [mood], [two instruments]." After a first score, add "It starts muted: the speaker button turns the sound on."
+
+## How reviewers review
+
+A comment a reviewer sends you carries its pin as `Location: 0:12` with `Anchor detail: at 12.4 s, the point at x 42.29% y 40.74% of the frame` (42.29% of a 1920-wide frame is 812 px; a box gives its top-left corner, width and height), or for a stretch of the timeline `Location: 0:02 to 0:05` with `Anchor detail: from 2.1 s to 5.4 s of the film` (no position).
+
+A comment with no `Location` and `Anchor detail` lines carries `Element path: animation-v1:nth-of-type(1) > at-12400ms:nth-of-type(1) > x4229-y4074:nth-of-type(1) [> w1146-h0833:nth-of-type(1)]` instead: milliseconds, then x/y (a box's top-left) and w/h as fractions of the frame ×10000. A stretch ends `> to-5400ms:nth-of-type(1)` in place of x/y. Ignore the `:nth-of-type(1)`.
+
+If you're unsure, ask one clear question. Batch fixes per round, name your pick when offering options, and keep the same link across rounds.
+
+## A change
+
+`list` `modules` (every document whole, with its version), change the scenes it touches at the same roughness (`rough: true` stays), and `set` each with `if_version`. On a change to a rough cut, don't read motion.md or film-api.md.
+
+A change of color goes in the variables in `base.css` (for a new ground, `scenes.json`'s `background` too). Where scenes are rough, your closing sentence says it will show at Finalize.
+
+A scene added, dropped, renamed, retimed or moved is an edit to `scenes.json` (`if_version`; `"stage"` stays as it is). A new scene's module follows it, and a dropped scene's module is `delete`d (`if_version`). The files run in film order, so a scene can call only what `shared.js` or a scene before it adds to `W`. If a drop, a move or a new scene breaks that, move those drawings to `shared.js` in the same round; a rewrite of a scene keeps its head. Scenes that stay keep their ids. If no scene is rough on a rough film, "Cut short" follows.
+
+On a final film do the same, finished: draw as finalize.md says, with no `rough: true`, and the stage stays `"final"`. Fit `score.js` to the new times, with no `T.` of a dropped id left, because that would sound at 0:00. (Read sound.md first if it's not in this conversation. A silent film has no score.)
+
+Every kind of film but a new one has scenes on show, so `base.css` and `shared.js` are added to, with nothing renamed or removed and type sizes and weights as they are, unless that is the change asked for.
+
+## Another typeface, on a final film
+
+Put it in `fonts`, as rough-cut.md says, in the slot whose stack those words wear now, so that no stack changes, with 400 and `base.css`'s weights. A weight the face lacks takes its nearest in `base.css`. Only widen a line's box in a scene, never shrink its type. A font asset named ahead of that stack comes out of `base.css` and of any scene, and stays in `assets`, so that if they ask for it back you can name it again. What `modules/refaced.json`'s `about` says of a font asset holds for their own files alone. Say D first, if it fits (below), then what changed, without a fetched family's name, then A or B, if one fits.
+
+## A rough cut redrawn
+
+The user has seen the rough cut, so keep the same ids, names, order and seconds, and the same words, each line exactly as in the rough scene. `modules/retyped.json` lists lines they retyped, as `{"was":"…","v":"…"}`: the film shows `v` wherever the code says `was`. Leave `was` and the record as they are, and fit the layout to `v`. Then follow finalize.md, with these differences:
+
+- After the pages, `list` `modules`, unless you just did, with every document whole and its version.
+- If `scenes.json` has no `fonts` (an older rough cut) and there's no `modules/refaced.json`, first `set` `scenes.json` (`if_version`) with `fonts` added, picked as rough-cut.md says, with 400 and `base.css`'s weights. `base.css` then adds the stack of each slot named (`.line`: the display one).
+- Drawing the world is two writes. `set` `modules/base.css` (`if_version`), adding to it, with nothing renamed or removed (the rough scenes on show use it) and type sizes and weights as they are. Then the batch with `shared.js` and anything else. A time inside a scene that the score needs too goes there as a constant (`window.TT = { tip: 0.4 }`), read by both.
+- Each scene is a `set` over the same document, with `if_version`. Redraw it: what's there was a stand-in, not a base. What stands is where things sit and how large, what happens when, and the words. Type keeps its sizes and weights. A new face changes widths, so widen a line's box and never shrink its type. A listed scene with no module is new.
+
+## Cut short
+
+For any film: have finalize.md, motion.md, film-api.md and rough-cut.md in this conversation (recreate-ui.md too if it shows their product), and `list` `modules` unless you just did. Before you reread any scene, read `shared.js`: mend a fault there, and on an older film with no `window.W` start it with `window.W = window.W || {};` (`if_version`). A scene named in "Scenes left" that has a module either failed when the page ran it or is listed by mistake, because the sentence can be copied early and pasted late. Read the scene for a bug and fix it (`if_version`). If you find none, leave the scene as it is and say in one line that you found nothing to mend, and to tell you if it still fails. Only if they then say so, or "Scenes left" names it again, write it again, more simply, keeping its head.
+
+- **The stage says final** (scenes missing or failing): work on those alone, meaning the named ones, any other whose code you see is broken, and any with no module in your `list`, which you write as in finalize.md. Past that mend of `shared.js`, don't touch the world, the score or the close. Say in one line what you mended. If nothing is missing and there's no bug, the first time, change nothing and say only that you found nothing to mend, and to tell you if it still fails.
+- **The stage says rough:** draw the world only if `base.css` is still the first batch's few lines. Write each scene that has no module (new) or is rough (redrawn, as above), in film order. Then finalize.md's step 5, whole: read sound.md and write `score.js` (unless they asked for silence), then `"final"`, and the close.
+
+## 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. Read `shared.js` too: a fault there fails every scene that leans on it. An older film has no `window.W`: a new head starts `window.W = window.W || {};`. At "Continue the animation." or when you find it so, `list` `modules`, then read the named scenes that have a module, or all of them, for a bug and mend it (`if_version`). If no scene is rough, follow "Cut short". Otherwise write what is missing, rough, in film order, one `set` per message, and go no further.
+
+## How rough
+
+This is only for a film whose scenes are rough already: a change to it, or Continue. No new film is written this way.
+
+A rough scene is a wireframe with the real words, places, sizes and timing. Write the picked ground, one ink that reads on it (`--second`), and type in the sizes and weights it will have, from `base.css`. `--main` and `--accent` wait for Finalize. The player shows a rough scene as if drawn by hand in black and white: that isn't yours to imitate, mend or undo. No picked color shows until Finalize redraws the scene, and you 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), written `data-label="LADLE"`, so that the page never offers it for retyping and the drawing takes its place at Finalize. Words that belong to the film are real text, and stay. Use no fill, texture, shadow, secondary motion, camera, sound, font file or image asset. The scene sets `rough: true`. `base.css` holds these too:
+
+```css
+.box { position:absolute; margin:0; 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-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></div></div>'));
+    this.ladle = kit.stage.querySelector('.pour-ladle');
+  },
+  render(t) { this.ladle.style.transform = 'rotate(' + lerp(0, -24, eo(seg(t, 0.4, 1.2))) + 'deg)'; },
+});
+```
+
+## What to say about fonts
+
+The close's one sentence says only these, as quoted, where they fit (X is the family; Y is yours; Z is the shipped face underneath, or "a system font" for words the ten can't spell). As the one sentence more they rank: what you refused, or the file they asked for (Export); A, D or E; what else you could not do; a design system's colors that they didn't pick; B or C. After a font note, what you made up gets a short sentence of its own.
+
+- A. They named X, which isn't Google's: "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."
+- B. They named X, fetched, or ask what a fetched face is called: "X loads from Google Fonts when the animation opens, and Z shows instead if X can't load."
+- C. There's no `fonts`, no `modules/refaced.json`, and `base.css` names no font asset of theirs: "The text uses each device's default font, so send me the font files if you want a specific one."
+- D. `modules/refaced.json` is there, you changed `sans`, and the ten spell the words: "The font picked on the page is still showing, so go to Style and set Font to Original to see the new one."
+- E. `look` names font files, you have none, and `assets` holds none: "I no longer have your font files, so the animation shows Z until you send them again."
+- F. With any still of a film that has a fetched family: "This still shows Z where the animation loads X from Google Fonts."
+
+## A film with no list of scenes
+
+A film of scenes never writes this: `kit.scenes()` builds it. A film with no `scenes.json` sets it in `film/script`:
+
+```js
+window.CUT = {
+  width: 1920, height: 1080,    // integers ≤4096; vertical 1080×1920, 4:5 1080×1350, square 1080×1080
+  fps: 60,                      // 24 | 30 | 60
+  duration: 32.4,               // seconds, ≤300
+  background: '#f4f2ee',
+  chapters: [{ t: 0, label: 'Title' }, { t: 2.6, label: 'The app' }],
+  async init(kit) { /* build the stage once */ },
+  render(t, kit)  { /* SYNCHRONOUS: put the stage into its state at time t */ },
+  score(S, kit)   { /* optional: sound.md */ },
+};
+```
+
+A screen reader says a chapter's `label` for the playhead position, so word it for a listener.