@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.
- package/CATALOG.md +2 -2
- package/README.md +10 -8
- package/package.json +9 -9
- package/plugins/motion-kit/.claude-plugin/plugin.json +1 -1
- package/plugins/motion-kit/README.md +14 -6
- package/plugins/motion-kit/commands/mk-draft.md +2 -2
- package/plugins/motion-kit/commands/mk-new.md +4 -4
- package/plugins/motion-kit/commands/mk-render.md +2 -2
- package/plugins/motion-kit/skills/motion-kit/SKILL.md +36 -32
- package/plugins/motion-kit/skills/motion-kit/references/authoring-scene.md +15 -4
- package/plugins/motion-kit/skills/motion-kit/references/authoring-style.md +6 -4
- package/plugins/motion-kit/skills/motion-kit/references/common-mistakes.md +1 -1
- package/plugins/motion-kit/skills/motion-kit/references/content-pack.md +61 -73
- package/plugins/motion-kit/skills/motion-kit/references/craft-color.md +50 -0
- package/plugins/motion-kit/skills/motion-kit/references/craft-composition.md +52 -0
- package/plugins/motion-kit/skills/motion-kit/references/craft-critique.md +68 -0
- package/plugins/motion-kit/skills/motion-kit/references/craft-motion.md +55 -0
- package/plugins/motion-kit/skills/motion-kit/references/craft-narrative.md +54 -0
- package/plugins/motion-kit/skills/motion-kit/references/craft-sound.md +53 -0
- package/plugins/motion-kit/skills/motion-kit/references/craft-type.md +54 -0
- package/plugins/motion-kit/skills/motion-kit/references/critique-repair.md +46 -0
- package/plugins/motion-kit/skills/motion-kit/references/decision-packet.md +59 -0
- package/plugins/motion-kit/skills/motion-kit/references/direction.md +84 -0
- package/plugins/motion-kit/skills/motion-kit/references/free-storyboard.md +3 -3
- package/plugins/motion-kit/skills/motion-kit/references/intake.md +38 -12
- package/plugins/motion-kit/skills/motion-kit/references/knowledge-routing.md +58 -32
- package/plugins/motion-kit/skills/motion-kit/references/outline.md +27 -17
- package/plugins/motion-kit/skills/motion-kit/references/patterns.md +19 -19
- package/plugins/motion-kit/skills/motion-kit/references/quality-bar.md +21 -21
- package/plugins/motion-kit/skills/motion-kit/references/slop.md +13 -11
- package/plugins/motion-kit/skills/motion-kit/references/themes.md +15 -0
- package/plugins/motion-kit/skills/motion-kit/references/voice.md +25 -4
- package/plugins/motion-kit/skills/motion-kit/references/worked-decisions.md +178 -0
- package/skills/motion-kit/SKILL.md +36 -32
- package/skills/motion-kit/references/authoring-scene.md +15 -4
- package/skills/motion-kit/references/authoring-style.md +6 -4
- package/skills/motion-kit/references/common-mistakes.md +1 -1
- package/skills/motion-kit/references/content-pack.md +61 -73
- package/skills/motion-kit/references/craft-color.md +50 -0
- package/skills/motion-kit/references/craft-composition.md +52 -0
- package/skills/motion-kit/references/craft-critique.md +68 -0
- package/skills/motion-kit/references/craft-motion.md +55 -0
- package/skills/motion-kit/references/craft-narrative.md +54 -0
- package/skills/motion-kit/references/craft-sound.md +53 -0
- package/skills/motion-kit/references/craft-type.md +54 -0
- package/skills/motion-kit/references/critique-repair.md +46 -0
- package/skills/motion-kit/references/decision-packet.md +59 -0
- package/skills/motion-kit/references/direction.md +84 -0
- package/skills/motion-kit/references/free-storyboard.md +3 -3
- package/skills/motion-kit/references/intake.md +38 -12
- package/skills/motion-kit/references/knowledge-routing.md +58 -32
- package/skills/motion-kit/references/outline.md +27 -17
- package/skills/motion-kit/references/patterns.md +19 -19
- package/skills/motion-kit/references/quality-bar.md +21 -21
- package/skills/motion-kit/references/slop.md +13 -11
- package/skills/motion-kit/references/themes.md +15 -0
- package/skills/motion-kit/references/voice.md +25 -4
- 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.
|
|
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.
|
|
15
|
-
3. `brief.md`: <= 8 facts, every number sourced
|
|
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
|
|
21
|
+
| File | Read when |
|
|
22
22
|
| --------------------------------- | -------------------------------------------------------------- |
|
|
23
|
-
| `references/
|
|
24
|
-
| `references/
|
|
25
|
-
| `references/
|
|
26
|
-
| `references/
|
|
27
|
-
| `references/
|
|
28
|
-
| `references/
|
|
29
|
-
| `references/
|
|
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
|
-
| #
|
|
47
|
+
| # | Stage | Do | Done when |
|
|
44
48
|
| --- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------- |
|
|
45
|
-
| 1
|
|
46
|
-
| 2
|
|
47
|
-
| 3
|
|
48
|
-
| 4
|
|
49
|
-
| 5
|
|
50
|
-
| 6
|
|
51
|
-
| 7
|
|
52
|
-
| 8
|
|
53
|
-
| 9
|
|
54
|
-
| 10
|
|
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
|
-
|
|
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.
|
|
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`;
|
|
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
|
|
74
|
+
| Symptom | Do |
|
|
71
75
|
| ---------------- | ------------------------------------------------------------------- |
|
|
72
|
-
| exit 4
|
|
73
|
-
| exit 5
|
|
74
|
-
| same error twice | stop patching; `mk catalog <type>` and rewrite that scene
|
|
75
|
-
| anything else
|
|
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 =
|
|
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
|
|
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/
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
-
##
|
|
17
|
+
## Check the system
|
|
16
18
|
|
|
17
|
-
One 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.
|
|
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
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
`<dir>/assets.json
|
|
63
|
-
`--assets d --ledger f`.
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
`--music-
|
|
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
|
|
81
|
-
|
|
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.
|