creator-editing-studio 1.2.0 → 1.2.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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "creator-editing-studio",
3
- "version": "1.2.0",
3
+ "version": "1.2.1",
4
4
  "description": "Scaffolds a Creator Editing OS studio — components, scripts and rules for editing video from a plain-English brief.",
5
5
  "license": "UNLICENSED",
6
6
  "type": "module",
@@ -48,264 +48,260 @@ Everything else in `src/design/` is the system and should be left alone. If a vi
48
48
  a colour or a size that is not in tokens.ts, the answer is to add it to tokens.ts, never to
49
49
  type it into a component.
50
50
 
51
- ## Non-negotiables
52
-
53
- 1. **No magic numbers.** Durations, curves, springs, staggers, blur come from `src/design/motion.ts`.
54
- Colours, fonts, sizes, spacing come from `src/design/tokens.ts`. If a needed token does not
55
- exist, add it to the token file (with a comment) instead of inlining a value.
56
- 2. **Timing derives from the spine.** Animation start frames come from word timestamps, beats,
57
- or other elements' timings via helpers — never hand-typed frame numbers.
58
- 3. **`npm run check` and `motion-check --scale=2` must pass** before any render is shown to the user.
59
- 4. **Verify visually before claiming done** (see Verification). Never say something "looks good"
60
- without having rendered and viewed the frames.
61
-
51
+ ## Non-negotiables
52
+
53
+ 1. **No magic numbers.** Durations, curves, springs, staggers, blur come from `src/design/motion.ts`.
54
+ Colours, fonts, sizes, spacing come from `src/design/tokens.ts`. If a needed token does not
55
+ exist, add it to the token file (with a comment) instead of inlining a value.
56
+ 2. **Timing derives from the spine.** Animation start frames come from word timestamps, beats,
57
+ or other elements' timings via helpers — never hand-typed frame numbers.
58
+ 3. **`npm run check` and `motion-check --scale=2` must pass** before any render is shown to the user.
59
+ 4. **Verify visually before claiming done** (see Verification). Never say something "looks good"
60
+ without having rendered and viewed the frames.
61
+
62
62
  ---
63
63
 
64
- ## The 12 motion laws
65
-
66
- 1. **No linear easing** — except constant-velocity loops/scrolls (mark with `// motion-ok`).
67
- 2. **Entrances ease-out (`EASE.out`), exits ease-in (`EASE.in`), on-screen A-to-B moves ease-in-out (`EASE.inOut`).**
68
- 3. **Exits are faster than entrances** — `EXIT_RATIO` (0.65). Use `exitFrames()`.
69
- 4. **Max 2–3 animated properties per element.** No fade + scale + rotate + blur together.
70
- 5. **Never opacity alone.** Pair with 8–24px travel or scale >= 0.94. Opacity completes at
71
- `OPACITY_LEAD` (60%) of the transform.
72
- 6. **Never scale from below 0.9.** Text scaling from zero is the #1 AI-edit tell.
73
- 7. **Blur-in capped at 12px**, fully resolved before the transform ends.
74
- 8. **Groups always stagger** (`STAGGER.tight/normal/dramatic`). Never simultaneous.
75
- 9. **Distance couples to duration sub-linearly** (`travelFrames()`), never linearly.
76
- 10. **Anything that moves fast is motion-blurred** (see Smoothness system). No hard edge may jump
77
- across the frame unblurred.
78
- 11. **Readable hold:** text stays fully visible >= `readFrames(text)` (min 0.9s, +55ms/word).
79
- 12. **Continuity:** every transition inherits the outgoing motion (see below).
80
-
81
- ### Continuity (what makes it feel connected, not cut together)
82
-
83
- - **Shared elements never re-enter.** If an element exists across two beats, `morph()` its
84
- position/size/radius between layouts; never exit and re-animate it. (TransitionTest: the
85
- eyebrow dot stays on screen and grows into the next card's icon tile.)
86
- - **Velocity handoff.** An exit toward a direction is answered by an entrance continuing that
87
- direction — `handoff(exitTo)`.
88
- - **Overlap, never gap.** The next beat starts before the previous one settles —
89
- `nextBeatAt(prevSettled)`.
90
- - **One camera over cuts.** Lay scenes out on one canvas and glide a camera between them
91
- (`src/lib/camera.ts`) instead of hard-cutting between unrelated layouts. Content that should
92
- stay put during a move (shared elements) lives in screen space, outside the camera.
93
- - **Nothing is cut off.** Compute exit start times backward from the end so the slowest,
94
- most-staggered exit completes on or before the last frame.
95
- - **Sound glues cuts.** Whooshes start `TRANSITION.sfxLeadMs` before a visual change and tail
96
- `sfxTailMs` after.
97
-
64
+ ## The 12 motion laws
65
+
66
+ 1. **No linear easing** — except constant-velocity loops/scrolls (mark with `// motion-ok`).
67
+ 2. **Entrances ease-out (`EASE.out`), exits ease-in (`EASE.in`), on-screen A-to-B moves ease-in-out (`EASE.inOut`).**
68
+ 3. **Exits are faster than entrances** — `EXIT_RATIO` (0.65). Use `exitFrames()`.
69
+ 4. **Max 2–3 animated properties per element.** No fade + scale + rotate + blur together.
70
+ 5. **Never opacity alone.** Pair with 8–24px travel or scale >= 0.94. Opacity completes at
71
+ `OPACITY_LEAD` (60%) of the transform.
72
+ 6. **Never scale from below 0.9.** Text scaling from zero is the #1 AI-edit tell.
73
+ 7. **Blur-in capped at 12px**, fully resolved before the transform ends.
74
+ 8. **Groups always stagger** (`STAGGER.tight/normal/dramatic`). Never simultaneous.
75
+ 9. **Distance couples to duration sub-linearly** (`travelFrames()`), never linearly.
76
+ 10. **Anything that moves fast is motion-blurred** (see Smoothness system). No hard edge may jump
77
+ across the frame unblurred.
78
+ 11. **Readable hold:** text stays fully visible >= `readFrames(text)` (min 0.9s, +55ms/word).
79
+ 12. **Continuity:** every transition inherits the outgoing motion (see below).
80
+
81
+ ### Continuity (what makes it feel connected, not cut together)
82
+
83
+ - **Shared elements never re-enter.** If an element exists across two beats, `morph()` its
84
+ position/size/radius between layouts; never exit and re-animate it. (TransitionTest: the
85
+ eyebrow dot stays on screen and grows into the next card's icon tile.)
86
+ - **Velocity handoff.** An exit toward a direction is answered by an entrance continuing that
87
+ direction — `handoff(exitTo)`.
88
+ - **Overlap, never gap.** The next beat starts before the previous one settles —
89
+ `nextBeatAt(prevSettled)`.
90
+ - **One camera over cuts.** Lay scenes out on one canvas and glide a camera between them
91
+ (`src/lib/camera.ts`) instead of hard-cutting between unrelated layouts. Content that should
92
+ stay put during a move (shared elements) lives in screen space, outside the camera.
93
+ - **Nothing is cut off.** Compute exit start times backward from the end so the slowest,
94
+ most-staggered exit completes on or before the last frame.
95
+ - **Sound glues cuts.** Whooshes start `TRANSITION.sfxLeadMs` before a visual change and tail
96
+ `sfxTailMs` after.
97
+
98
98
  ---
99
99
 
100
- ## Smoothness system (every one of these was a real defect found by motion-check)
101
-
102
- - **Use the components, not raw transforms.** `<Presence>`, `<MaskReveal>`, `<HighlightMark>`,
103
- `<RollingNumber>` add velocity motion blur automatically. Anything else that moves wraps its
104
- moving element in `<VelocityBlur vx vy>` with `perFrame()` velocities.
105
- - **Velocity motion blur** (`VelocityBlur`): directional blur sized to this frame's movement with
106
- a 180-degree shutter; fades to zero as the element settles. Near-free to render.
107
- - **Wipes** use `wipeMask(p, perFrame(...))`: the leading edge softens with speed. Never wipe with
108
- a hard `clipPath` edge.
109
- - **Camera moves**: wrap the camera canvas in a full-frame `VelocityBlur` with `bleed={0}` and
110
- `overflow: hidden`, velocity from `cameraShot` (see TransitionTest).
111
- - **Zooms / rotations** (not translations): use `<MotionBlur active>` (temporal sampling, centred
112
- on the frame so toggling it never shifts timing). It costs 10x render time while active —
113
- enable only during the move. Never use `@remotion/motion-blur`'s `CameraMotionBlur`: it samples
114
- ahead of the frame, so switching it on/off causes a timing hitch.
115
- - **Counters roll, never tick.** Use `<RollingNumber>`. A counting number changes glyphs in single
116
- frames as it slows, which motion-check flags as pops.
117
- - **Never `will-change`.** It makes each parallel render tab cache text at a different sub-pixel
118
- position, so settled elements flicker between 4 versions. (Lint enforces this.)
119
- - **Screen recordings used as b-roll usually scroll in steps** (they judder). Use a still frame with a
120
- smooth `ScreenView` pan instead, and blur names on the still.
121
- - **Presence `dur` sets entrance AND exit length.** `dur="instant"` makes exits last 3 frames (a snap) —
122
- for containers that only fade in, use at least `"base"`.
123
- - **Final renders are supersampled at `--scale=2`**, then downscaled to 1080x1920. At 1x, Chrome
124
- snaps text to whole pixels, so the slow tail of every ease-out steps ("move 1px, hold, move 1px")
125
- and motion-check reports stutters. Run motion-check with the same `--scale`.
126
- - **Frame rate:** match the footage. If footage is 60fps, build at 60 — per-frame jumps halve.
127
- All tokens are in ms, so compositions work at either rate.
128
-
100
+ ## Smoothness system (every one of these was a real defect found by motion-check)
101
+
102
+ - **Use the components, not raw transforms.** `<Presence>`, `<MaskReveal>`, `<HighlightMark>`,
103
+ `<RollingNumber>` add velocity motion blur automatically. Anything else that moves wraps its
104
+ moving element in `<VelocityBlur vx vy>` with `perFrame()` velocities.
105
+ - **Velocity motion blur** (`VelocityBlur`): directional blur sized to this frame's movement with
106
+ a 180-degree shutter; fades to zero as the element settles. Near-free to render.
107
+ - **Wipes** use `wipeMask(p, perFrame(...))`: the leading edge softens with speed. Never wipe with
108
+ a hard `clipPath` edge.
109
+ - **Camera moves**: wrap the camera canvas in a full-frame `VelocityBlur` with `bleed={0}` and
110
+ `overflow: hidden`, velocity from `cameraShot` (see TransitionTest).
111
+ - **Zooms / rotations** (not translations): use `<MotionBlur active>` (temporal sampling, centred
112
+ on the frame so toggling it never shifts timing). It costs 10x render time while active —
113
+ enable only during the move. Never use `@remotion/motion-blur`'s `CameraMotionBlur`: it samples
114
+ ahead of the frame, so switching it on/off causes a timing hitch.
115
+ - **Counters roll, never tick.** Use `<RollingNumber>`. A counting number changes glyphs in single
116
+ frames as it slows, which motion-check flags as pops.
117
+ - **Never `will-change`.** It makes each parallel render tab cache text at a different sub-pixel
118
+ position, so settled elements flicker between 4 versions. (Lint enforces this.)
119
+ - **Screen recordings used as b-roll usually scroll in steps** (they judder). Use a still frame with a
120
+ smooth `ScreenView` pan instead, and blur names on the still.
121
+ - **Presence `dur` sets entrance AND exit length.** `dur="instant"` makes exits last 3 frames (a snap) —
122
+ for containers that only fade in, use at least `"base"`.
123
+ - **Final renders are supersampled at `--scale=2`**, then downscaled to 1080x1920. At 1x, Chrome
124
+ snaps text to whole pixels, so the slow tail of every ease-out steps ("move 1px, hold, move 1px")
125
+ and motion-check reports stutters. Run motion-check with the same `--scale`.
126
+ - **Frame rate:** match the footage. If footage is 60fps, build at 60 — per-frame jumps halve.
127
+ All tokens are in ms, so compositions work at either rate.
128
+
129
129
  ---
130
130
 
131
- ## Design rules
132
-
133
- **Read `STYLE.md` before any design decision.** It is the house style (type scale, layout, motion,
134
- sound, approved and rejected beats) and wins over anything below or in a reference. Update it
135
- whenever the user approves or rejects something.
136
-
137
- - Everything visual comes from `src/design/tokens.ts`, which is yours to define.
138
- - **Brand essentials:** your display typeface only, at every weight (headlines/stats 800). One accent: accent
139
- `your accent` on ink and cream/white. No blue, no purple, no serif. Signature emphasis is the accent
140
- marker behind the key phrase — use `<HighlightMark>`; don't invent other emphasis styles.
141
- Headlines are short two-part fragments with the payoff highlighted. Numbers are shown raw and
142
- bold ("$1.3M", "11x") and roll in. Eyebrows are uppercase pills with a accent-ringed dot.
143
- Radii are generous, shadows soft, buttons/badges pills.
144
- - Secondary text uses `COLOR.fgSecondary`; `COLOR.fgMuted` fails contrast on cream — decoration only.
145
- - **Your style decisions:** *(empty on purpose — this fills in as you make them)*
146
-
147
- When something gets settled about how your videos look, write it here as one line. Where
148
- captions sit in a card layout. Whether headlines take the accent colour or the ink. What a
149
- corner tag does when the video returns to full screen. This file is read first every
150
- session, so a decision recorded here is one you never have to make twice, and the studio
151
- stops asking.
152
-
153
- Do not fill this with defaults copied from somewhere else. An empty section produces
154
- questions; a borrowed one produces someone else's videos.
155
-
156
- The one rule here that is not a preference: brand logos are **real full-colour logos**
157
- (`LogoIcon`, SVG Logos CC0 via `src/design/logos.json`, extract only the icons used). Never
158
- approximate a logo that is not in the set. Use a neutral icon and ask for the official file.
159
- - **Text behind the subject must stay readable:** the head covers only the lower ~20–30% of the
160
- headline. Head height changes shot to shot (leaning forward lifts it ~80px) — check a still of
161
- EVERY hero moment and raise the block (`top`; put labels above as `eyebrow`) where needed.
162
- - Keep accent highlights away from the accent background glow so they don't disappear into it.
163
- - Stats use proportional figures, not tabular (tabular makes "11" look gappy in your display typeface).
164
- - **Web design systems do not map 1:1 to video.** Keep colour, font families/weights, type-scale
165
- ratios, radii, spacing rhythm, iconography and imagery style — but rescale sizes for a
166
- 1080-wide frame viewed on a phone (body roughly 40–48px, not 16px). Web UI components mostly
167
- do not apply.
168
- - Respect safe zones: `LAYOUT.safeTop` / `LAYOUT.safeBottom` for Reels/Shorts UI.
169
- - Text contrast >= 4.5:1 against whatever is behind it, including over footage.
170
- - Draw graphics in code (SVG/CSS) so every part can animate. Use flat images only for things
171
- that must be real (logos, screenshots, photos). Avoid AI-generated imagery for anything the
172
- viewer is meant to look at.
173
- - Icons: SVG drawn in code or an installed icon library, never image files.
174
-
131
+ ## Design rules
132
+
133
+ **Read `STYLE.md` before any design decision.** It is the house style (type scale, layout, motion,
134
+ sound, approved and rejected beats) and wins over anything below or in a reference. Update it
135
+ whenever the user approves or rejects something.
136
+
137
+ - Everything visual comes from `src/design/tokens.ts`, which is yours to define.
138
+ - **Brand essentials:** your display typeface only, at every weight (headlines/stats 800). One accent: accent
139
+ `your accent` on ink and cream/white. No blue, no purple, no serif. Signature emphasis is the accent
140
+ marker behind the key phrase — use `<HighlightMark>`; don't invent other emphasis styles.
141
+ Headlines are short two-part fragments with the payoff highlighted. Numbers are shown raw and
142
+ bold ("$1.3M", "11x") and roll in. Eyebrows are uppercase pills with a accent-ringed dot.
143
+ Radii are generous, shadows soft, buttons/badges pills.
144
+ - Secondary text uses `COLOR.fgSecondary`; `COLOR.fgMuted` fails contrast on cream — decoration only.
145
+ - **User style decisions (first project):**
146
+ - Captions are **crisp white** (`CAPTION` token, tight + soft dark shadow). Never ink text with a light glow.
147
+ Over the cream background white is invisible, so in card layouts captions go **inside the video
148
+ card's bottom edge** on the card's dark scrim (`StageState.scrim`).
149
+ - Big headline text is **accent with a glow** (`HeroBlock` / `HeroTag`, `heroGlow()`).
150
+ - Pointer is a **solid accent arrow** like the reference (`Cursor`), ~68px.
151
+ - Brand logos are **real full-colour logos** (`LogoIcon`, SVG Logos CC0 via `src/design/logos.json` —
152
+ extract only the icons used). Never approximate a logo that isn't in the set; use a neutral
153
+ icon and ask for the official file (Klaviyo is missing).
154
+ - A corner tag (e.g. "11 MINUTES" pill) is removed when the video returns full screen.
155
+ - **Text behind the subject must stay readable:** the head covers only the lower ~20–30% of the
156
+ headline. Head height changes shot to shot (leaning forward lifts it ~80px) — check a still of
157
+ EVERY hero moment and raise the block (`top`; put labels above as `eyebrow`) where needed.
158
+ - Keep accent highlights away from the accent background glow so they don't disappear into it.
159
+ - Stats use proportional figures, not tabular (tabular makes "11" look gappy in your display typeface).
160
+ - **Web design systems do not map 1:1 to video.** Keep colour, font families/weights, type-scale
161
+ ratios, radii, spacing rhythm, iconography and imagery style — but rescale sizes for a
162
+ 1080-wide frame viewed on a phone (body roughly 40–48px, not 16px). Web UI components mostly
163
+ do not apply.
164
+ - Respect safe zones: `LAYOUT.safeTop` / `LAYOUT.safeBottom` for Reels/Shorts UI.
165
+ - Text contrast >= 4.5:1 against whatever is behind it, including over footage.
166
+ - Draw graphics in code (SVG/CSS) so every part can animate. Use flat images only for things
167
+ that must be real (logos, screenshots, photos). Avoid AI-generated imagery for anything the
168
+ viewer is meant to look at.
169
+ - Icons: SVG drawn in code or an installed icon library, never image files.
170
+
175
171
  ---
176
172
 
177
- ## Compositing: text behind the subject
178
-
179
- Layer order, bottom to top:
180
-
181
- ```
182
- background plate (designed, or the original footage)
183
- text / graphics <- 1–3px blur to sit on the background's focal plane
184
- subject cutout <- same clip, frame-aligned
185
- light wrap <- blurred background screened onto the subject's inner edge, 15–30%
186
- grain + grade <- applied over everything so layers share one look
187
- ```
188
-
189
- - **The cutout must come from the same clip as its background plate**, frame-aligned. Never
190
- combine a cutout from one take with footage from another.
191
- - **The matte is built automatically from ordinary footage.** No green screen, and never ask the
192
- user for one — most people have never shot against green and do not know the term. Segment the
193
- subject per frame, then **temporally smooth the alpha**, which is not optional: a per-frame matte
194
- shimmers along the edge, and type sitting against a head is exactly where that shows. Finish with
195
- spill-free cleanup: ~0.5px choke, 0.5–1px feather.
196
- - **Quality is worst where it is most visible:** flyaway hair, motion blur, and a hand crossing in
197
- front of the text. The light wrap below hides a good deal of it. If a shot simply will not hold,
198
- say so and move the text rather than shipping a halo.
199
- - **If the user happens to have a background-free or green version, prefer it** — chroma keying
200
- still beats automatic matting on hair. Use it **only for the alpha** and take the subject's colour
201
- from the original, so no green ever reaches the edges. Verify the pair first: identical duration,
202
- fps, resolution and frame count, subject aligned on the same frame (one frame out makes a ghost).
203
- This is an upgrade for people who already work that way, never a requirement.
204
- - **Supplied cutouts** must have real transparency (ProRes 4444, WebM with alpha, or PNG sequence).
205
- An MP4 cannot hold transparency — if one arrives, stop and tell the user.
206
- - Play transparent video with `<OffthreadVideo transparent src={staticFile(...)} />`.
207
- - Text behind a moving subject gets 0.85–0.95x counter-parallax; static text reads as a sticker.
208
- - Text should animate in while already partly occluded, not appear fully and then get covered.
209
- - Pull text colour toward the footage's black/white points; pure white over graded footage looks
210
- pasted on.
211
-
173
+ ## Compositing: text behind the subject
174
+
175
+ Layer order, bottom to top:
176
+
177
+ ```
178
+ background plate (designed, or the original footage)
179
+ text / graphics <- 1–3px blur to sit on the background's focal plane
180
+ subject cutout <- same clip, frame-aligned
181
+ light wrap <- blurred background screened onto the subject's inner edge, 15–30%
182
+ grain + grade <- applied over everything so layers share one look
183
+ ```
184
+
185
+ - **The cutout must come from the same clip as its background plate**, frame-aligned. Never
186
+ combine a cutout from one take with footage from another.
187
+ - **The matte is built automatically from ordinary footage.** No green screen, and never ask the
188
+ user for one — most people have never shot against green and do not know the term. Segment the
189
+ subject per frame, then **temporally smooth the alpha**, which is not optional: a per-frame matte
190
+ shimmers along the edge, and type sitting against a head is exactly where that shows. Finish with
191
+ spill-free cleanup: ~0.5px choke, 0.5–1px feather.
192
+ - **Quality is worst where it is most visible:** flyaway hair, motion blur, and a hand crossing in
193
+ front of the text. The light wrap below hides a good deal of it. If a shot simply will not hold,
194
+ say so and move the text rather than shipping a halo.
195
+ - **If the user happens to have a background-free or green version, prefer it** — chroma keying
196
+ still beats automatic matting on hair. Use it **only for the alpha** and take the subject's colour
197
+ from the original, so no green ever reaches the edges. Verify the pair first: identical duration,
198
+ fps, resolution and frame count, subject aligned on the same frame (one frame out makes a ghost).
199
+ This is an upgrade for people who already work that way, never a requirement.
200
+ - **Supplied cutouts** must have real transparency (ProRes 4444, WebM with alpha, or PNG sequence).
201
+ An MP4 cannot hold transparency — if one arrives, stop and tell the user.
202
+ - Play transparent video with `<OffthreadVideo transparent src={staticFile(...)} />`.
203
+ - Text behind a moving subject gets 0.85–0.95x counter-parallax; static text reads as a sticker.
204
+ - Text should animate in while already partly occluded, not appear fully and then get covered.
205
+ - Pull text colour toward the footage's black/white points; pure white over graded footage looks
206
+ pasted on.
207
+
212
208
  ---
213
209
 
214
- ## Per-video pipeline
215
-
216
- 1. **Ingest:** probe every clip (fps, resolution, colour, alpha).
217
- - **Phone footage is usually variable frame rate (VFR).** Conform it to constant frame rate
218
- with ffmpeg before use, or it stutters and drifts out of sync in Remotion.
219
- - Conform everything to one fps. Never mix frame rates.
220
- 2. **Spine:** word-level timings + music beats -> `work/<video>/spine.json`.
221
- Cut pauses/filler from word gaps. All animation timing reads from the spine.
222
- - If the user supplies a script or SRT, it is the **text truth** (spelling, names, brand words):
223
- force-align that exact text to the audio with WhisperX's aligner. Never use SRT timings
224
- directly — they are line-level and padded for readability, not word-accurate.
225
- - With no script, transcribe with WhisperX, then show the transcript for correction before building.
226
- 3. **Cutouts:** build the matte from the footage automatically, or validate a supplied cutout (see above). Only needed for shots that want text behind the subject.
227
- 4. **Beat sheet:** from the script and the user's marked punch lines, write a short plan — which
228
- moment gets which treatment — and confirm with the user before building.
229
- - **Read their saved references first** (`editing_os_references`). They are the whole reason
230
- the edit should look like theirs rather than like the defaults, and a plan written without
231
- them is a plan written for anybody. Say which reference each decision came from, so the
232
- user can see their own taste being applied and correct it when it is being misread.
233
- - Where references are silent, the defaults in STYLE.md apply. Where references and defaults
234
- disagree, the reference wins — it is a real preference, and the default is only a sensible
235
- starting point.
236
- 5. **Build** in `src/compositions/<Video>.tsx` from components + helpers + tokens only.
237
- 6. **Verify** (below), then show the user.
238
- 7. **Sound:** the user adds SFX and music themselves. Deliver a cue list (timestamps of every
239
- transition and hit, with suggested whoosh start = `TRANSITION.sfxLeadMs` before the change) so
240
- they can place sounds quickly. Render without music unless asked.
241
- 8. **Render** at `--scale=2`, downscaled to 1080x1920 unless told otherwise.
242
-
210
+ ## Per-video pipeline
211
+
212
+ 1. **Ingest:** probe every clip (fps, resolution, colour, alpha).
213
+ - **Phone footage is usually variable frame rate (VFR).** Conform it to constant frame rate
214
+ with ffmpeg before use, or it stutters and drifts out of sync in Remotion.
215
+ - Conform everything to one fps. Never mix frame rates.
216
+ 2. **Spine:** word-level timings + music beats -> `work/<video>/spine.json`.
217
+ Cut pauses/filler from word gaps. All animation timing reads from the spine.
218
+ - If the user supplies a script or SRT, it is the **text truth** (spelling, names, brand words):
219
+ force-align that exact text to the audio with WhisperX's aligner. Never use SRT timings
220
+ directly — they are line-level and padded for readability, not word-accurate.
221
+ - With no script, transcribe with WhisperX, then show the transcript for correction before building.
222
+ 3. **Cutouts:** build the matte from the footage automatically, or validate a supplied cutout (see above). Only needed for shots that want text behind the subject.
223
+ 4. **Beat sheet:** from the script and the user's marked punch lines, write a short plan — which
224
+ moment gets which treatment — and confirm with the user before building.
225
+ - **Read their saved references first** (`editing_os_references`). They are the whole reason
226
+ the edit should look like theirs rather than like the defaults, and a plan written without
227
+ them is a plan written for anybody. Say which reference each decision came from, so the
228
+ user can see their own taste being applied and correct it when it is being misread.
229
+ - Where references are silent, the defaults in STYLE.md apply. Where references and defaults
230
+ disagree, the reference wins — it is a real preference, and the default is only a sensible
231
+ starting point.
232
+ 5. **Build** in `src/compositions/<Video>.tsx` from components + helpers + tokens only.
233
+ 6. **Verify** (below), then show the user.
234
+ 7. **Sound:** the user adds SFX and music themselves. Deliver a cue list (timestamps of every
235
+ transition and hit, with suggested whoosh start = `TRANSITION.sfxLeadMs` before the change) so
236
+ they can place sounds quickly. Render without music unless asked.
237
+ 8. **Render** at `--scale=2`, downscaled to 1080x1920 unless told otherwise.
238
+
243
239
  ---
244
240
 
245
- ## Audio standard (audio is half the reel — the user will not accept a bad mix)
246
-
247
- What went wrong on an early video: the voice itself was bit-for-bit intact (measured against the source),
248
- but 2.3–3.5s whoosh files and a 2.4s riser kept playing UNDER the speech, which made the voice sound
249
- wrong. Claude cannot hear, so the mix must be engineered and measured, never guessed.
250
-
251
- 1. **The voice is never touched.** Render the picture `--muted`. The voice in every deliverable is the
252
- original recording's audio (stream-copied, or at most one encode), plus only a single gain change.
253
- No limiter, no dynamic normaliser (ffmpeg `loudnorm` single-pass pumps), no repeated AAC encodes.
254
- 2. **Sound effects are short and placed in gaps.** Trim every SFX to what the motion needs (whoosh
255
- 0.4–0.8s, hits 0.3–0.6s) with a 60–120ms fade-out. Nothing longer than ~0.8s may sit under a spoken
256
- word unless it is at least 24 dB under the voice. Risers go in pauses, not under speech.
257
- 3. **Duck SFX under the voice**: mix with ffmpeg `sidechaincompress` keyed from the voice (SFX drop
258
- ~6 dB while a word is spoken), and high-pass whooshes/impacts around 120–150 Hz so they don't muddy it.
259
- 4. **Measure before delivering** (the window scan in the project folder used `f32le` PCM from ffmpeg):
260
- voice-vs-mix difference per 0.5s window — any window where SFX energy is within 12 dB of the
261
- voice while a word is spoken gets fixed. Final: -14 LUFS integrated, true peak <= -1 dBTP, one
262
- AAC encode at 256k.
263
- 5. **Always also deliver stems + a cue sheet**: `voice.wav`, `sfx.wav` (the placed, trimmed SFX bus),
264
- and `SFX-CUES.txt` with numbered, timecoded SFX files — so the user can rebalance in Premiere in
265
- minutes. Picture-only MP4 alongside.
266
- 6. The user picks and judges sounds by ear; Claude says plainly that it cannot hear and asks for
267
- timecoded audio notes on the first draft.
268
-
241
+ ## Audio standard (audio is half the reel — the user will not accept a bad mix)
242
+
243
+ What went wrong on an early video: the voice itself was bit-for-bit intact (measured against the source),
244
+ but 2.3–3.5s whoosh files and a 2.4s riser kept playing UNDER the speech, which made the voice sound
245
+ wrong. Claude cannot hear, so the mix must be engineered and measured, never guessed.
246
+
247
+ 1. **The voice is never touched.** Render the picture `--muted`. The voice in every deliverable is the
248
+ original recording's audio (stream-copied, or at most one encode), plus only a single gain change.
249
+ No limiter, no dynamic normaliser (ffmpeg `loudnorm` single-pass pumps), no repeated AAC encodes.
250
+ 2. **Sound effects are short and placed in gaps.** Trim every SFX to what the motion needs (whoosh
251
+ 0.4–0.8s, hits 0.3–0.6s) with a 60–120ms fade-out. Nothing longer than ~0.8s may sit under a spoken
252
+ word unless it is at least 24 dB under the voice. Risers go in pauses, not under speech.
253
+ 3. **Duck SFX under the voice**: mix with ffmpeg `sidechaincompress` keyed from the voice (SFX drop
254
+ ~6 dB while a word is spoken), and high-pass whooshes/impacts around 120–150 Hz so they don't muddy it.
255
+ 4. **Measure before delivering** (the window scan in the project folder used `f32le` PCM from ffmpeg):
256
+ voice-vs-mix difference per 0.5s window — any window where SFX energy is within 12 dB of the
257
+ voice while a word is spoken gets fixed. Final: -14 LUFS integrated, true peak <= -1 dBTP, one
258
+ AAC encode at 256k.
259
+ 5. **Always also deliver stems + a cue sheet**: `voice.wav`, `sfx.wav` (the placed, trimmed SFX bus),
260
+ and `SFX-CUES.txt` with numbered, timecoded SFX files — so the user can rebalance in Premiere in
261
+ minutes. Picture-only MP4 alongside.
262
+ 6. The user picks and judges sounds by ear; Claude says plainly that it cannot hear and asks for
263
+ timecoded audio notes on the first draft.
264
+
269
265
  ---
270
266
 
271
- ## Verification (required before saying anything is done)
272
-
273
- Claude cannot watch video. Quality is checked with frames and maths, and the user makes the
274
- final call at playback speed. Be explicit about that when reporting.
275
-
276
- 1. `npm run check` passes.
277
- 2. `npm run motion-check -- <Comp> --scale=2` reports **no POP, CUT or STUTTER**. Allow intentional
278
- cuts with `--allow=<frame>`. For each FAST warning, render that frame and confirm the moving
279
- edge is blurred. Read the motion timeline for dead air and rhythm.
280
- 3. Render stills and **look at them**: first frame, each element mid-entrance, peak-speed frames
281
- (blur visible), fully settled (crisp), mid-exit, and the **last frame** (clean).
282
- 4. Check: no text collides with the subject's face, safe zones respected, contrast holds,
283
- no clipped descenders (g, p, y, commas) in masked text.
284
- 5. Report what was verified and what still needs the user's eyes at full speed.
285
-
267
+ ## Verification (required before saying anything is done)
268
+
269
+ Claude cannot watch video. Quality is checked with frames and maths, and the user makes the
270
+ final call at playback speed. Be explicit about that when reporting.
271
+
272
+ 1. `npm run check` passes.
273
+ 2. `npm run motion-check -- <Comp> --scale=2` reports **no POP, CUT or STUTTER**. Allow intentional
274
+ cuts with `--allow=<frame>`. For each FAST warning, render that frame and confirm the moving
275
+ edge is blurred. Read the motion timeline for dead air and rhythm.
276
+ 3. Render stills and **look at them**: first frame, each element mid-entrance, peak-speed frames
277
+ (blur visible), fully settled (crisp), mid-exit, and the **last frame** (clean).
278
+ 4. Check: no text collides with the subject's face, safe zones respected, contrast holds,
279
+ no clipped descenders (g, p, y, commas) in masked text.
280
+ 5. Report what was verified and what still needs the user's eyes at full speed.
281
+
286
282
  ---
287
283
 
288
- ## Remotion gotchas
289
-
290
- - Never use CSS `transition`/`animation` — drive everything from `useCurrentFrame()`.
291
- - Never use `Math.random()` — use `random(seed)` from `remotion`.
292
- - Never use `will-change` (render-tab flicker, see Smoothness system).
293
- - **`<Presence>` owns its element's `transform` and `opacity`.** Any extra transform (centring with
294
- `translateX(-50%)`) or opacity (fading content) passed in `style` is silently overwritten — put it
295
- on an inner wrapper. This bug appeared twice in the first project (off-centre tag, labels that
296
- never faded).
297
- - em-based spacing (gaps, padding) resolves against the element's own font-size: set `fontSize`
298
- on the container, or word gaps collapse.
299
- - Masked text needs travel > 100% and container padding, or descenders stay visible.
300
- - Load fonts through `@remotion/fonts` (brand your display typeface is local in `assets/fonts/`) so renders wait for them.
301
-
284
+ ## Remotion gotchas
285
+
286
+ - Never use CSS `transition`/`animation` — drive everything from `useCurrentFrame()`.
287
+ - Never use `Math.random()` — use `random(seed)` from `remotion`.
288
+ - Never use `will-change` (render-tab flicker, see Smoothness system).
289
+ - **`<Presence>` owns its element's `transform` and `opacity`.** Any extra transform (centring with
290
+ `translateX(-50%)`) or opacity (fading content) passed in `style` is silently overwritten — put it
291
+ on an inner wrapper. This bug appeared twice in the first project (off-centre tag, labels that
292
+ never faded).
293
+ - em-based spacing (gaps, padding) resolves against the element's own font-size: set `fontSize`
294
+ on the container, or word gaps collapse.
295
+ - Masked text needs travel > 100% and container padding, or descenders stay visible.
296
+ - Load fonts through `@remotion/fonts` (brand your display typeface is local in `assets/fonts/`) so renders wait for them.
297
+
302
298
  ---
303
299
 
304
- ## Feedback format from the user
305
-
306
- Notes arrive as timecode + specific issue ("0:14 title lands 3 frames late, bounce too strong").
307
- Translate each note into token or timing changes; if a note conflicts with a law, say so and ask.
308
-
300
+ ## Feedback format from the user
301
+
302
+ Notes arrive as timecode + specific issue ("0:14 title lands 3 frames late, bounce too strong").
303
+ Translate each note into token or timing changes; if a note conflicts with a law, say so and ask.
304
+
309
305
  ---
310
306
 
311
307
  ## What is already installed