@anvpx/motion 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/CATALOG.md +2 -2
  2. package/README.md +10 -8
  3. package/package.json +9 -9
  4. package/plugins/motion-kit/.claude-plugin/plugin.json +1 -1
  5. package/plugins/motion-kit/README.md +14 -6
  6. package/plugins/motion-kit/commands/mk-draft.md +2 -2
  7. package/plugins/motion-kit/commands/mk-new.md +4 -4
  8. package/plugins/motion-kit/commands/mk-render.md +2 -2
  9. package/plugins/motion-kit/skills/motion-kit/SKILL.md +36 -32
  10. package/plugins/motion-kit/skills/motion-kit/references/authoring-scene.md +15 -4
  11. package/plugins/motion-kit/skills/motion-kit/references/authoring-style.md +6 -4
  12. package/plugins/motion-kit/skills/motion-kit/references/common-mistakes.md +1 -1
  13. package/plugins/motion-kit/skills/motion-kit/references/content-pack.md +61 -73
  14. package/plugins/motion-kit/skills/motion-kit/references/craft-color.md +50 -0
  15. package/plugins/motion-kit/skills/motion-kit/references/craft-composition.md +52 -0
  16. package/plugins/motion-kit/skills/motion-kit/references/craft-critique.md +68 -0
  17. package/plugins/motion-kit/skills/motion-kit/references/craft-motion.md +55 -0
  18. package/plugins/motion-kit/skills/motion-kit/references/craft-narrative.md +54 -0
  19. package/plugins/motion-kit/skills/motion-kit/references/craft-sound.md +53 -0
  20. package/plugins/motion-kit/skills/motion-kit/references/craft-type.md +54 -0
  21. package/plugins/motion-kit/skills/motion-kit/references/critique-repair.md +46 -0
  22. package/plugins/motion-kit/skills/motion-kit/references/decision-packet.md +59 -0
  23. package/plugins/motion-kit/skills/motion-kit/references/direction.md +84 -0
  24. package/plugins/motion-kit/skills/motion-kit/references/free-storyboard.md +3 -3
  25. package/plugins/motion-kit/skills/motion-kit/references/intake.md +38 -12
  26. package/plugins/motion-kit/skills/motion-kit/references/knowledge-routing.md +58 -32
  27. package/plugins/motion-kit/skills/motion-kit/references/outline.md +27 -17
  28. package/plugins/motion-kit/skills/motion-kit/references/patterns.md +19 -19
  29. package/plugins/motion-kit/skills/motion-kit/references/quality-bar.md +21 -21
  30. package/plugins/motion-kit/skills/motion-kit/references/slop.md +13 -11
  31. package/plugins/motion-kit/skills/motion-kit/references/themes.md +15 -0
  32. package/plugins/motion-kit/skills/motion-kit/references/voice.md +25 -4
  33. package/plugins/motion-kit/skills/motion-kit/references/worked-decisions.md +178 -0
  34. package/skills/motion-kit/SKILL.md +36 -32
  35. package/skills/motion-kit/references/authoring-scene.md +15 -4
  36. package/skills/motion-kit/references/authoring-style.md +6 -4
  37. package/skills/motion-kit/references/common-mistakes.md +1 -1
  38. package/skills/motion-kit/references/content-pack.md +61 -73
  39. package/skills/motion-kit/references/craft-color.md +50 -0
  40. package/skills/motion-kit/references/craft-composition.md +52 -0
  41. package/skills/motion-kit/references/craft-critique.md +68 -0
  42. package/skills/motion-kit/references/craft-motion.md +55 -0
  43. package/skills/motion-kit/references/craft-narrative.md +54 -0
  44. package/skills/motion-kit/references/craft-sound.md +53 -0
  45. package/skills/motion-kit/references/craft-type.md +54 -0
  46. package/skills/motion-kit/references/critique-repair.md +46 -0
  47. package/skills/motion-kit/references/decision-packet.md +59 -0
  48. package/skills/motion-kit/references/direction.md +84 -0
  49. package/skills/motion-kit/references/free-storyboard.md +3 -3
  50. package/skills/motion-kit/references/intake.md +38 -12
  51. package/skills/motion-kit/references/knowledge-routing.md +58 -32
  52. package/skills/motion-kit/references/outline.md +27 -17
  53. package/skills/motion-kit/references/patterns.md +19 -19
  54. package/skills/motion-kit/references/quality-bar.md +21 -21
  55. package/skills/motion-kit/references/slop.md +13 -11
  56. package/skills/motion-kit/references/themes.md +15 -0
  57. package/skills/motion-kit/references/voice.md +25 -4
  58. package/skills/motion-kit/references/worked-decisions.md +178 -0
@@ -0,0 +1,178 @@
1
+ # Worked decisions: what a choice costs
2
+
3
+ Read this after a provisional direction exists, not before. These are three
4
+ annotated compositions from controlled authoring fixtures. They teach the
5
+ reasoning behind a shot, not a look to copy. Technical validity is not an
6
+ aesthetic verdict; no example was reviewed for professional quality.
7
+
8
+ ## How to use a precedent
9
+
10
+ For each example, separate the **decision** from the surface. Ask:
11
+
12
+ 1. What question did this composition answer?
13
+ 2. What did it reject, and what did that cost?
14
+ 3. Which mechanism carries the meaning (crop, route, scale, rhythm, sound)?
15
+ 4. What would make the same mechanism wrong for another brief?
16
+ 5. What is the smallest native realization, and what evidence would falsify it?
17
+
18
+ If your brief shares the question but not the audience, channel or tone, keep the
19
+ question and change the answer.
20
+
21
+ ## Example 1 — an invitation, not an announcement
22
+
23
+ **Brief:** a public-library reading night; about 20 s; 16:9; quiet, adult,
24
+ local. The viewer should feel invited to a room, not sold a program.
25
+
26
+ **Question:** how can type feel discovered rather than announced?
27
+
28
+ **Rejected:** title, date, three bullet benefits, logo. It is accurate, but it
29
+ turns the film into a poster with a voice-over; the viewer is told, not drawn in.
30
+
31
+ **Chosen relationship:** a printed sheet is uncovered from a vertical crop on an
32
+ asymmetric left editorial grid. One large statement, one small mono label, and
33
+ a lot of paper. The reveal follows reading order.
34
+
35
+ **Why motion serves meaning:** the vertical crop is the invitation; the hold
36
+ after the statement is the pause before someone decides to come. A push-in or
37
+ orbit would add urgency the event does not want. Rest is part of the argument.
38
+
39
+ **Native realization:** a `custom` scene with a 12-column grid; the statement
40
+ spans columns 1-7 and the meta line sits at 1-4. On each `seek(t)`, derive one
41
+ progress value and assign clip-path and translate from it; never accumulate
42
+ from the previous frame.
43
+
44
+ ```js
45
+ // import { progress } from "../../runtime/compose.js";
46
+ export function createScene(root) {
47
+ const sheet = root.querySelector(".sheet");
48
+ return {
49
+ seek(t) {
50
+ const p = progress(t, 0.2, 0.9);
51
+ sheet.style.clipPath = `inset(${(1 - p) * 18}% 0 0 0)`;
52
+ sheet.style.transform = `translateY(${(1 - p) * 24}px)`;
53
+ },
54
+ dispose() {},
55
+ ready: Promise.resolve(),
56
+ };
57
+ }
58
+ ```
59
+
60
+ **Inspected evidence:** the pre-reveal frame, the 2 s settle frame, and a
61
+ phone-width crop of the statement. The fixture was reviewed as stills; its sound
62
+ was not synthesized or heard.
63
+
64
+ **Failure mode:** a reveal under about half a second reads as a glitch, and a
65
+ statement wider than its column measure loses the "uncovered page" reading.
66
+ **Counterexample:** a formal institutional brand may need symmetry and a crest;
67
+ the asymmetry would fight that identity.
68
+ **Adaptation exercise:** move the same brief to late-night radio. Which
69
+ mechanism survives (crop, hold, one statement), and what must change (type,
70
+ colour, sound)?
71
+
72
+ ## Same brief, another concept
73
+
74
+ For the reading-night brief, a second concept is a single overhead view of a long
75
+ table with one lamp and one empty chair. The type is a small label on the table,
76
+ not a poster; the camera holds, and the only movement is the lamp warming up.
77
+ It answers a different viewer effect (intimacy, not discovery) and would use a
78
+ slow hold with no crop reveal. Neither concept is universally better: the word
79
+ "invitation" and the channel decide. If the client needs programme clarity, the
80
+ poster concept wins; if the event sells atmosphere, the table concept wins. The
81
+ two differ in composition and motion, not palette.
82
+
83
+ ## Example 2 — causality along a route
84
+
85
+ **Brief:** explain how rain becomes drinking water in about 40 s for teenagers;
86
+ calm voice; visually clear. Facts are supplied; no number may be invented.
87
+
88
+ **Question:** how do you show a process without a four-step bullet list?
89
+
90
+ **Rejected:** four labeled stages in equal cards. It is correct and forgettable:
91
+ the viewer reads labels, not causality, and every stage has the same weight.
92
+
93
+ **Chosen relationship:** three spatial zones (catchment, treatment, reservoir)
94
+ connected by one route. The viewer follows water across the frame; labels
95
+ confirm what the movement already showed.
96
+
97
+ **Why motion serves meaning:** the path is the causal argument. A label arrives
98
+ after the path reaches its zone, so the viewer sees the connection before
99
+ naming it. A cut between stages would break the continuity the explanation
100
+ depends on.
101
+
102
+ **Native realization:** a `custom` scene with one SVG path. `getTotalLength`
103
+ and `getPointAtLength` are deterministic; drive a marker and each zone's
104
+ emphasis from one progress value.
105
+
106
+ ```js
107
+ // import { ease, progress } from "../../runtime/compose.js";
108
+ const route = root.querySelector("#route");
109
+ const marker = root.querySelector("#marker");
110
+ const length = route.getTotalLength();
111
+
112
+ export function createScene() {
113
+ return {
114
+ seek(t) {
115
+ const p = ease("in-out", progress(t, 0.4, 4.2));
116
+ const point = route.getPointAtLength(p * length);
117
+ marker.setAttribute("transform", `translate(${point.x} ${point.y})`);
118
+ },
119
+ dispose() {},
120
+ ready: Promise.resolve(),
121
+ };
122
+ }
123
+ ```
124
+
125
+ **Inspected evidence:** the route midpoint, the first zone's label onset, and
126
+ the final held frame. The fixture was reviewed as stills; no quantitative water
127
+ claim and no audio-quality claim were made.
128
+
129
+ **Failure mode:** labels that appear before the path arrives let the viewer read
130
+ ahead and stop watching the mechanism; a path that moves too fast to track loses
131
+ the same causality. **Counterexample:** a non-spatial process such as an
132
+ approval workflow may need a timeline or state machine, not a map; forcing it
133
+ onto a route would invent geography.
134
+ **Adaptation exercise:** make a 9:16 version. Stack the zones vertically, keep
135
+ the single route, and decide what the marker does at the crop boundary.
136
+
137
+ ## Example 3 — continuity is a decision, not a failure
138
+
139
+ **Brief:** episode two of an approved library series. Episode one used the
140
+ crop-reveal editorial system, a warm paper field and a mono label; the client
141
+ wants the series to be recognisable.
142
+
143
+ **Question:** how do you stay recognisably the same without repeating the first
144
+ composition?
145
+
146
+ **Chosen relationship:** preserve the identity axes (type scale, palette roles,
147
+ crop-reveal grammar, end card) and change the episode's central relationship
148
+ (a single poster becomes a schedule grid) and its shot order.
149
+
150
+ **Rejected:** a new palette each episode (breaks recognition), and an identical
151
+ board (the content no longer fits). Consistency is not a lack of ideas; it is a
152
+ chosen constraint.
153
+
154
+ **Why motion serves meaning:** the same reveal grammar signals "same series";
155
+ the new subject gives the viewer a reason to watch again. The end card is the
156
+ anchor, not a decorative repeat.
157
+
158
+ **Native realization:** reuse the existing authored scene's grid and motion
159
+ helpers; change the content layer and the relationship, not the identity tokens.
160
+ If the series is a strict brand template, use the template deliberately and say
161
+ so.
162
+
163
+ **Inspected evidence:** compare fingerprints across narrative, layout, type,
164
+ value/colour, motion, material, tempo and sound. Name which axes are identity
165
+ and which are episode content.
166
+ **Failure mode:** calling a palette swap "a new episode" while the composition
167
+ repeats; or forcing novelty and losing the recognition the client asked for.
168
+ **Counterexample:** a one-off campaign with no prior work should not invent
169
+ continuity it does not have.
170
+ **Adaptation exercise:** list the three axes you would keep for a third episode
171
+ and the three you would change. Explain each in one sentence.
172
+
173
+ ## What these examples do not establish
174
+
175
+ They are authored technical fixtures, not a measured quality benchmark. They do
176
+ not prove that a weaker model will reproduce the reasoning, that a reviewer will
177
+ prefer the result, or that the same decisions fit another brand. A precedent
178
+ that only changes copy or colour has not answered its question.
@@ -6,27 +6,31 @@ allowed-tools: Bash(mk:*) Bash(npx:*) Read Write
6
6
 
7
7
  # motion-kit: brief -> preview -> approved video
8
8
 
9
- `mk` = `npx -y @anvpx/motion@0.1.0`; alias it once per shell, or use the npx prefix in its place. The user describes the outcome; you author one storyboard JSON, show a short preview, and render only after an explicit yes.
9
+ `mk` = `npx -y @anvpx/motion@0.1.1`; alias it once per shell, or use the npx prefix in its place. The user describes the outcome; you author one storyboard JSON, show a short preview, and render only after an explicit yes.
10
10
 
11
11
  ## Start here
12
12
 
13
13
  1. `mk doctor` once; optional voice rows may be missing, required rows are not.
14
- 2. Ask <=3 questions (audience, length, must-have); default the rest (`references/intake.md`).
15
- 3. `brief.md`: <= 8 facts, every number sourced, then the content pack (`references/content-pack.md`); send a <= 200-word outline and wait for "go" (`references/outline.md`).
14
+ 2. Extract supplied facts and constraints; ask only material gaps (max 3, with defaults). A complete brief is not a questionnaire (`references/intake.md`).
15
+ 3. `brief.md`: <= 8 facts, every number sourced. Design `direction.md` before choosing scenes (`references/direction.md`); resolve one craft question at a time (`references/knowledge-routing.md`). Send a <= 200-word outline and wait for "go" (`references/outline.md`).
16
16
  4. Pick a route (below), instantiate, then `mk validate` until 0 errors. If `meta.theme` is not built-in (`default`, `dark`, `tech-dark`, `calm-dark`) and `themes/<name>.json` is absent, preview before calling this done. Storyboard-only request: stop here.
17
17
  5. `mk preview`; open the printed `pack .../contact.png`; ask. On yes only: `mk approve ...`, then `mk render ... --gated --verify`.
18
18
 
19
19
  ## Read when
20
20
 
21
- | File | Read when |
21
+ | File | Read when |
22
22
  | --------------------------------- | -------------------------------------------------------------- |
23
- | `references/worked-example.md` | first build; the complete loop and output shapes |
24
- | `references/free-storyboard.md` | direct route: shape and write the board |
25
- | `references/storyboard-json.md` | field shapes, overlays, assets, or decoding a validation error |
26
- | `references/scene-recipes.md` | choose a type for a beat and copy its prop shape |
27
- | `references/patching.md` | any edit after the first write, or a patch flag refusal |
28
- | `references/quality-bar.md` | judging the preview and what to say before asking |
29
- | `references/common-mistakes.md` | a command refuses, or a flag or field is in doubt |
23
+ | `references/direction.md` | invent the visual argument before choosing a realization route |
24
+ | `references/knowledge-routing.md` | one unresolved craft or technical decision; lazy craft-card index |
25
+ | `references/content-pack.md` | organize creative intent, beats, asset rights, audio and sourced facts |
26
+ | `references/themes.md` | theme or 3D look |
27
+ | `references/worked-example.md` | first build; the complete loop and output shapes |
28
+ | `references/free-storyboard.md` | direct route: shape and write the board |
29
+ | `references/storyboard-json.md` | field shapes, overlays, assets, or decoding a validation error |
30
+ | `references/scene-recipes.md` | choose a type for a beat and copy its prop shape |
31
+ | `references/patching.md` | any edit after the first write, or a patch flag refusal |
32
+ | `references/quality-bar.md` | judging the preview and what to say before asking |
33
+ | `references/common-mistakes.md` | a command refuses, or a flag or field is in doubt |
30
34
 
31
35
  ## Rules
32
36
 
@@ -40,38 +44,38 @@ allowed-tools: Bash(mk:*) Bash(npx:*) Read Write
40
44
 
41
45
  ## Stages
42
46
 
43
- | # | Stage | Do | Done when |
47
+ | # | Stage | Do | Done when |
44
48
  | --- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- |
45
- | 1 | Intake | topic, audience, length, channel, brand, tone; max 3 questions (`references/intake.md`) | 5-line note |
46
- | 2 | Brief | <= 8 facts, <= 3 sourced numbers, one arc; `brief.md` | numbers sourced |
47
- | 3 | Route | `mk template list --for`; `mk template show` once each, max 2; `references/scene-recipes.md` for beat shapes. The ranker is keyword overlap, so read the description and not-for line; name route + reason | route chosen |
48
- | 4 | Outline | <= 200 words (`references/outline.md`); stop for "go" unless "just do it" | user confirms |
49
- | 5 | Instantiate | template: `mk new <t>/<bp> ...`; direct: `references/free-storyboard.md`; authored: `mk scene new` (`references/authoring-scene.md`); assets: `mk assets import` + `--assets`/`--ledger` | 0 errors; build exit 0 |
50
- | 6 | Fix | smallest `mk patch`; max 3 rounds; same error twice: `mk catalog <type>` + `references/troubleshooting.md`; unknown theme: built-in or `themes/<name>.json` | 0 errors, warnings read |
51
- | 7 | Preview | `mk preview` (<= 90 s; add `--assets d --ledger f` when used); read stdout + `preview.json`; `references/quality-bar.md` | pack exists |
52
- | 8 | Show + approve | contact + clip + 3-line summary + derived coverage; ask. On yes: `mk approve ... --note "<their words>"` (repeat the preview's `--out`/assets/audio flags) | explicit yes recorded |
53
- | 9 | Patch | smallest change; back to 6-7; max 3 rounds, then offer options | approval matches file |
54
- | 10 | Render | mp4: `mk render ... --gated --verify`; webm/mov/gif/png-sequence: `--format ... --gated`, omit `--verify` (mp4-only); add `--assets`/`--ledger`, `--resolution`, `--fps` | mp4: verify 0; other: output exists |
49
+ | 1 | Intake | topic, audience, length, channel, brand, tone; max 3 questions (`references/intake.md`) | 5-line note |
50
+ | 2 | Brief | <= 8 facts, <= 3 sourced numbers, one arc; `brief.md` | numbers sourced |
51
+ | 3 | Direction | `references/direction.md`: concept, composition, type, motion, sound and divergence; then choose realization. Template lookup is optional, after design | direction + route justified |
52
+ | 4 | Outline | <= 200 words (`references/outline.md`); stop for "go" unless "just do it" | user confirms |
53
+ | 5 | Instantiate | template: `mk new <t>/<bp> ...`; direct: `references/free-storyboard.md`; authored: `mk scene new` (`references/authoring-scene.md`); assets: `mk assets import` + `--assets`/`--ledger` | 0 errors; build exit 0 |
54
+ | 6 | Fix | smallest `mk patch`; max 3 rounds; same error twice: `mk catalog <type>` + `references/troubleshooting.md`; unknown theme: built-in or `themes/<name>.json` | 0 errors, warnings read |
55
+ | 7 | Preview | `mk preview` (<= 90 s; add `--assets d --ledger f` when used); read stdout + `preview.json`; `references/quality-bar.md` | pack exists |
56
+ | 8 | Show + approve | contact + clip + 3-line summary + derived coverage; ask. On yes: `mk approve ... --note "<their words>"` (repeat the preview's `--out`/assets/audio flags) | explicit yes recorded |
57
+ | 9 | Patch | smallest change; back to 6-7; max 3 rounds, then offer options | approval matches file |
58
+ | 10 | Render | mp4: `mk render ... --gated --verify`; webm/mov/gif/png-sequence: `--format ... --gated`, omit `--verify` (mp4-only); add `--assets`/`--ledger`, `--resolution`, `--fps` | mp4: verify 0; other: output exists |
55
59
 
56
60
  ## Choosing a route
57
61
 
58
- Template-assisted (`mk template list` -> `mk new`), direct storyboard (`references/free-storyboard.md`) and authored scene (`mk scene new`) are co-equal starts; pick by fit, not exhaustion. Use direct when the brief is clearer as JSON than any blueprint; use authored when the visual needs code. There is no per-video cap; an authored scene costs 1-3k tokens against ~120 for a catalog type. Never stretch a wrong blueprint, truncate a required fact to fit a slot, or refuse an authored scene. Name the route.
62
+ Design first, then choose template (`mk template list` -> `mk new`), direct (`references/free-storyboard.md`) or authored (`mk scene new`, `references/authoring-scene.md`) by fit. Templates help repeat a brand system; direct boards compose catalog components; authored scenes create original layouts and motion. Mix routes when useful. No per-video cap or template-exhaustion prerequisite. The catalog defines supported props, not the visual idea. Name the route and its limitations.
59
63
 
60
64
  ## How long should it be
61
65
 
62
- Use the user's length, else 45 s. Seconds: title 3-5, stat 4-6, bullets/flow 6-11, outro 3-5. `mk fit --seconds N` moves a board only about 1.4x; 25 s to 50 s needs more scenes first (`mk scene add`, about one per 7 s), then fit.
66
+ Use the user's length, else propose 45 s. Budget orientation, meaningful change and readable rest against real copy/narration; scene count follows the argument. `mk fit --seconds N` adjusts timing, not narrative depth. Add or reshape beats with `mk scene add` when stretching would create dead time.
63
67
 
64
- ## Voice and captions (opt-in)
68
+ ## Voice, music and captions (opt-in)
65
69
 
66
- `mk voice` -> `mk captions` -> `mk patch --ops`; the same `--audio` goes to preview, approve and render. Setup and failure paths: `references/voice.md`.
70
+ `mk voice` -> `mk captions` -> `mk patch --ops`; same `--audio` for preview, approve and render. Write numbers as words (`01` -> "zero one"). Music is opt-in; use `music/bed-full.wav`, not the silent `music/bed.wav`. Details: `references/voice.md`.
67
71
 
68
72
  ## Failures
69
73
 
70
- | Symptom | Do |
74
+ | Symptom | Do |
71
75
  | ---------------- | ------------------------------------------------------------------- |
72
- | exit 4 | not an error: stage 8 |
73
- | exit 5 | fix the named scene, re-render once, then report |
74
- | same error twice | stop patching; `mk catalog <type>` and rewrite that scene |
75
- | anything else | `references/common-mistakes.md`, then `references/troubleshooting.md` |
76
+ | exit 4 | not an error: stage 8 |
77
+ | exit 5 | fix the named scene, re-render once, then report |
78
+ | same error twice | stop patching; `mk catalog <type>` and rewrite that scene |
79
+ | anything else | `references/common-mistakes.md`, then `references/troubleshooting.md` |
76
80
 
77
- Done = the approval hash matches the rendered board, `mk verify` exit 0 is quoted, and you state what was not verified.
81
+ Done = approval hash matches, `mk verify` exit 0 is quoted, and unverified parts are named.
@@ -1,12 +1,12 @@
1
1
  # Authoring a scene (type: custom)
2
2
 
3
- A co-equal route, chosen when the visual the brief needs is not in the catalog and code expresses it more directly than a stack of catalog types. There is no per-video cap. The real costs, measured where available: ~1-3k tokens per authored scene against ~120 for a catalog type, no incremental cache (the cache key does not cover authored bytes), and review of the emitted files. Use it when the brief earns it; never to avoid learning a type.
3
+ A first-class route for original composition and motion. Start from the visual argument in `direction.md`, then use code when it expresses that idea well. There is no per-video cap or requirement to exhaust catalog/template options. Native and authored scenes can share a storyboard. Review the emitted files and test deterministic seek; do not promise a supported mechanism until its actual contract is checked.
4
4
 
5
5
  ## Files
6
6
 
7
7
  `scenes/<name>/scene.js` (exports `createScene`), `fragment.html` (no `<script>`, no `on*=`), `style.css` (optional; `#scene-root` is rewritten). The scaffold also writes `notes.md`; that is documentation, not part of the picture. These three code files are the only place HTML/CSS/JS is authored; storyboard props, template slots and pack instructions stay data.
8
8
 
9
- The scaffold's `scene.js` imports `../../runtime/mount.js` and calls `mountTimeline`; the build supplies that runtime. Keep the import and the exported `createScene` signature; replace the body, the fragment and the CSS with your scene. Do not copy runtime code into the scene.
9
+ The scaffold's `scene.js` imports `../../runtime/compose.js`; the build supplies that runtime. Replace its markup, CSS and motion with the direction's original composition while keeping the exported `createScene` contract. The starter demonstrates time-driven state, not a required title layout. Older scenes using `../../runtime/mount.js` and `mountTimeline` remain supported. Do not copy runtime implementations into the scene.
10
10
 
11
11
  A relative helper such as `./lib/format.js` is part of the scene: it must stay inside the scene directory (no `../`, no absolute or remote path), and it is emitted beside `scene.js`, linted with the scene and included in the approval hash. A helper-only edit re-arms the gate like any other scene edit.
12
12
 
@@ -18,6 +18,17 @@ Entry: `{ "type": "custom", "props": { "dir": "scenes/hero" } }`
18
18
 
19
19
  `createScene(root, config, ctx)` → `{ seek(t), dispose(), ready }`. `seek(t)` is a pure function of t. Start from `mk scene new hero`.
20
20
 
21
+ ## Small motion vocabulary, open composition
22
+
23
+ Import only the helpers you use from `../../runtime/compose.js`:
24
+
25
+ - `progress(t, start, duration)`: clamped 0..1; duration zero makes a cut at `t >= start`. Inputs must be finite, duration nonnegative.
26
+ - `interpolate(from, to, amount)`: numeric interpolation; an eased amount may overshoot.
27
+ - `stagger(index, step, start = 0)`: onset for a nonnegative integer index; a negative step reverses order.
28
+ - `ease(name, amount)` and `clamp01(amount)`: existing easing vocabulary (`linear`, `in`, `out`, `in-out`, `spring-soft`, `spring-snappy`).
29
+
30
+ Example: `const p = ease('out', progress(t, 0, 0.8));` then set an element's opacity and transform from `p` on every seek. The time values are illustrative, not pacing rules. Author your own layers, grids, masks, type lockups and relationships in HTML/CSS/JS; helpers impose no layout or visual style. Assign every animated property before onset, during action and after settle; never accumulate deltas from a prior seek. Initialize the scene state and release listeners/resources or temporary styles in `dispose`.
31
+
21
32
  ## Fails lint
22
33
 
23
34
  clocks (`Date.now`, `performance.now`, `new Date()`) · timers · `requestAnimationFrame` · `Math.random` · network/workers · `window.` · CSS `animation`/`transition`/`@keyframes`
@@ -26,7 +37,7 @@ A CSS animation runs on the browser clock, not `seek(t)`.
26
37
 
27
38
  ## Draw with tokens
28
39
 
29
- `var(--mk-color-bg)`, `var(--mk-color-fg)`, `var(--mk-color-accent)`, `var(--mk-font-*)`. Hard hexes break on a theme switch. The 5 % safe margin is already applied.
40
+ `var(--mk-color-bg)`, `var(--mk-color-fg)`, `var(--mk-color-accent)`, `var(--mk-font-*)`. Theme tokens support consistent art direction; authored geometry and motion remain yours. Hard hexes need deliberate theme-switch review. Inspect actual safe margins and delivery crop in preview rather than assuming a decorative full-bleed element makes text safe.
30
41
 
31
42
  ## Loop
32
43
 
@@ -34,4 +45,4 @@ A CSS animation runs on the browser clock, not `seek(t)`.
34
45
 
35
46
  ## Self-check
36
47
 
37
- Same t, same pixels? Theme switch safe? Fits 9:16? Would a catalog type do this with less code?
48
+ Seek A -> B -> A and compare state/pixels. Then seek in reverse order and outside the action interval. Theme switch safe? Fits the intended aspect, longest copy and busiest beat? Does the composition realize the direction? Could shared helpers reduce repeated mechanics without fixing the design? Static proof does not establish motion or sound quality.
@@ -1,10 +1,12 @@
1
- # Authoring a style (theme)
1
+ # Authoring theme tokens within a direction
2
+
3
+ A theme supplies palette/font tokens, not the whole visual system. Design composition, typography behavior, motion and sound in `direction.md`; use `craft-color.md` and `craft-type.md` for those decisions. A recolor of the same layout is useful brand adaptation, but is not by itself a new art direction.
2
4
 
3
5
  A theme is DTCG JSON. Copy the nearest vendored family from `shared/themes/` inside the installed `@anvpx/motion` package and change values only — renaming tokens breaks scenes.
4
6
 
5
7
  ## Tokens that matter
6
8
 
7
- `color.bg` and `color.bgEnd` (the page gradient; keep them close), `color.fg`, `color.accent` and `color.accent2` (once per scene), `color.card`, `color.divider`, `color.glow`, `font.sans`, `font.mono`, `radius`.
9
+ `color.bg` and `color.bgEnd` (the page gradient), `color.fg`, `color.accent`, `color.accent2`, `color.card`, `color.divider`, `color.glow`, `font.sans`, `font.mono`, `radius`. Assign roles from the direction and check contrast over every actual background state; token names do not require a gradient, glow or card motif in an authored composition.
8
10
 
9
11
  ## Enforced by the build
10
12
 
@@ -12,6 +14,6 @@ A theme is DTCG JSON. Copy the nearest vendored family from `shared/themes/` ins
12
14
  - Colour tokens reject `url()`, `var()` and `calc()` — values are literals.
13
15
  - Fonts must be one of the bundled families; never a CDN.
14
16
 
15
- ## Taste
17
+ ## Check the system
16
18
 
17
- One accent, one easing family, one type scale. A theme is a constraint: if two colours compete, the scene has no accent.
19
+ Keep hierarchy and semantic roles coherent. One accent or type family can be a strong choice; multiple categories or contrasting roles may need more. State the reason, then preview representative frames at delivery size. Native scene compositions stay fixed unless their props expose controls; use the authored route for original geometry and behavior. Preview, approve and render must resolve the same vendored theme bytes.
@@ -49,7 +49,7 @@ These are the failures that waste the most time. Each row is wrong -> right -> w
49
49
  | `mk assets import logo.png --dir assets` | Add `--licence MIT --source-url <url>` | Every imported asset needs provenance |
50
50
  | `mk voice` on a machine with no venv | `mk doctor`; install Python 3.12 + the voice extras, or ship silent | Voice is opt-in and fails closed |
51
51
  | `mk patch` path into a missing parent | Add the parent first, or target an existing path | Patch stops at the first op that cannot apply |
52
- | `npx -y @anvpx/motion@0.1.0` returns 404 | stop: the pinned package is unpublished; use a local checkout/tarball only if the user has one | no working bootstrap exists until release |
52
+ | `npx -y @anvpx/motion@0.1.1` returns 404 | stop: the pinned package is unpublished; use a local checkout/tarball only if the user has one | no working bootstrap exists until release |
53
53
 
54
54
  ## Windows
55
55
 
@@ -1,81 +1,69 @@
1
- # Content pack (before any storyboard)
2
-
3
- No storyboard until every item below is sourced or marked "placeholder".
4
- The pack is five lists; detail them with the user, then build.
5
-
6
- ## 1. Style (Style choice, not fact)
7
-
8
- Name the look in 8 words or less (e.g. "dark tech keynote"),
9
- plus 3 numbered rules and 3 banned template-look items
10
- (no glow, no decor gradients, no bounce-everything).
11
- Name the route you chose (template-assisted, direct storyboard or authored scene).
12
- When style is a real choice, name one non-default style + why,
13
- and one alternative. Packs are optional guidance only:
14
- read the pack index lazily (`packs/INDEX.md` beside the installed CLI), never inline a pack,
15
-
16
- ## Style menu (after lanshu, MIT; looks only, engines never)
17
-
18
- Twelve looks with native mappings; write and voice the narration to
19
- fit the chosen look. No native scene exists for pen writing, paper
20
- folds, comic stickers, chalk, or clay — those rows say closest.
21
-
22
- | Look | Native mapping | Best for | Arc (look plus way of telling) |
23
- | --------------- | --------------------------------- | ---------------------------- | ------------------------------ |
24
- | Editorial paper | calm-light title flow callout | serious, premium, business | claim, proof, consequence |
25
- | Tech HUD | dark flow stat | AI, infra, systems | problem, mechanism, result |
26
- | Notebook | closest: steps plus callout | step-by-step teaching | numbered steps, then a recap |
27
- | Paper pop-up | closest: media-frame layers | warm stories, processes | before, the turn, after |
28
- | Pop comic | closest: kinetic slam | punchy shorts, myth vs fact | myth, correction, slam |
29
- | Cinematic 3D | scene3d one-take | flagship, launches | reveal, orbit, resolve |
30
- | Drafting sheet | dark flow plus footnote callout | technical deep dives | spec, derivation, check |
31
- | Chalkboard | closest: kinetic plus recap outro | beginners, memory recaps | question, example, rule |
32
- | Clay town | closest: scene3d diorama | analogies for non-experts | analogy, walkthrough, takeaway |
33
- | Derivation | flow built step by step | principles, algorithms | given, transform, result |
34
- | Casefile | timeline plus callout evidence | post-mortems, incidents | incident, evidence, finding |
35
- | Sitcom | kinetic plus lower-third | abstract terms for newcomers | setup, confusion, resolution |
36
-
37
- The arc column is a beat order, not a formula: it suggests how to sequence
38
- the scenes, and the storyboard still has to earn the result on the contact
39
- sheet. No measured quality claim is attached to any row. Never persist pack
40
- refs in storyboards.
41
-
42
- ## 2. Patterns (from the CLI, never from memory)
43
-
44
- Scene and overlay picks come from `mk catalog` output only.
45
- One new visual idea per scene; a hook in the first second;
46
- karaoke captions (`caption` overlay) on every narrated scene,
47
- words taken from the voice manifest shifted to scene-relative times.
48
- Name unsupported effects instead of promising them.
49
-
50
- ## 3. UI (vendored pixels only)
51
-
52
- Screenshots and images live inside the project (remote refs fail
53
- closed at preview). Import each file instead of hand-writing the ledger:
1
+ # Content pack: evidence and creative intent
2
+
3
+ Before a storyboard, separate facts from design choices. Keep five short lists;
4
+ source claims and assets or mark them "placeholder". Develop the direction
5
+ yourself using the brief; ask only questions that change it, within intake's
6
+ three-question limit.
7
+
8
+ ## 1. Direction (a design choice, not a fact)
9
+
10
+ Use `direction.md` to invent a visual argument and record composition, type,
11
+ color/material, motion and sound choices with reasons. Explore an alternative
12
+ whose visual mechanism is meaningfully different. A look name is a useful label
13
+ after these decisions, not a menu to choose from. Describe what differs from
14
+ available recent work and what deliberately stays consistent.
15
+
16
+ Teach yourself the next missing decision through `knowledge-routing.md`.
17
+ Templates, patterns and qualified packs are optional references. Borrow a
18
+ principle when useful; build an original system when the brief calls for it.
19
+ Choose template/direct/authored realization after direction. No finished style
20
+ list defines the creative space.
21
+
22
+ ## 2. Beats (meaning before components)
23
+
24
+ For each beat, write the message, what changes on screen and why the next beat
25
+ follows. Give attention a clear subject; introduce information at a readable
26
+ pace. A hook can be a question, surprising relationship or sustained observation,
27
+ not necessarily a loud first-second effect.
28
+
29
+ Then map to supported components using `mk catalog`, or to original authored
30
+ HTML/CSS/JS through `authoring-scene.md`. Catalog layouts are components, not a
31
+ mandatory scene sequence. Choose caption treatment for reading conditions;
32
+ caption words/timing come from the voice manifest, shifted to scene-relative
33
+ times. Name unsupported mechanisms and investigate instead of promising them.
34
+
35
+ ## 3. Assets and UI (local files with rights)
36
+
37
+ Screenshots and images live inside the project; remote references fail closed
38
+ at preview. Import each file rather than hand-writing the ledger:
54
39
 
55
40
  ```bash
56
41
  mk assets import src/dashboard.png --dir assets --ledger assets.json --licence CC0-1.0 --source-url <url>
57
42
  ```
58
43
 
59
- The row is `path`, `sourceUrl`, `licence`, `attribution`, `sha256`; the
60
- prop points at the file relative to `--assets` (`"image": "dashboard.png"`).
61
- The ledger is the file you passed; if `--ledger` is omitted it defaults to
62
- `<dir>/assets.json`. Preview, approve and render repeat the same
63
- `--assets d --ledger f`.
64
- No screenshot and none available: rebuild the screen by hand per
65
- `references/faux-ui.md` (faux-UI rules after stageshow).
66
-
67
- ## 4. Sounds (approved words, licensed bed)
68
-
69
- Voice: one voice id + narration text per base scene, user-approved;
70
- narration sets scene durations, so words are final before voice.
71
- Narration is the clock: the evidence is an ASR round-trip of the final
72
- audio against that script, not a listen-through; fix a mismatch before
73
- any scene timing is set.
74
- Bed: one wav + license file + volume; a scored bed matches the
75
- timeline length so nothing loops audibly. Same `--audio`, `--music`,
76
- `--music-volume`, `--music-license` on preview, approve and render.
44
+ Use the actual license and source. The row contains `path`, `sourceUrl`,
45
+ `licence`, `attribution`, `sha256`; props reference files relative to
46
+ `--assets` (`"image": "dashboard.png"`). The ledger defaults to
47
+ `<dir>/assets.json` when `--ledger` is omitted. Preview, approve and render
48
+ repeat the same `--assets d --ledger f`. With no usable screenshot, build
49
+ truthful faux UI per `faux-ui.md`; do not imply it is a real product capture.
50
+
51
+ ## 4. Sound (intent, then verified audio)
52
+
53
+ Choose silence, narration, music and effects for their narrative roles
54
+ (`craft-sound.md`); none is mandatory. For voice, record voice id and approved
55
+ script per base scene before synthesis. Check final audio against that script;
56
+ ASR is useful mismatch evidence, listening checks pronunciation and intent.
57
+ Neither proves the other. Time picture/captions against the actual waveform.
58
+
59
+ For a bed, record local file, actual license, intended level and edit/loop plan.
60
+ Repeat the same `--audio`, `--music`, `--music-volume`,
61
+ `--music-license` on audible preview, approve and render. Use supported CLI
62
+ flags only; a sound-design plan does not add new effect/mix controls.
63
+ See `voice.md` for the concrete audio contract.
77
64
 
78
65
  ## 5. Facts (sourced or placeholder)
79
66
 
80
- At most 8 facts and 3 numbers, each with a source. Anything missing
81
- is written "placeholder" in the outline, never invented.
67
+ At most eight facts and three numbers, with units and sources. Missing information
68
+ stays "placeholder" in the outline. Style preferences are not evidence for factual
69
+ claims, and an attractive composition cannot repair an unsupported number.
@@ -0,0 +1,50 @@
1
+ # Craft card: color, light and material
2
+
3
+ Load when a theme recolor is being mistaken for a new art direction, accents
4
+ compete or texture obscures evidence. Color choices must serve a relationship.
5
+
6
+ ## Start with values and roles
7
+
8
+ Describe the frame in light/dark masses before choosing hue. Establish the field,
9
+ primary subject, supporting information and signal color. Give accents semantic
10
+ jobs; a shared color can connect evidence across shots. Test without color so a
11
+ distinction does not depend only on hue. Several accents may be useful when the
12
+ data needs categories; justify and label them instead of enforcing one accent
13
+ as an aesthetic law. Inspect contrast over the actual background, including its
14
+ brightest and darkest moving regions.
15
+
16
+ Example: a warm signal moving through a cool network marks causality. Recoloring
17
+ every node on every shot erases that meaning. Next action: label each color's
18
+ job; remove or merge roles the viewer cannot explain.
19
+
20
+ ## Write a color and light arc
21
+
22
+ Sketch the opening, turning point and ending as simple value/color fields.
23
+ Keep continuity where the argument continues; change the field when a shift
24
+ has meaning. Light can isolate form, reveal surface or connect spaces. Choose
25
+ direction, contrast and softness for that purpose; naming a cinematic light does
26
+ not create renderer support. Map to actual catalog/custom capabilities and test.
27
+ Flat graphic work can have a strong light/value structure without simulating 3D.
28
+
29
+ Example: evidence gradually occupies a quiet field until the final relationship
30
+ is visible. A dramatic dark-to-light change is one possible argument, not an
31
+ ending every film should repeat. Compare those three frames without copy.
32
+
33
+ ## Treat texture as material, not repair
34
+
35
+ Choose paper, grain, glass, metal, a clean field or another surface because it
36
+ supports subject and tone. Test at final scale and during motion; fine texture
37
+ can shimmer or interfere with type. Add surface only after hierarchy works.
38
+ Record rights/provenance for actual texture assets; a descriptive reference is
39
+ not permission to ship its pixels. A theme sets tokens; original composition,
40
+ light and material behavior belong in native or authored scene realization.
41
+
42
+ ## Applicability, counterexample and provenance
43
+
44
+ Contrast and non-color cues draw on
45
+ [WCAG 2.2](https://www.w3.org/TR/WCAG22/), verified 2026-11-06.
46
+ The value-script, light and material procedure is motion-kit craft synthesis,
47
+ not a licensed visual-style collection or tested quality guarantee. An ambient
48
+ art film may intentionally soften subject/background separation; essential
49
+ information still needs a readable presentation. Check: grayscale hierarchy,
50
+ actual motion, phone-width text and the intended narrative color relationship.