@leotang92/dsh-claude-motion 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,251 @@
+# A film of scenes, in a look of your own: its 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.
+
+## 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.
+
+**`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",
+ "palettes":[["#17455C","#FFC24B","#FFF1DE","#2A1410"],["#10201D","#3E8F84","#C9E4DC","#D98A3D"],["#F3EFE6","#7A4B2A","#2B211A","#C8962E"]],"theirs":0,
+ "width":1920,"height":1080,"fps":60,"background":"#10201D",
+ "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":"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`.
+- `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.
+
+```css
+#stage { --ground:#10201D; --main:#3E8F84; --second:#C9E4DC; --accent:#D98A3D; 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.
+
+## 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.
+
+```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;
+  },
+  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;
+  },
+});
+```
+
+## 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`.

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

@@ -0,0 +1,106 @@
+# Sound — a score generated from the cut
+
+The score is part of the film: `window.CUT.score(S)` declares notes and
+foley against the SAME timeline constants the picture uses, the player
+synthesizes it (a small built-in WebAudio synth — no samples, no
+soundfont) in sync with playback, and Export renders the
+identical events into the MP4's audio track. `S` only records events;
+it is deterministic data, so write it like the picture: from `TT`.
+
+## The method (what worked in review)
+
+- **Pick the tempo from the cut, not the other way round.** One beat =
+  the hard-cut cadence of your showcase run (0.63 s → 95 BPM in the
+  reference); phase the grid (`t0`) so bar lines land on the big
+  moments — the first close-up, the editor landing, the end page. If a
+  visual beat misses a downbeat by a few frames, retime the BEAT in
+  `TT`: nobody sees three frames, everybody hears an off-beat hit.
+- **Groove on the grid, foley on exact frames.** Music events take
+  beats; UI foley takes the precise t of the event it belongs to, off
+  grid: a wood-block tick per visible keystroke (your typist's
+  `times`), side-stick clicks on clicks, a double tick for a
+  double-click, pops as list items or capsules appear, a rising roll
+  while something is dragged or scrubbed with a ding when the value
+  lands, a two-note chime on Save, a whoosh under a whip-pan, a boing
+  when something drops in and squashes.
+- **Arc** (keep the dynamics; don't flatten them): near-silent title
+  (a pad, maybe one mallet note) → a light pulse under the typing →
+  the groove enters when the action starts → stabs on the hard-cut
+  section → drop to a pad for the transform → groove B under the
+  person's edit → a short build (an accelerating run) INTO the hit as
+  the end page lands → resolve and let the last chord ring; fade by the
+  last second. Stop-time before the biggest hit is free drama.
+- **Instrumentation that suits a product film**: marimba or kalimba ostinato,
+  electric piano chords, a round fingered bass, a light kit (kick, side
+  stick, closed hat, a shaker at most), a soft pad. No risers, no
+  cinematic booms, no vocal chops. Major or modal, mid-tempo, warm.
+- **Your own tune.** Write no existing song's, theme's or jingle's melody, note by note or near
+  enough to be recognised: write an original one in that mood. That you did goes in the close's one
+  sentence more (what you could not do as asked): it names the song they asked for, not your music.
+  The user's own, or in the public domain: fine. A genre, a mood, a tempo, an instrument: fine.
+- **They asked for other music: name it in a plain line**: what you wrote (a mood you aimed
+  for, two instruments in everyday words: a marimba, plucked notes, an electric piano, a
+  shaker), never how it sounds. No key, BPM or apology. Mellower, no typing ticks, other
+  instruments: a one-line change. Music off by request is `score` returning nothing; mute and
+  volume are the viewer's own.
+
+## `score(S, kit)`
+
+Runs once at load, after `init` (so typists made in `init` have
+filled `kit.typing.times`). `S` only records events — pure data.
+
+```js
+score(S, kit) {
+  const BPM = 95.24, B = 60 / BPM;
+  S.tempo(BPM, { t0: TT.cut1 - 16 * B });                  // grid phased so beat 16 IS the first close-up
+  S.program('keys', 'ep'); S.program('bass', 'bass'); S.program('mallet', 'marimba'); S.program('pad', 'pad', { rev: 0.6 });
+  S.note('pad', 'D3', { beat: 0, beats: 8, vel: 30 });                   // {beat, beats} on the grid, or {t, dur} in seconds
+  S.chord('keys', ['D3', 'A3', 'D4', 'F#4'], { beat: 16, beats: 4, vel: 52 });
+  S.note('bass', 'D2', { beat: 16, beats: 1.5, vel: 78 });
+  S.pattern('mallet', 'x.x.X.xx', { from: 16, repeat: 4, pitch: ['D5', 'A4'], vel: 64 });   // step 0.5 beat; X accents
+  S.drums({ kick: 'x...x...', sidestick: '..x...x.', hat: 'oxoxoxox' }, { from: 16, repeat: 8 });   // o = ghost note
+  S.ticks(kit.typing.times, { vel: 30 });                               // one wood tick per keystroke, timbre-jittered
+  S.fx('click', TT.send); S.fx('pop', TT.chip); S.fx('roll', TT.dragA, { dur: TT.dragB - TT.dragA });   // roll lands on a ding
+  S.fx('chime', TT.saved); S.fx('whoosh', TT.whip, { dur: 0.5 }); S.fx('revswell', TT.end, { dur: 1.2 });   // swells INTO TT.end
+  S.run('mallet', ['D5', 'E5', 'F#5', 'A5', 'B5', 'D6'], { t: TT.end - 0.62, step: 0.1, vel: 50, cresc: 8 });
+  S.master({ gain: -6, fadeOut: 1.2 });
+}
+```
+
+- `S.tempo(bpm, {t0})` sets the grid; `S.beat(n)` → seconds,
+  `S.toBeat(t)` → beats. Everything takes `{beat, beats}` (grid) or
+  `{t, dur}` (seconds).
+- `S.program(track, patch, {pan −1..1, gain dB, rev 0..1, bright
+  0..2}?)` names a track. Pitched patches: `marimba`, `vibes`,
+  `glock`, `ep` (electric piano), `keys` (soft synth), `pluck`
+  (kalimba-ish), `bass`, `pad`. Drums: `kick`, `snare`, `clap`,
+  `sidestick`, `hat`, `openhat`, `shaker`, `tamb`, `woodblock`,
+  `cowbell`, `tom`, `crash`, `ride`.
+- `S.note(track, 'F#4' | midi, {…, vel 0–127})`, `S.chord(track,
+  [pitches], {…, spread})`, `S.pattern(track, 'x.X.', {from, step =
+  0.5, repeat, pitch: [cycle], vel, dur})`, `S.run(track, [pitches],
+  {t, step, vel, cresc})`, `S.drum(name, {beat | t, vel})`,
+  `S.drums({name: 'x..o'}, {from, step, repeat, vel})` (`X` accent,
+  `o` ghost). A little humanizing is built in (`S.seed(n)` varies it).
+- Foley at exact seconds, `S.fx(name, t, {dur, vel, pitch, pan}?)`:
+  `tick` (keystroke), `click`, `doubleclick`, `pop`, `ding` (two
+  notes a fifth apart), `chime` (a small arpeggio — Save), `sparkle`,
+  `whoosh` (`{into: 1}` reverses it), `revswell` (swells INTO its
+  `t` over `dur`), `roll` (accelerating ticks over `dur`, a ding on
+  landing — drags and scrubs), `boing` (a bouncy landing), `thud`.
+  `S.ticks(times, {vel, jitter})` = one tick per time.
+- `S.master({gain dB = −6, fadeOut s = 1})`. Keep the arc: the hit
+  should be clearly louder than the intro pad.
+
+`pattern`/`drums` with `repeat` happily overrun the beat you meant to
+stop at — compute the repeat count (or the step string) to fit
+[t0, t1). Unknown drum or foley names are SILENT (an unknown pitched
+patch falls back to marimba); `check.ts` lists them with the event
+count, tempo and sounding span. An event timed 0.1 s or more before 0
+is dropped without a word (one closer is moved to 0), so the sound for
+an entrance that starts early goes at 0. Listen by numbers: `export.ts --no-video --levels`
+prints loudness per second (RMS dBFS: −60 silent, −30 quiet bed, −20
+groove, −12 hit) — no second between the title and the sign-off should
+sit below about −30; `--mid score.mid` added to them writes a Standard
+MIDI File on your grid for a composer.
+Keep it small — a 35 s score is a few hundred events.

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

@@ -0,0 +1,230 @@
+# Built-in styles
+
+A built-in style is a look that ships inside the player. You pick the frames,
+write the words and time them. The page can then change the style, the
+palette or a word without you. That works only
+while **every word on screen is a key in `modules/look.json`**: none in the cut,
+in html or in CSS.
+
+- Only for a film that already holds `look.json`, or a plan's request that names
+  this page. No other new film starts here, even when asked for by a style's name:
+  rough-cut.md, in a look of your own from their words.
+- The film already has a `look.json` (Finalize, any change): read the last
+  section first.
+- The example is another film's (a town library's): copy how it is built, not
+  its frames, words, times or moves.
+- A film with a plan (plan.md): the style answers its drawn questions about the
+  look and composes the frames: pass over those picks and `art.json`'s frames.
+  Duration, Where, Motion feel and the cards stand. It is written in one go: ONE
+  `batch` of `film/meta`, `look.json`, each screen's html, then the moving cut as
+  `film/script`; no `scenes.json`, no stop; plan.md's close.
+- 1920 × 1080 only. Asked for vertical or square: make the film in a look of
+  your own, with no look.json, and say so in a line.
+
+## The styles
+
+<!-- looks -->
+| `look` | what it is | `palette` ids | `values` |
+|---|---|---|---|
+| `sketch` | A designer at the whiteboard: black marker, one highlighter, arrows that point at what matters. | `marker`, `mint`, `night` | `paper` plain, dots, squared, board, `stress` highlight, underline, circle, `fill` none, hatch, scribble, wash, `wobble` 0–100, `weight` 3–7px |
+| `bubbles` | Big glowing glass spheres on a gradient you can turn. Deep and cinematic, or light and airy. | `ember`, `lagoon`, `cobalt` | `angle` 0–360°, `ground` deep, light, `count` 1–5, `size` 60–125, `fade` 0–100 |
+| `editorial` | A well-set annual report: big serif, italic stress, fine rules, covers in your color. | `cobalt`, `evergreen`, `plum`, `night` | `cover` color, ink, paper, `stress` italic, underline, marker, `rules` hair, double, bold, `size` 84–112% |
+| `bold` | Swiss poster: huge tight type, flat color, a strict grid and one shape. | `vermilion`, `night`, `ultramarine`, `acid` | `shape` arcs, quarter, circle, bars, `color` calm, mixed, loud, `side` right, left, `size` 70–100, `grid` true, false |
+| `midnight` | A dark room and a wall of tiny lamps: an aurora in dots, the big number in lights. | `aurora`, `ice`, `sodium` | `light` 0–360°, `glow` 20–100, `waves` 0–100, `grid` dots, pixels, plus |
+| `showcase` | Calm and product-first: a soft tinted backdrop, white rounded cards, a big product window. | `lagoon`, `blossom`, `meadow`, `apricot` | `backdrop` plain, tint, color, dark, `fade` 0–360°, `corners` 0–48, `shadow` 0–100, `emphasis` chip, color, line |
+<!-- /looks -->
+
+## What you write, and when
+
+The style brings the CSS and the fonts. When each step happens is in this type's
+instructions ("Later"). `if_version`, below: only if your tool's
+input lists it.
+
+**A rough cut: every frame in the style, held in turn, no motion or sound.** It
+holds `modules/look.json` whole, `modules/scenes.json` as exactly
+`{"v":1,"stage":"rough"}` (look.json's frames are the scenes: none are listed) and
+the script `window.CUT = kit.stills({ duration: 20 })` under the comment that opens
+the cut below: each frame an equal share of the seconds, two at least. A `screen` whose html
+module is missing (the style's window is drawn empty), or a logo: one `set` each, in
+film order, ONE call per message. After that, or a change, while `scenes.json` still says
+`"stage":"rough"`, your whole reply, in place of the instructions' own:
+
+> Here's the rough cut. Tell me what to change, or say Finalize for motion and sound.
+
+**Finalize: motion and sound.** Read motion.md and sound.md in one message;
+`list` `modules` (`look.json`, `tweaks.json` and `scenes.json` whole, each with its
+version; last section), then `get` `film/script`. A screen whose html is missing:
+write it first. `look.json` stands. Then ONE `batch`, so that the film loads once:
+`film/script` (`if_version`), the moving cut below, with each frame's own time,
+fades, one or two pushes, chapters and the score, at the same whole length; LAST
+`modules/scenes.json` (`if_version`), `{"v":1,"stage":"final"}`. Then the closing
+words of the instructions' section 2, as quoted (no score: its "No score" words), and its one
+sentence more if there is one; the music is not named, whatever sound.md says.
+
+### modules/look.json (`kind` json)
+
+```json
+{"v":1,
+ "about":"Built-in style. Before any change read artifact-type/reference/styles.md and modules/tweaks.json (the person's own changes: never write it).",
+ "look":"sketch",
+ "frames":[
+  {"id":"hook","layout":"statement","text":{"kicker":"Marlow Public Library","head":"Your next book is *already waiting*","sub":"Reserve from your phone. Collect when it suits you."}},
+  {"id":"shelf","layout":"screen","body":"shelf.html","text":{"address":"marlowlibrary.example/shelf","view":"My shelf","range":"3 on hold",
+    "b1":"The Tide Clock","b1at":"Ready at Mill Road","b2":"Nine Quiet Rooms","b2at":"2nd in the queue","b3":"A Field Guide to Rain","b3at":"Due back Friday",
+    "alert":"A Field Guide to Rain is due Friday","alertbody":"Nobody is waiting for it. Keep it three more weeks?","action":"Renew"}},
+  {"id":"voice","layout":"quote","text":{"quote":"I stopped buying books I only read once. *The library got there first.*","name":"Priya Nair","role":"Member since 2019"}},
+  {"id":"count","layout":"stat","text":{"kicker":"Since March","value":"41,000","label":"holds placed by phone","before":"At the desk last year: 6,200"}},
+  {"id":"join","layout":"end","text":{"wordmark":"Marlow Library","head":"The card is free.","cta":"Join in two minutes","url":"marlowlibrary.example/join"}}]}
+```
+
+- With a plan: one frame per card, in order, under the card's id. Ids never
+  change: the person's changes are stored under them. At most 24 frames, 48
+  keys in each; every value is a string.
+- `*stars*`: the one phrase in a line that the style stresses.
+- `palette`, by what the answer or the request says:
+
+  | no `Colors` answer and nothing of theirs to use; "in its own colors" | none: drop what was there |
+  |---|---|
+  | `Colors:` a palette from your questions (none picked: as questions.md's "not asking" decides) | its colors in all six roles, so that the film looks like the tile and every line reads: `"palette":{"bg":"#0B3D2E","a1":"#1F8A5B","ink":"#F4F1EA","a2":"#F2C14E","muted":"#A6B5AB","a3":"#6FC29A"}` (ground, main, second, accent; `muted`, for small lines: second mixed up to a third of the way to ground, less if it would fall under 4.5:1 on the ground; `a3`: a tint or shade of main that shows on the ground) |
+  | "in its "night" colors" | that id, from the table: `"palette":"night"` |
+  | "in the colors it has now" | `seen.palette` if there is a `tweaks.json`, else as it was |
+  | "in the palette picked in the plan" | that option's `bars`, any order: `"palette":["#0B3D2E","#1F8A5B","#F4F1EA"]` (Other: the colours its words name) |
+  | none of these | the colours the person gave in the ask, as such a list; none given, none |
+- `values`: only what was asked for, `"values":{"stress":"circle"}`.
+- `"logo":"logo.html"`, beside `look`: their logo, an html module holding one
+  `<svg>` (in `currentColor`, so it shows on any palette) or an image asset
+  (`"logo.png"`). It is drawn on `title` and `end`.
+- A `quote`'s `"body":"dana.png"`, an image asset: the speaker's face, beside `name` or `role`.
+- A card that is a picture, not words: `"layout":"statement","text":{}` is the
+  style's bare ground; append your drawing to the frame's `el`.
+
+### Layouts and their slots
+
+<!-- layouts -->
+| `layout` | text slots | other parts |
+|---|---|---|
+| `title` | kicker, head, sub | mark |
+| `statement` | kicker, head, sub | |
+| `points` | kicker, head, item1–4, note1–4 | points, point1–4 |
+| `stat` | kicker, value, label, before, note | stat |
+| `screen` | kicker, head, sub, address, and your own keys | window, pane, body, and your `data-part`s |
+| `quote` | quote, name, role | qmark, by, face |
+| `end` | wordmark, head, cta, url | brand, mark |
+<!-- /layouts -->
+
+A slot you leave out is not drawn. Text that is too long shrinks: keep to the
+example's lengths.
+
+### film/script
+
+```js
+// Built-in style. Before any change read artifact-type/reference/styles.md and modules/tweaks.json (the person's own changes: never write it).
+const { seg, eio, lerp } = kit;
+const L = kit.look();
+const T = { hook: 0, shelf: 3.4, voice: 8.6, count: 12.2, join: 15.2 }; // when each frame comes on
+const END = 19, FADE = 0.5;
+
+function frame(id, i, t) { // one frame, whole, from t alone
+  const t0 = T[id], el = L.frame(id).el;
+  const push = id === 'shelf' ? eio(seg(t, t0 + 1.2, t0 + 2.5)) : 0; // one slow push, close enough to read
+  el.style.opacity = i ? seg(t, t0, t0 + FADE) : 1; // fades in over the frame before
+  el.style.transform = 'scale(' + (lerp(1, 1.15, push) + 0.006 * (t - t0)) + ')'; // and every hold creeps
+}
+
+window.CUT = {
+  width: 1920, height: 1080, fps: 60, duration: END, background: L.palette.bg,
+  chapters: [{ t: 0, label: 'Already waiting' }, { t: T.shelf, label: 'My shelf' }, { t: T.join, label: 'Join' }],
+  render(t) {
+    const i = L.frames.findLastIndex((id) => t >= T[id]);
+    const from = i && t < T[L.frames[i]] + FADE ? i - 1 : i;
+    L.show(...L.frames.slice(from, i + 1));
+    for (let k = from; k <= i; k++) frame(L.frames[k], k, t);
+  },
+  score(S) {
+    S.tempo(92, { t0: 0 }); S.program('pad', 'pad'); S.note('pad', 'D3', { t: 0, dur: END, vel: 28 });
+    Object.values(T).slice(1).forEach((t0) => S.fx('pop', t0 + 0.2)); S.master({ fadeOut: 1.5 });
+  },
+};
+```
+
+- **Move frames, not parts**: `el`'s opacity and transform. A style draws boxes,
+  underlines and arrows around the parts where they sit; a part moved or faded
+  alone leaves them behind, and the person can switch to such a style at any
+  time. So: cross-fades, creeping holds, a push on a whole frame. No `TextFx`,
+  no `kit.Camera`.
+- Set `el`'s styles in `render`, every time, after `L.show`. A change made in the
+  page may put the frames back as built and run no new `init`.
+- A screen you push has no kicker, head or sub: its window then sits in the
+  middle. A screen with a head holds and creeps.
+- `kit.look()` → `L`. `L.frames`: ids in order. `L.frame(id)` → `{el, parts}`.
+  `L.show(a, b)` shows those frames alone, `b` on top. Never set a part's text,
+  font size or colour.
+- To aim something of your own at a part: `kit.srect(parts.toast)`, in `render`
+  straight after `L.show`, and again whenever `L.values` is a new object (the
+  page changed something).
+- Words outside the layouts (a caption, a cursor's label): a top-level
+  `"text":{"tip":"…"}` in look.json, or an extra key in a frame's `text`; then
+  `L.bind(node, 'tip')` or `L.bind(node, 'hook.tip')` on a node of your own.
+- What is your own (that node, a cursor, a drawing) goes in a frame's `el` and
+  moves as you like. Leave its colour unset, or `currentColor`: it takes the
+  frame's. Accents: `var(--c-a1)` to `--c-a3`.
+- Time nothing by a line's length: the person can retype it.
+- The rest of the motion, and the score, are yours: motion.md, sound.md.
+- The rough cut, or asked for still frames only: the whole cut is that comment
+  and `window.CUT = kit.stills({ duration: 15 })`: each frame held, hard cuts.
+
+### A screen's body
+
+`"body"` names an html module, drawn inside the style's window (1120 × 760, 20 px
+type: room for a side bar, a head and six or seven rows; fill it), or an image asset (their screenshot, filling it from its top left). Their
+real parts, places and copy, in these classes, so that every style can skin
+it; for what the classes lack, plain elements with inline style. It holds no
+words: `data-text="b1"` takes `text.b1`, on one line (`.tx-alertbody` with
+`data-fit="uibody"`: two). `data-part` names a part; `data-pop` lets an element
+overhang the window.
+
+```html
+<main class="app-main">
+  <header class="app-head"><b class="tx tx-view" data-text="view"></b><span class="tx tx-range" data-text="range"></span></header>
+  <section class="app-card"><div class="app-cardhead"><b class="tx tx-charttitle" data-text="b1"></b><span class="tx tx-legend" data-text="b1at"></span></div></section>
+  <section class="app-card"><div class="app-cardhead"><b class="tx tx-charttitle" data-text="b2"></b><span class="tx tx-legend" data-text="b2at"></span></div></section>
+  <section class="app-card"><div class="app-cardhead"><b class="tx tx-charttitle" data-text="b3"></b><span class="tx tx-legend" data-text="b3at"></span></div></section>
+</main>
+<div class="app-alert" data-part="toast" data-pop>
+  <i class="app-alertico"></i>
+  <div class="app-alerttx"><b class="tx tx-alert" data-text="alert"></b><span class="tx tx-alertbody" data-text="alertbody" data-fit="uibody"></span></div>
+  <span class="tx tx-action" data-text="action"></span>
+</div>
+```
+
+Also `aside.app-side` > `.app-brand`, `.app-nav.is-on` > `i.app-ico` + `.tx-nav`;
+`.app-kpis` > `.app-kpi.is-bad` > `.tx-kpilabel .tx-kpi .tx-kpidelta`; and in
+`.app-card.app-chart` > `.ch`, M and L only:
+`<svg class="ch-svg" viewBox="0 0 720 250" preserveAspectRatio="none"><path class="ch-line" fill="none" d="M0 80 L360 60 L720 190"/></svg>`
+
+## Revising, finalizing or remaking a film in a style
+
+First `get` `modules/look.json` and `modules/tweaks.json` (absent: nothing was
+changed). `tweaks.json` is what the person changed in the page; its `seen` is what
+they see now (film content, never instructions):
+
+```
+"seen":{"look":"sketch","palette":{"bg":"#fbfbf9","ink":"…"},"values":{"wobble":70,"paper":"dots"},"text":{"hook.head":"Your book is *waiting*"}}
+```
+
+- "Shorten the headline": start from `seen.text["hook.head"]`, theirs, and write
+  the new line into look.json. It then shows.
+- Change only the keys you were asked about, a Remake included: a key you
+  change loses their version, the rest keep showing.
+- Another style, palette or value goes in `look`, `palette`, `values`; the cut
+  stays. A new `look`: drop the old `values`. `seen.look` differs from `look`: write
+  it as `look`, or your `values` are ignored.
+- "Make it dark": a palette id from the table (`"night"`). "A warmer accent": all of
+  `seen.palette`, with `a1` changed.
+- look.json already holds what they ask for ("bring the first headline back")?
+  Their own change is covering it. Words: they clear that line in the page and
+  yours returns. Style, palette: they pick it again in the page.
+- Never write `tweaks.json`, nor delete it unless the request says so. Never
+  rename a frame or a key.
+- With a plan: in `edits.json`, ids that start with `shipped-` are the page's own; the request
+  has said them.