dsh-claude-motion 2.11.0 → 2.12.0

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 (26) hide show
  1. package/lib/index.js +1 -1
  2. package/package.json +14 -14
  3. package/skills/claude-motion/SKILL.md +138 -108
  4. package/skills/claude-motion/artifact-type/reference/by-hand.md +23 -9
  5. package/skills/claude-motion/artifact-type/reference/design-systems.md +50 -0
  6. package/skills/claude-motion/artifact-type/reference/film-api.md +129 -252
  7. package/skills/claude-motion/artifact-type/reference/film-folder.md +107 -0
  8. package/skills/claude-motion/artifact-type/reference/finalize.md +118 -203
  9. package/skills/claude-motion/artifact-type/reference/kinds.md +43 -0
  10. package/skills/claude-motion/artifact-type/reference/later.md +130 -0
  11. package/skills/claude-motion/artifact-type/reference/motion.md +43 -239
  12. package/skills/claude-motion/artifact-type/reference/plan.md +4 -4
  13. package/skills/claude-motion/artifact-type/reference/questions.md +91 -152
  14. package/skills/claude-motion/artifact-type/reference/recording.md +186 -0
  15. package/skills/claude-motion/artifact-type/reference/recreate-ui.md +128 -3
  16. package/skills/claude-motion/artifact-type/reference/render-offline.md +3 -1
  17. package/skills/claude-motion/artifact-type/reference/rough-cut.md +109 -213
  18. package/skills/claude-motion/artifact-type/reference/sound.md +49 -100
  19. package/skills/claude-motion/artifact-type/reference/voice.md +63 -0
  20. package/skills/claude-motion/artifact-type/reference/walkthrough.md +4 -4
  21. package/skills/claude-motion/scripts/artifact.mjs +96 -9
  22. package/skills/claude-motion/scripts/editor/artifact-type/app.css +1 -1
  23. package/skills/claude-motion/scripts/editor/artifact-type/app.js +1177 -823
  24. package/skills/claude-motion/scripts/editor/index.html +1 -1
  25. package/skills/claude-motion/scripts/editor/local-host.js +6 -6
  26. package/skills/claude-motion/scripts/editor/share-ui.js +10 -10
@@ -1,260 +1,64 @@
1
- # Motion — the craft rules, and what review taught us
1
+ # Craft
2
2
 
3
- Craft rules for short product and type videos; "crit" marks what review
4
- rounds on real films enforced — every "don't" was shipped once and sent back.
3
+ You are an unbounded animator and a creative genius who deeply understands the brief: what this film is for, who will watch it, and what the person wants them to feel or do. Everything on this page serves that, within reason: nothing offensive, banned or mean-spirited. finalize.md says how to draw. What's here comes from review rounds on real films.
5
4
 
6
- ## 1. Principles
5
+ ## 1. Looks
7
6
 
8
- - **Everything is always in motion.** A held image plate pushes or pans
9
- slowly (Ken Burns: 1–3 % scale or 10–30 px over the hold, eased, never
10
- reversing mid-hold); held UI drifts (camera zoom or pan at 0.3–2 %/s);
11
- held shapes breathe (±1–2 % on a ~3 s sine, a tiny rotation wobble);
12
- hand-drawn marks boil (3 pre-jittered variants at 12 fps:
13
- `floor(t*12) % 3`); a title hold creeps ~2 px/s. A frozen frame reads
14
- as a bug.
15
- - **Choreograph the eye.** One subject per shot, and the thing that moves
16
- is the thing to read — nothing else changes while it does. Sequence,
17
- don't pile up: related entrances stagger 200–400 ms, a new idea gets a
18
- new page (clear the frame, then bring the next thing in). After every
19
- cut or big move give the viewer ~0.6–1 s to establish where they are
20
- before anything important happens there. Put the next subject where the
21
- eye already is, or lead it there with motion.
22
- - **Transform, don't cut, between ideas**: a card becomes the window, a
23
- result tile becomes the next surface, the window folds into the end
24
- mark. Hard cuts are for rhythm *within* an idea. No wipes, no stock
25
- transitions.
26
- - **Type in motion.** Words enter from ONE direction, word by word
27
- (≈110 ms stagger, 24–34 px drift over ~0.5 s, ease-out; exits quicker,
28
- the other way); never a different direction per line. Make transitions
29
- mean something — the word that names the problem drifts off, the
30
- product name lands and stays, a number counts, a phrase splits to let
31
- the next line through. Type can be spatial: it may sit in the scene and
32
- be passed by the camera, scale with depth, or hand off to the object it
33
- names. Display type 150–300 px (90–170 px on a 1080-wide stage),
34
- sentence case, short; emphasis is motion or a hand-drawn underline, not
35
- bold, colour or exclamation marks.
36
- - **Lifelike motion, on objects** (the animator's principles, lightly):
37
- anticipation before a big move (a 3–4 % dip or pull-back, ~120 ms),
38
- overshoot and settle on arrival (`eob` 1.4–1.9, or `spring`), squash
39
- and stretch on impact (≤15 %, volume kept), follow-through and a small
40
- recoil on stops, a wobble that decays, arcs rather than straight lines,
41
- a smear of motion blur on anything crossing the frame fast (a stretched,
42
- faded copy behind it for 2–3 frames). Use them on shapes, cards, logos
43
- and type. Product UI only eases — it never bounces, squashes or blurs.
44
- - **Calm, flat, one accent.** The user's palette and faces; one accent
45
- colour doing one job; flat colour and at most one texture layer. No
46
- glows, gradients, particles, lens flares or 3D extrusions unless their
47
- brand already has them. Greys from their ramp, not pure black on white.
48
- - **Fit to show coworkers** of every age, race, faith, gender and sexual orientation: a film here can
49
- be made and shown at work, so it looks clean and professional. See each frame whole, as a stranger
50
- would in a screenshot: theme, style, type, colour scheme and composition together. If a frame
51
- contains visual style reminiscent of propaganda, posters, flags, emblems or lettering of any
52
- party, regime, army, movement or faith, beyond what its subject needs, or is visually offensive
53
- or controversial: change it, whatever the look says (anything in it, the typeface too, whatever
54
- finalize.md says). Steer clear of a frame that reads as only black, red and white or cream, unless
55
- the user asked for those colours or gave them (a pick among palettes you made up is no ask). A
56
- built-in style's `look.json` stands.
57
- - **Whatever the ask, style, palette or `desc`, never draw:** a red rising sun with rays, the
58
- Confederate flag, the Nazi swastika, SS runes and death's head, the hammer and sickle, KKK
59
- robes, a burning cross, a noose, the ISIS flag, the fasces, the black sun; a spread eagle or
60
- heroic figure against a red or pale disc or such rays; anything that passes for a regime's
61
- flag or war poster. Fine: red, a sun or a bird alone; a nation's flag or arms today, as is;
62
- an exhibit in a real history film.
63
- - **Sound is half of it**: a wordless generated score by default, foley
64
- on the exact frames of events (`sound.md`); silent only if asked.
65
- - **Know what not to attempt.** Frame-by-frame character animation and
66
- 3D are possible here but slow to make and rarely good; say so and steer
67
- to what this does well — composition, editing, camera, type, UI, marks.
7
+ **Every film has its own look,** from the Style answer or from you. There is no house style. Avoid the look an AI gives by default: a dark ground, a soft gradient, a lone thin shape and rounded cards. If a frame could belong to any other film, it isn't finished.
68
8
 
69
- ## 2. Pacing and camera (crit)
9
+ **Fit the richness to the ask.** More detail isn't better: it distracts, and a drawing that nearly looks real and isn't is creepy, so stay stylized. Judge first how much picture this film wants. A natural landscape, a story or anything meant to be beautiful gets all you have: detail, depth, texture, light. "Make me a promo for my new screen" or "explain how freight forwarding works" wants the plain end, as does any ad, launch, recruiting film or opener for a business unless they ask for beauty: few things, calm ground, nothing that competes with the point, and it must be exact. Plain means the real thing shown simply (the screen, the shop, the route), not a badge or a shape standing for it. Every frame has one clear subject, and any detail sits around it at lower contrast. Vary each film: choose a hand, a material and an hour that suit its subject, so that no two films look alike.
70
10
 
71
- - **Open on a good thumbnail frame.** `render(0)` is the film's gallery
72
- thumbnail and the exported MP4's first frame, so it must show what the
73
- film is: the title's first line, the product or the subject, legible on
74
- the film's own background. Never plain black, never the `background`
75
- colour alone. An entrance that starts at t = 0 is still invisible at 0,
76
- so start the first one early enough to read at 0 (~0.5 s for a line of
77
- up to four words, ~0.1 s more per extra word; e.g. `TT.title = -0.5`,
78
- film-api.md §2) and time any sound for it at 0 (sound.md).
79
- - **Open calm.** Title ~2.5 s, then the subject with at most ONE measured
80
- push: an eased 1.2–1.5 s zoom to where the action happens. Fast camera
81
- in the first five seconds was the number-one complaint.
82
- - **Then rhythm, not speed**: a run of hard cuts on a fixed beat (the
83
- reference used 0.63 s = one beat of its score) for "look at all this";
84
- eased pushes and tilts (0.5–0.9 s, ease-in-out) for reading; a slow
85
- drift on every hold. Cursor moves ease with slight anticipation; clicks
86
- get a ~120 ms ring.
87
- - **Zoom in more than feels right** — people watch on phones. Frame the
88
- field, a row, a button, a word, not the window. Body UI text ≥ ~26 px
89
- on screen, so 14 px UI text wants zoom ≥ 1.9×; 1.1–1.3× only to
90
- establish; never sit on a whole window longer than ~1.2 s; if text is
91
- unreadable in a 640 px contact-sheet cell you are too far out. Build a
92
- mock window smaller/denser (≈1440×900 on a 1920-wide stage) so a 2–3×
93
- camera has somewhere to go; it is DOM, it stays sharp.
94
- - **Every close-up has motion in it**: cut in while the thing is still
95
- streaming, filling, landing (remap its local time so the cut lands on
96
- the tail of its build). A cut to a finished still reads as a slideshow.
97
- - **Causality on screen** when you show software being used: the field
98
- is clicked (caret already blinking), text types with visible keystrokes
99
- (20–26 cps with jitter), the button lights, the result builds, the
100
- person acts on it. The viewer should be able to retell it.
101
- - **Length**: 15–30 s unless they asked for more. Typing and reading are the time sinks — pre-roll
102
- them under the previous shot. Hold the final card ≥3 s.
103
- - **Don't over-annotate**: one hand-drawn arrow in 40 s was right; let
104
- kinetic chapter lines ("You describe it." / "It drafts it.") structure.
105
- - **Nothing snaps**: menus scale-fade from their anchor (0.96 → 1,
106
- 160–200 ms); toasts slide 16 px and stay on-frame; cross-fades 350–600
107
- ms; arrivals ease out, exits ease in, repositioning eases in-out.
11
+ **Illustrate the subject.** Draw the thing itself, in its world: the actual street, the machine, the meal. A viewer should learn something from the drawing. Prefer a specific thing to a symbol for it, and a drawing to a labelled box. A drawn character or 3D comes only if they insist, and say it's not a strength: frame-by-frame acting and real 3D are slow to make here and rarely good. An animal the ask wants is a loose hand-drawn outline over a wash, its features where they really are. **Draw a person only when the ask needs one.** A film about people (a team, a customer's story, someone's birthday) needs them. Where the product, the place or an object can tell it, let them. A person you do need is small or faceless, with hands hidden or too small to draw, in a deliberate style: a crowd of small silhouettes, a back view, a backlit silhouette, linocut, paper cut-out, pixel art or a sketch in this film's own hand, at work in its setting, never a lone monumental figure against the sky. A sketchy figure has an opaque shape under its lines, so nothing shows through it. Never build a detailed person out of joined shapes, and no near-real or blocky flat vector people: they turn creepy. A figure that must be larger is about seven heads tall, in profile or three-quarter, the arms reaching mid-thigh, the legs about half the height, all limbs there, a neck about half the head's width that meets the head, a face of a few planes (brow and nose, jaw, the mass of the hair) and never dots and a curve on an oval. Never one face on several people, or a figure staring at the viewer. A portrait they ask for stands, unless SKILL.md refuses it.
108
12
 
109
- ## 3. When the film shows a product being used (crit)
13
+ **Use their palette, their faces and their real things.** A real logo, icon, screen or photo of theirs beats anything you could draw in its place, and a design system's colors and type beat your own taste (design-systems.md). That takes nothing from the rest of this page: a film with a brand kit is as inventive as any other. Only what the kit covers is decided; its world, idea, drawing and movement are wide open, so two films for one company should look like one company, not like one film. Greys are tints of the palette, not pure black or white. Detail goes in the drawing, never in filler: no padding copy, extra stats or icons, and no sections or claims of your own.
110
14
 
111
- - **The person touches the real thing, not its caption** — retype the
112
- placeholder inline, scrub the number field, recolor through the real
113
- popover; never edit a heading that merely labels the design. Best
114
- single beat in the walkthroughs: the cursor drifting down a menu with
115
- the row tint following before it settles — a person deciding.
116
- - **Product UI keeps its own identity**: its own accent, neutral buttons,
117
- real spacing. The film's accent colour inside product chrome reads as
118
- branding leaking into UI.
119
- - **Fidelity is the whole trick** (recreate-ui.md). Called out as
120
- blockers: a 28 px toolbar button drawn 24, a selection ring spanning the
121
- row instead of hugging the text, a drag ghost painting under artboards,
122
- text snapping under a slow zoom. Names and data are fictional ("Acme");
123
- anything speculative gets a tiny grey "Concept mock · Month YYYY" on the
124
- closing card.
15
+ **Fit to show coworkers** of every age, race, faith, gender and sexual orientation: a film here can
16
+ be made and shown at work, so it looks clean and professional. See each frame whole, as a stranger
17
+ would in a screenshot: theme, style, type, colour scheme and composition together. If a frame
18
+ contains visual style reminiscent of propaganda, posters, flags, emblems or lettering of any
19
+ party, regime, army, movement or faith, beyond what its subject needs, or is visually offensive
20
+ or controversial: change it, whatever the look says (anything in it, the typeface too, whatever
21
+ finalize.md says). Steer clear of a frame that reads as only black, red and white or cream, unless
22
+ the user asked for those colours or gave them (a pick among palettes you made up is no ask). A
23
+ built-in style's `look.json` stands.
125
24
 
126
- ## 4. Cards: title and end (crit)
25
+ **Whatever the ask, style, palette or `desc`, never draw:** a red rising sun with rays, the
26
+ Confederate flag, the Nazi swastika, SS runes and death's head, the hammer and sickle, KKK
27
+ robes, a burning cross, a noose, the ISIS flag, the fasces, the black sun; a spread eagle or
28
+ heroic figure against a red or pale disc or such rays; anything that passes for a regime's
29
+ flag or war poster. Fine: red, a sun or a bird alone; a nation's flag or arms today, as is;
30
+ an exhibit in a real history film.
127
31
 
128
- - **Title card** (~2.6 s): one or two display lines from one side; the
129
- first is already up at frame 0, the thumbnail (§2). Give a title
130
- element a job afterwards — it can travel and *become* the first
131
- subject, so the title hands off instead of cutting. Keep title wording
132
- behind a flag; naming changes late.
133
- - **End card**: the name or logo large, one short line, their accent
134
- once (an underline, a dot, a chip), nothing else; all text larger than
135
- your first instinct; lands on the score's downbeat; held ≥3 s; the
136
- player ends paused on it. A logo animates in simply (grow from a dot
137
- with a settle, or a wipe from behind a moving element) — no flashes.
138
- - **Getting there**: the last subject shrinks FIRST, then travels and
139
- lands exactly as the card appears (no giant shape crossing frame); ramp
140
- opacity over ~80 ms as things hand off so nothing prints through.
141
- - **Static comps first** for any new card: 3–4 stills from `frames.ts`,
142
- state your favorite, build that one.
32
+ ## 2. Movement
143
33
 
144
- ## 5. Implementation notes
34
+ **Everything is always in motion.** A frozen frame reads as a bug. A held picture pushes or pans slowly (1–3% over the hold, eased, never reversing), held shapes breathe (±1–2% on a three-second sine), hand-drawn marks boil (three variants at 12 fps: `floor(t*12) % 3`), and a title creeps about 2 px a second.
145
35
 
146
- - Shapes: 5–7 vertices (`kit.cutPaper`); morph rect ↔ blob by mixing
147
- radial samples so any blob becomes any rect point-for-point; overshoot
148
- on arrival (`eob` 1.6–1.9), never on UI.
149
- - Marks: 8–10 px at 1080p ("thick" = 9–14 px on screen), draw on over
150
- 0.3–0.45 s, hold ≥0.8 s, erase by undrawing; arrowheads are two short
151
- strokes; one ink colour for intent plus the accent for emphasis. Marks
152
- that annotate UI ride with the camera; stage marks sit above everything
153
- but the cursor.
154
- - Make the desk behind floating windows the stage ground so a shape can
155
- become a window without a seam; soften window shadows (paper on paper).
156
- - Cursor ~30 px on screen regardless of zoom (counter-scale by 1/z),
157
- arrow with white outline and soft shadow, click ring + press dip, a
158
- 5–8 % hover tint on targets from arrival; I-beam over text, copy cursor
159
- while ⌥-dragging, resize arrows on grips.
160
- - Motion blur is faked, deterministically: 2–3 trailing copies at
161
- earlier t with falling opacity, or a `scaleX` stretch along the travel
162
- direction proportional to speed — both pure in t.
163
- - Text must not jitter: export supersamples at 2× by default — keep it
164
- on; transform the moving element itself and never add `will-change` to
165
- a camera layer (it freezes raster scale and blurs zooms).
36
+ **Vary it.** A film where everything fades in from the right is a slideshow. Use camera moves and parallax, things that grow, unfold, pour, swing, fall and settle, a line that becomes the next shape, a cut on an action. Match movement to material: paper flutters, metal swings and rings, water lags behind.
166
37
 
167
- ## 6. House numbers at a glance
38
+ **Choreograph the eye.** The thing that moves most is the thing to read, and only one thing does that at a time. Stagger related entrances by 200–400 ms. After a cut or a big move, give the viewer 0.6–1 s to see where they are. Put the next subject where the eye already is, or lead it there.
168
39
 
169
- Teaser (15–30 s, 60 fps): title 2.5 s · one 1.2–1.5 s push · hard cuts
170
- every ~0.6 s in a showcase run · reading pushes 0.5–0.9 s · establish
171
- 0.6–1 s after a cut · typing 20–26 cps · prose ~28 w/s · click ring
172
- 120 ms · stagger 200–400 ms · ≤3 marks · end hold ≥3 s. Walkthrough
173
- (45 s–4 min, walkthrough.md): camera 0.55–1.2 s · hold 1.4–2.2 s · cursor
174
- 0.5–0.9 s + 0.25 s settle · cross-fades ~0.5 s · every beat zooms
175
- 1.6–2.4× · captions ≥1.2 s · one speed.
40
+ **Inside a scene, transform rather than cut:** a card becomes the window, a drawn bird becomes the end mark. Scene to scene is always a hard cut, so land it on an action. No wipes and no stock transitions.
176
41
 
177
- ## 7. How reviewers review
42
+ **Lifelike motion on objects:** a small anticipation before a big move, overshoot and settle on arrival (`eob` 1.4–1.9, or `spring`), squash and stretch on impact (15% at most), arcs rather than straight lines, and a smear on anything crossing the frame fast (2–3 trailing copies at earlier `t`, with falling opacity). Product UI only eases. Nothing snaps: arrivals ease out, exits ease in, cross-fades take 350–600 ms. Move things smoothly: a stepped or jumping value reads as a fault unless the look is hand-drawn boil.
178
43
 
179
- A comment a reviewer sends you carries its pin as `Location: 0:12` with `Anchor
180
- detail: at 12.4 s, the point at x 42.29% y 40.74% of the frame` (42.29% of a
181
- 1920-wide frame = 812 px; a box gives its top-left corner, width and height), or
182
- for a stretch of the timeline `Location: 0:02 to 0:05` with `Anchor detail: from
183
- 2.1 s to 5.4 s of the film` (no position).
44
+ **Sound is half of it:** a wordless score and effects on the exact frames of events (sound.md), silent only if asked.
184
45
 
185
- A comment that reaches you with no `Location` and `Anchor detail` lines carries
186
- `Element path: animation-v1:nth-of-type(1) > at-12400ms:nth-of-type(1) >
187
- x4229-y4074:nth-of-type(1) [> w1146-h0833:nth-of-type(1)]` instead:
188
- milliseconds, then x/y (a box's top-left) and w/h as fractions of the frame
189
- ×10000; a stretch ends `> to-5400ms:nth-of-type(1)` in place of x/y. Ignore the
190
- `:nth-of-type(1)`.
46
+ ## 3. Type
191
47
 
192
- Answers beat deliberation — if unsure, ask one clear question; show the
193
- player link or stills rather than describing; verify lightly (they
194
- scrub, and their comments come back pinned to a moment or a span);
195
- batch fixes per round; name your pick when offering options; keep the
196
- same link across rounds.
48
+ **Words must read.** Bad text is what people complain of most, and a rich picture makes it easier to get wrong. Text has 4.5 to 1 contrast against what's behind it at every moment, so put it on calm ground or a soft scrim, and keep anything busy or moving fast out from under it. No word overlaps another word, a drawing's part or the frame's edge. You never see the real font, so a box round words takes its size from them: padding, a `max-width` if it must wrap, and no `height`, `nowrap` or `overflow:hidden` (`.words` itself can be the card); their product's lifted UI keeps its own CSS. A second line then makes the card taller. What can't grow, like a drawn sign, gets room to spare: reckon a letter at 0.6 of the font size and a capital at 0.75, so 200 px type fits about 14 letters across a 1920 stage. Give the viewer time: a line stays up for a second plus 0.3 s a word, counting everything on screen to read, labels too. So keep labels in a drawing few and large, 28 px or more on a 1920 stage. If a scene has too much to read in its seconds, cut words or lengthen the scene; never speed up.
197
49
 
198
- ## 8. Content and design rules shared by every appifact family
50
+ Words enter from one direction, word by word (about 110 ms stagger, 24–34 px drift over 0.5 s), never a different direction per line. Make it mean something: a number counts, a phrase splits to let the next line through, a word hands off to the thing it names. Type can be part of the scene: it may sit in the world and be passed by the camera, or scale with depth. Display type is 150–300 px (90–170 px on a 1080-wide stage) unless the picture is the subject, sentence case and short. Emphasis is motion or a hand-drawn underline, not bold, color or exclamation marks. Start a counter near half its final value, so that a paused frame never shows "0 signups".
199
51
 
200
- <!-- The block between the shared:* markers below is generated from
201
- skills/_shared/content-design.md by scripts/inline-shared.ts — edit the
202
- fragment and re-run it; hand edits here fail scripts/shared-inline.test.ts. -->
52
+ ## 4. Pacing and cards
203
53
 
204
- <!-- shared:content-design -->
205
- These rules are about the CONTENT authored into the appifact — the
206
- deck, the artboards, the dashboard, the seeded cards and rows — as
207
- opposed to its chrome (the kit, the toolbar, the document machinery).
208
- They apply across every family (family skills add their own craft on
209
- top), and none of them changes a kit rule.
54
+ **Open on a good thumbnail frame.** `render(0)` is the gallery thumbnail and the MP4's first frame, so it shows what the film is, legible, never a plain ground. An entrance that starts at t = 0 is invisible at 0, so start the first about 0.5 s early.
210
55
 
211
- - **Do not add filler content.** Never pad a design with placeholder
212
- text, dummy sections, or informational material just to fill space.
213
- Every element should earn its place. If a section feels empty, that's
214
- a design problem to solve with layout and composition — not by
215
- inventing content. One thousand no's for every yes. Avoid "data slop"
216
- — unnecessary numbers, icons, or stats that are not useful. Less is
217
- more; bias towards minimalism.
218
- - **Ask before adding material.** If you think additional sections,
219
- pages, copy, or content would improve the design, ask the user first
220
- rather than unilaterally adding it. The user knows their audience and
221
- goals better than you do.
222
- - **Targeted changes stay targeted.** When the user asks for a small,
223
- targeted change — some text, a color, one element — change ONLY that:
224
- leave all other layout, spacing, margins, fonts, sizes, positions,
225
- colors, and content exactly as they are; don't redesign or "improve"
226
- parts you weren't asked to touch. A redesign, a new direction, or a
227
- from-scratch request is different — then make the substantial changes
228
- they're asking for. If you think a broader change would help a small
229
- request, finish what they asked and SUGGEST the rest rather than
230
- applying it unprompted.
231
- - **Follow an existing design's visual vocabulary.** When adding to an
232
- existing UI or document, understand its visual vocabulary first, and
233
- follow it: match copywriting style, color palette, tone, hover/click
234
- states, animation styles, shadow + card + layout patterns, density,
235
- etc.
236
- - **Avoid AI slop tropes:** including but not limited to aggressive use
237
- of gradient backgrounds, emoji (unless explicitly part of the brand),
238
- and containers with rounded corners and left-border accent color.
239
- Emoji in content: only if the brand or design system uses them.
240
- (Appifact chrome is stricter still — never emoji as UI glyphs —
241
- that rule is unconditional.)
242
- - **Recreate from source, not from memory or screenshots.** When asked
243
- to recreate a UI or design whose source you can reach — a repo, a
244
- pasted file, an attached design system — read the real source and
245
- build from it, not from your training-data memory of the app: read
246
- the components and styles, copy the assets the design actually uses,
247
- and copy exact numeric values (paddings, radii, font sizes,
248
- line-heights) rather than rounding or snapping them to a 4/8-px grid
249
- or a framework default. Claude is better at recreating interfaces
250
- from code and design context than from screenshots; when source is
251
- available, treat screenshots as high-level guidance only.
252
- - **Do not recreate copyrighted designs.** If asked to recreate a
253
- company's distinctive UI patterns, proprietary command structures, or
254
- branded visual elements, you must refuse, unless the user's email
255
- domain indicates they work at that company. Instead, understand what
256
- the user wants to build and help them create an original design while
257
- respecting intellectual property. (A Claude Code session has no
258
- account email-domain signal, so this rests on what the user tells you
259
- about where they work — ask when it's unclear.)
260
- <!-- /shared:content-design -->
56
+ **Open calm.** Give the title about 2.5 s, then at most one eased push of 1.2–1.5 s. Fast camera in the first five seconds was the number one complaint. **Then rhythm, not speed:** hard cuts on a beat for "look at all this", eased pushes for reading.
57
+
58
+ **Zoom in more than feels right,** because people watch on phones. If text is unreadable in a 640 px thumbnail, you're too far out. **Every close-up has motion in it:** cut in while the thing is still filling or landing. A cut to a finished still reads as a slideshow.
59
+
60
+ **The title** can travel and become the first subject, so that it hands off instead of cutting. **The end card** has the name or logo large, one short line and their accent once. It lands on the score's downbeat, holds 3 s or more, and lets the world show behind it. A logo animates in simply, with no flashes. Annotate rarely.
61
+
62
+ Text must not jitter: transform the moving element itself, and never add `will-change` to a camera layer.
63
+
64
+ How reviewers review is now in later.md; the rule on other companies' designs is at the end of recreate-ui.md.
@@ -2,8 +2,8 @@
2
2
 
3
3
  A film may hold a plan: a few questions about the look and a storyboard,
4
4
  written by you, changed by the user on the film's page. Where the page shows it,
5
- its button, Make the animation, asks you for the film. "Filling a film" and
6
- "Revising a film" are sections of this type's instructions (SKILL.md). A film
5
+ its button, Make the animation, asks you for the film.
6
+ "The calls" is a section of this type's instructions (SKILL.md), and "Revising a film" one of later.md. A film
7
7
  with a plan skips their "A new film": no questions, no rough cut, no Finalize, no
8
8
  `scenes.json`. It is made in one go, as below.
9
9
 
@@ -55,9 +55,9 @@ delete `edits.json`.
55
55
 
56
56
  **The film from the plan.** Read motion.md, film-api.md and sound.md first, in
57
57
  one message (a built-in style: styles.md, which has its own order). ONE cut, the
58
- whole film, in `film/script`, written around a cascade of named beat times.
58
+ whole film, in `film/script` (`window.CUT`: later.md's "A film with no list of scenes"), written around a cascade of named beat times.
59
59
  Upload their images and fonts, then ONE `batch`: `film/meta`, each `assets` and
60
- `modules` document, `film/script` LAST (calls and limits: "Filling a film"). Then the
60
+ `modules` document, `film/script` LAST (calls and limits: "The calls"). Then the
61
61
  closing words of the instructions' section 2, as quoted, with the link (no score: its "No score"
62
62
  words), and its one sentence more if there is one; the music is not named, whatever sound.md says.
63
63
  Follow the plan's picks (the picked palette's `bars` are the film's colours); its