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.
- package/lib/index.js +1 -1
- package/package.json +14 -14
- package/skills/claude-motion/SKILL.md +138 -108
- package/skills/claude-motion/artifact-type/reference/by-hand.md +23 -9
- package/skills/claude-motion/artifact-type/reference/design-systems.md +50 -0
- package/skills/claude-motion/artifact-type/reference/film-api.md +129 -252
- package/skills/claude-motion/artifact-type/reference/film-folder.md +107 -0
- package/skills/claude-motion/artifact-type/reference/finalize.md +118 -203
- package/skills/claude-motion/artifact-type/reference/kinds.md +43 -0
- package/skills/claude-motion/artifact-type/reference/later.md +130 -0
- package/skills/claude-motion/artifact-type/reference/motion.md +43 -239
- package/skills/claude-motion/artifact-type/reference/plan.md +4 -4
- package/skills/claude-motion/artifact-type/reference/questions.md +91 -152
- package/skills/claude-motion/artifact-type/reference/recording.md +186 -0
- package/skills/claude-motion/artifact-type/reference/recreate-ui.md +128 -3
- package/skills/claude-motion/artifact-type/reference/render-offline.md +3 -1
- package/skills/claude-motion/artifact-type/reference/rough-cut.md +109 -213
- package/skills/claude-motion/artifact-type/reference/sound.md +49 -100
- package/skills/claude-motion/artifact-type/reference/voice.md +63 -0
- package/skills/claude-motion/artifact-type/reference/walkthrough.md +4 -4
- package/skills/claude-motion/scripts/artifact.mjs +96 -9
- package/skills/claude-motion/scripts/editor/artifact-type/app.css +1 -1
- package/skills/claude-motion/scripts/editor/artifact-type/app.js +1177 -823
- package/skills/claude-motion/scripts/editor/index.html +1 -1
- package/skills/claude-motion/scripts/editor/local-host.js +6 -6
- package/skills/claude-motion/scripts/editor/share-ui.js +10 -10
|
@@ -1,260 +1,64 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Craft
|
|
2
2
|
|
|
3
|
-
|
|
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.
|
|
5
|
+
## 1. Looks
|
|
7
6
|
|
|
8
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
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.
|
|
6
|
-
"
|
|
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
|
|
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: "
|
|
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
|