REMOTION STARTER KIT FOR CLAUDE
Motion graphics and explainer videos made with code, by Claude.
Written November 2026. The setup and helper code were tested with Remotion 4.0.535 on Windows 11.
Everything here came from real videos: the rules, the craft numbers, and the traps that each cost a render.

=====================================================================================================
FOR THE HUMAN (read this part, then give the whole file to Claude)
=====================================================================================================

What you need
- Node.js 20 or newer (the LTS from nodejs.org).
- Claude Code (desktop app or terminal).
- About 600 MB of disk for one project (Remotion's packages plus its own headless Chrome).
- Optional, recommended: a full FFmpeg on your PATH, used for CHECKING videos (black frames, loudness, contact
  sheets). Windows: winget install Gyan.FFmpeg. Mac: brew install ffmpeg. Remotion carries its own small FFmpeg
  for rendering, so rendering works without it.
- Licence: Remotion is free for individuals and for companies of up to 3 people. Bigger companies need a paid
  company licence (see remotion.pro). Check which one fits you before you use it for client work.

How to start
1. Make an EMPTY folder with a SHORT path, for example C:\videos\remotion (on Windows a deep folder path breaks
   rendering, see Part H, trap 1).
2. Put this file in it.
3. Open Claude Code in that folder and send:
     Read REMOTION_STARTER_FOR_CLAUDE.txt completely. Do PART A (setup), then fill MY SETUP with me.
     From now on follow KNOWLEDGE.md for every video.
4. Answer Claude's MY SETUP questions (your fps, sizes, editor, fonts, colours).

You do not need any other file. Things that help if you have them: your fonts (.ttf / .woff2), your logo as an
SVG, music / voice files, and a few stills of videos whose look you like (Claude can look at pictures).

Tips for working with it
- Ask for STILLS first ("show me 6 stills of the key moments"), video only after you like the stills. Stills
  take seconds, a full render takes minutes, and changes are cheap at the still stage.
- Say what you dislike in plain words ("too bouncy", "text leaves too fast", "too busy behind the title").
  Claude writes it into KNOWLEDGE.md so the next video already knows. That file growing is the whole trick.
- Give it the exact words for every title, name and link. It must never invent them.


=====================================================================================================
PART A. SETUP (Claude: do these steps in order, report each result)
=====================================================================================================

A1. Check the tools: `node -v` (must be 20 or newer). Check the folder path is short (under ~60 characters).

A2. Create the project in this folder (do not use a template; the files below are all that is needed):
      npm init -y
      npm install --save-exact remotion @remotion/cli @remotion/renderer @remotion/bundler @remotion/media @remotion/transitions @remotion/paths @remotion/zod-types zod react react-dom
      npm install --save-exact --save-dev typescript @types/react
    Then edit package.json: keep "private": true, remove "type" and "main" if npm added them, and set
      "scripts": { "studio": "remotion studio src/index.ts", "typecheck": "tsc -p ." }
    RULE: every `remotion` and `@remotion/*` package must be on the SAME exact version. Mixing versions breaks
    things. To upgrade later, use `npx remotion upgrade` (moves them together), never one package alone.
    Add more @remotion packages only when a video needs them, always with --save-exact and the same version.

A3. Download Remotion's own headless Chrome once (~270 MB, goes into node_modules/.remotion):
      npx remotion browser ensure

A4. Create these files with the exact content from PART I:
      tsconfig.json, src/index.ts, src/Root.tsx, src/TitleCard.tsx, src/voice.ts,
      render.mjs, stills.mjs, temp_clean.mjs
    and the empty folders public/ (assets: fonts, pictures, audio) and out/ (renders).

A5. Smoke test (all must pass):
      npm run typecheck                                    -> prints nothing
      node render.mjs TitleCard out/f45.png --still 45     -> a PNG; open it and LOOK at it
      node render.mjs TitleCard out/tc.mp4                 -> a 4 s mp4, ffprobe line shows 1920x1080, 30/1, 4.0 s
      node stills.mjs TitleCard out/st 0.3 1.0 3.55        -> three PNGs
    If a render fails with "spawn ... chrome-headless-shell.exe ENOENT", the folder path is too long (Part H, 1).

A6. Write the knowledge into the project:
    - KNOWLEDGE.md = Parts B to H of this file, copied as they are. It is a LIVING file: add lessons to it.
    - CLAUDE.md = the text in A7 below (Claude Code loads it in every chat in this folder).

A7. CLAUDE.md for the project (fill the MY SETUP lines WITH the human, ask, do not guess):

    # Remotion videos
    - Before writing or changing any composition, read KNOWLEDGE.md (rules, craft, routine, traps).
    - Render with render.mjs. Before showing anything, render stills with stills.mjs and LOOK at them.
    - Never invent words, names, links, numbers or claims for a video. They come from me.
    - Each delivered version is kept (v1, v2, ...). Never overwrite a file my editor may link to.
    - A lesson (a trap, a fix, something I liked or disliked and why) goes into KNOWLEDGE.md THE MOMENT it is
      learned, one or two lines in the right part, with the reason. Not at the end of the session.
    ## MY SETUP
    - Frame rate: __ fps (30 is the common choice for screen and explainer videos)
    - Long-form timeline size: __ (1920x1080 / 2560x1440 / 3840x2160). Designs stay in 1920x1080 units and render
      with --1440 or --4k to match.
    - Vertical Shorts / Reels: yes / no (1080x1920, a SEPARATE composition, never a crop)
    - Editor: __ (CapCut / Premiere / Resolve / Final Cut / none)
    - Transparent overlays wanted: yes / no (full-frame by default; alpha only when asked)
    - Fonts: titles __, text __ (files in public/fonts)
    - Colours: background __, accent __, text __
    - Where finished videos go: __
    - Taste notes: (filled in as we go: what I liked, what I rejected)


=====================================================================================================
PART B. THE RULES OF REMOTION (code that renders right)
=====================================================================================================

The idea: a video is a React component. Every value is a function of the frame number (`useCurrentFrame()`),
so any frame can be rendered on its own, in any order, on many threads. Anything that is not a function of the
frame (CSS animations, timers, the clock, random numbers, network calls) breaks the render.

B1. Animation
- Every animation comes from `useCurrentFrame()` + `interpolate()` / `spring()`.
- NO CSS transitions, NO CSS @keyframes animations, NO Tailwind `animate-*`. They do not render.
- `interpolate` ALWAYS clamped: `{ extrapolateLeft: "clamp", extrapolateRight: "clamp" }`, or the value keeps
  going past the range. An easing array has (number of points - 1) items.
- The input range must be strictly increasing: a 0-length ramp (a == b) THROWS. Guard `fade > 0`.
- `Math.random()` is forbidden: use `random("some-seed")` from remotion (same value on every render).
- Write all timings in SECONDS (`t = frame / fps`) so a piece can render at another fps.
- Prefer the separate CSS properties `scale`, `translate`, `rotate` over one long `transform` string.
- A spring drives TRANSFORMS only (position, scale). Opacity gets its own clamped ramp, because a spring can
  overshoot past 1.

B2. Time and sequencing
- `<Sequence from={30} durationInFrames={90} premountFor={fps} name="Lower third">`: inside it,
  `useCurrentFrame()` starts at 0 when the Sequence starts. Always set `premountFor` (loads media a second early,
  avoids a flash). Order of operations: from -> trimBefore -> durationInFrames -> playbackRate -> loop.
- `<Series>` + `<Series.Sequence durationInFrames offset={-10}>`: scenes back to back; a negative offset overlaps.
  Never set `from` inside a Series.
- `<Loop durationInFrames={45} times={4}>`, `<Sequence freeze={n}>` to hold a frame.
- Transitions (`@remotion/transitions`):
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={90}><A /></TransitionSeries.Sequence>
      <TransitionSeries.Transition presentation={slide({ direction: "from-right" })}
        timing={springTiming({ config: { damping: 200 }, durationInFrames: 20 })} />
      <TransitionSeries.Sequence durationInFrames={90}><B /></TransitionSeries.Sequence>
    </TransitionSeries>
  TOTAL LENGTH = sum(sequences) - sum(transitions) (90 + 90 with a 20-frame transition = 160). A transition may
  not be longer than its neighbours. Presentations: fade, slide, wipe, flip, clockWipe, iris, none; a custom one
  is a component that gets `presentationDirection` ("entering" / "exiting") and `presentationProgress` (0..1).
  Some newer transitions draw through HTML-in-canvas: they render fine but need a Chrome flag to PREVIEW in the
  Studio (the docs say which).
- One component and one file per scene; chain scenes with Series / TransitionSeries.

B3. One template, many videos (props)
- A zod schema on the Composition = an edit form in the Studio's right panel + checked `--props` on the CLI.
  Top level must be `z.object()`. `@remotion/zod-types` adds `zColor()` (a colour picker), `zTextarea()`.
- `defaultProps` inline and JSON-serializable.
- `calculateMetadata` = duration / size from the props or from data (async allowed):
    const calc: CalculateMetadataFunction<Props> = async ({ props }) => ({
      durationInFrames: props.steps.length * 90,
    });
    <Composition ... calculateMetadata={calc} />
  It can also return defaultCodec / defaultPixelFormat / defaultOutName. This is how one composition makes a
  video per data file (read a JSON, count the items, set the length).
- CLI: `--props=file.json` is the safe way on Windows (inline JSON quoting through cmd is fragile; render.mjs
  runs without a shell, so inline JSON works there too).

B4. Text and fonts
- Fonts must be loaded BEFORE the first frame renders, or frame 0 shows a fallback font:
    `npm i --save-exact @remotion/fonts` (same version as remotion), then in a file imported once by Root.tsx:
      import { loadFont } from "@remotion/fonts";
      import { staticFile } from "remotion";
      loadFont({ family: "Title", url: staticFile("fonts/Title-ExtraBold.ttf"), weight: "800" });
    Without the package: `new FontFace(...)`, `await face.load()`, `document.fonts.add(face)` inside a
    `delayRender()` / `continueRender()` pair. Google Fonts: `@remotion/google-fonts/<Name>` with
    `loadFont("normal", { weights: ["400", "700"], subsets: ["latin"] })` (always pass weights + subsets).
- Load all fonts in ONE shared module, imported once, not per composition.
- Measure text instead of guessing: `@remotion/layout-utils` (`fitText`, `measureText`, `fitTextOnNLines`), or
  `canvas.measureText` after the fonts are loaded. DOM measurements: divide `getBoundingClientRect()` by
  `useCurrentScale()`.
- Useful packages: `@remotion/rounded-text-box` (TikTok-style caption boxes), `@remotion/rough-notation`
  (hand-drawn circle / box / underline driven by a 0..1 progress, great for "look here").

B5. Media
- Use `<Audio>` / `<Video>` from `@remotion/media` (frame-exact). Props: `src`, `trimBefore`, `durationInFrames`,
  `volume` (a number or `(f) => number`, f counted from the media start; never negative), `playbackRate` (changes
  pitch), `loop`, `muted`, `objectFit` (as a PROP, not inside `style`). The last frame stays after a video ends.
    <Audio src={staticFile("music.mp3")} trimBefore={2 * fps}
      volume={(f) => interpolate(f, [0, fps], [0, 0.6], { extrapolateRight: "clamp" })} />
- Pictures: `<Img>` from remotion, not `<img>` (it waits for the load). GIFs: `<AnimatedImage>` or `@remotion/gif`.
- Everything in `public/`, referenced with `staticFile("x.png")`. Never a network URL inside a composition.
- Transparent video overlays (a cut-out character): a VP9 .webm with alpha, played with `transparent`.

B6. Debug
- `npm run studio` = live preview with a scrubber, the props form, and the composition list.
- Every `delayRender()` needs a `continueRender()` or `cancelRender()`, or the render times out (30 s).
- `--log=verbose` lists slow frames.
- Docs as raw markdown (cheap to read): append `.md` to any remotion.dev docs URL,
  e.g. https://www.remotion.dev/docs/transitions.md
- Remotion publishes official agent rules (github.com/remotion-dev/skills). Their essentials are already in this
  part; installing them is optional.

B7. Write it ready for Remotion 5 (not released yet): `<Audio>` / `<Video>` from `@remotion/media`;
`trimBefore` + `durationInFrames` (not the old startFrom / endAt); `premountFor` set yourself; no `layout="none"`
on TransitionSeries; clamp the length you give `getPointAtLength()` (v5 returns null past the path end).


=====================================================================================================
PART C. MOTION CRAFT (timing, easing, sizes, what looks professional)
=====================================================================================================

The short version (read this if nothing else)
 1. Entrances ease OUT, exits ease IN, moves ease IN-OUT. Linear only for mechanical drift.
 2. Exits are faster than entrances (about 60-70 % of the entrance time).
 3. Smooth beats bouncy. Overshoot is ONE playful beat per piece (a logo landing), never the default.
 4. Vary eases and speeds inside a piece; the slowest beat ~3x the fastest; first motion 0.1-0.3 s after t = 0.
 5. Order of appearance = order of importance. A stagger group lasts under ~0.4-0.5 s in total.
 6. Text holds long enough to read TWICE: max(1.5 s, words x 0.35 s) after it lands.
 7. Phone-readable sizes (1920x1080 design units): labels >= 40 px (48 better), key text 64-80 px, titles
    96-160 px.
 8. Inside the graphics-safe box (96 px from the sides, 54 px from top / bottom) and out of the bottom 12-15 %
    (player controls, captions).
 9. One thing moves at a time where the viewer must read. Stillness after motion is a tool.
10. LOOK at frames before calling it done. Numbers do not see ugly.

C1. Timing at 30 fps (1 frame = 33 ms). Judgement values, adjust by eye:
    small entrance (label, chip)   350-500 ms   11-15 frames
    hero entrance (title, card)    600-900 ms   18-27 frames
    exit                           250-400 ms    8-12 frames
    emphasis pulse                 300-500 ms    9-15 frames
    scene transition               300-600 ms    9-18 frames
    a line / wire drawing itself   400-800 ms   12-24 frames
    background dim                 400-700 ms   12-21 frames
  Speed = weight: 0.15-0.3 s energetic, 0.3-0.5 s professional, 0.5-0.8 s premium, 0.8-2 s cinematic.
  Reading: ~4 words per second silent; subtitles max ~20 characters per second, ~42 characters per line.
  Lower third: in ~0.5 s, hold ~3 s, out ~0.35 s.
  Stagger: words 80-120 ms, list items 50-80 ms, cards 100-150 ms.
  Intros: the hook first; a brand sting of 5 s or less (long intros lose viewers).

C2. Easing
- GSAP names in Remotion (measured: with this map the two tools match to the pixel):
    power1 = Easing.quad, power2 = Easing.cubic, power3 = Easing.poly(4), power4 = Easing.poly(5),
    expo = Easing.exp, sine = Easing.sin, any CSS bezier = Easing.bezier(x1, y1, x2, y2).
    Wrap them: Easing.out(...) for entrances, Easing.in(...) for exits, Easing.inOut(...) for moves.
- Good defaults: entrance Easing.out(Easing.poly(4)); secondary Easing.out(Easing.cubic); loops / ambient
  Easing.inOut(Easing.sin); dramatic Easing.out(Easing.exp).
- Material Design curves: entrance bezier(0, 0, 0, 1), exit bezier(0.3, 0, 1, 1), move bezier(0.2, 0, 0, 1).
- SPRINGS: think in DAMPING RATIO = damping / (2 x sqrt(stiffness x mass)).
    1.0   no overshoot        the premium settle
    0.9   0.15 %              invisible
    0.8   1.5 %               "alive", phone-UI feel
    0.7   4.6 %               subtle, still premium
    0.5   16 %                playful = REMOTION'S DEFAULT spring (mass 1, stiffness 100, damping 10)
    <=0.4 25 %+               cheap / cartoon
  So the default spring is BOUNCY. No overshoot: `config: { damping: 200 }` (pin it with durationInFrames).
  About 4 % alive: `{ damping: 20, stiffness: 200 }`.

C3. Composition and type
- Text 60-80 % of the width for a hero line; max 2 lines for a title; three layers (background treatment,
  content, accents); anchor things to edges; every connector line joins two real things.
- Strong weight contrast in video (300 vs 800-900, not 400 vs 700); display tracking -0.03 to -0.05 em; on dark
  backgrounds body text a bit lighter in weight and +0.05-0.1 line-height. Wide bold fonts may need
  letter-spacing >= 0.06 em in capitals or letters touch.
- Contrast: 4.5:1 for normal text, 3:1 for large (WCAG). Never pure #000 / #fff; near-black and off-white.
- Video compression (4:2:0 chroma) fringes thin saturated lines: coloured strokes >= 4 px; colour as accent,
  white for text.
- Smooth backdrops behind text and characters. Busy, grainy or very textured backgrounds fight the title; light
  backgrounds kill white or light-coloured titles.
- A 2-4 % film grain on near-black hides banding after YouTube compression.
- Things that look like an AI template (avoid unless chosen): gradient text, cyan / purple neon, identical card
  grids, everything centred, every element fading in from y + 30, a dead flat background, 3D tilted cards.
- Animate text by word or by line, never letter by letter on body text. Finish moving before the read begins.

C4. What made pieces look PROFESSIONAL (lessons from rejected first drafts)
- Pictures TRAVEL, they never pop: an element on screen in two scenes moves from its place in one to its place in
  the next (interpolate the rect, in-out, 0.6-0.8 s). Shrinking to a centre card and fading out, then fading
  other things in, makes every scene change a cut through an empty frame.
- Slots exist before they fill: put every card where it will end from the first beat (dimmed, or as a faint
  outline) and light each one on its word. Cards appearing one by one from the left keep the frame lopsided.
- Vary the entrances: labels wipe in left to right (`clip-path: inset()`), tiles slide from their side, the hero
  travels, a check pops (the one playful beat). Fade + rise on everything is the template look.
- Accents ON the key words of the voice beat continuous ambient motion (breathing, floating) everywhere.
- Never a label ON the hero picture; never a title under a moving card: size the hero so it ends above the label
  and start the title after the camera settles.
- A number appears on its word: a "0" shown before the voice says "nine" reads as a bug.
- Flat cards by default. 3D tilt and heavy glow only when asked.

C5. Explaining diagrams and screens
- Lines / wires draw on in 0.6-1 s per hop; a light flash travelling along a line = 10-20 % of its length.
  `evolvePath(progress, d)` from `@remotion/paths` gives strokeDasharray / strokeDashoffset; a dot along it =
  `getPointAtLength(d, k * getLength(d))`. A glow that should pass BEHIND boxes needs the boxes masked out of it.
- Highlight + dim: everything else to 30-40 % opacity over 250-400 ms; restore the same way.
- Push-in on a region: 1.15-1.6x over 600-900 ms. Few, long zooms. For tutorials a STILL camera is easier to
  follow than constant zooming.
- Stagger in reading order (left to right, top to bottom); one focal point at a time.
- Narration sets the timing: cut visual beats to the voice.

C6. Polish
- Motion blur only on big fast moves (zooms, wipes, whip pans). `@remotion/motion-blur` exists.
- Consistent direction: what slides in from the left leaves to the left.
- Overlap: start the next item before the previous one fully settles.
- Never more than 3 flashes per second (accessibility).
- Sound lands on the hit frame or 1-2 frames LATE, never early (audio ahead of picture by > ~45 ms is noticed).

C7. Shorts / Reels (vertical 1080x1920)
- A SEPARATE composition, designed vertical. Never a crop of the wide piece.
- Safe zone (creator-tool measurements, not an official spec): keep text 288 px from the top, 672 px (35 %) from
  the bottom, 48 px from the left, 192 px from the right (the buttons rail). Must-survive content in the centre
  ~1080x1350. A landscape-style lower third does NOT work: the bottom third is the title / channel area.
- Feed viewing is small: body text >= 32-40 px, headlines >= 90 px.
- Word-by-word captions: pages of ~18 characters broken at sentence ends and pauses, the spoken word in the accent
  colour, a thick dark stroke (`WebkitTextStroke` or `paintOrder: "stroke fill"` with a 10-12 px stroke), around
  y 1250. `@remotion/captions` has `createTikTokStyleCaptions()` for the paging.
- Real screens in a Short: a whole desktop page shrunk to 1080 wide makes its text ~20 px = unreadable. Cut TIGHT
  crops of the part that matters and show each at full width.


=====================================================================================================
PART D. THE ROUTINE FOR EVERY VIDEO
=====================================================================================================

D1. Before building: what it is for, where it goes (editor timeline, YouTube, Short), the length, the EXACT
    words, the voice or music if any, and what to show. Missing words: ask, never invent.
D2. Storyboard first: a beat list (time, what is on screen, what is said) and 4-8 stills of the key moments. Get
    an OK. Changing a still is cheap; changing a rendered video is not.
D3. Build:
    - One composition per piece (listed in Root.tsx), one file per scene.
    - All beat times in ONE table at the top of the composition (`const T = { titleIn: 0.4, ... }`, seconds), or
      from the voice's word times (Part E).
    - Entrances start ~0.25-0.3 s BEFORE their word so they LAND on it.
    - Design in 1920x1080 units; render bigger with --1440 / --4k (text and SVG stay sharp).
D4. Look (the step that catches most mistakes):
    - Stills at: the first frame, every beat landed, every SCENE CHANGE (not just the middles of scenes),
      mid-exit, the last frame. `node stills.mjs <Id> out/look 0.5 1.2 3.0 ...`
    - LOOK at every still. For small text, thin lines and boxes around things, look at a FULL-SIZE crop, not a
      contact sheet (a sheet is too small to see a box one line off).
    - Check: readable, inside the safe area, nothing overlapping, nothing cut at an edge, no lone word on its own
      line, no empty frame between scenes, nothing showing that should already be gone.
    - Fix and look again. Only then render the video.
D5. Render, then check the file (Part G): size, fps, length, black frames, loudness.
D6. Deliver: one folder per piece. `Final/` holds only the finished video(s); `Work/` holds stills, drafts,
    assets; a short README.txt at the top (what it is, size, fps, length, composition id, the exact render
    command). A new version is v2, v3 ... never an overwrite.
D7. Write down what was learned (KNOWLEDGE.md, the right part, with the reason) right away.
D8. First draft fast, then iterate on taste. The human's taste overrides every number in this file.


=====================================================================================================
PART E. VOICEOVER, MUSIC AND SOUND
=====================================================================================================

E1. Times come from the voice, never typed by hand
- A generated voice: use a TTS that returns WORD TIMESTAMPS (Cartesia and ElevenLabs both can). Save them as
  words.json next to the audio.
- A recorded voice: forced alignment when you have the script, or Whisper word timestamps (Remotion has
  `@remotion/install-whisper-cpp`, 16 kHz WAV in). If the speaker pauses between phrases, a simple loudness gap
  finder (10 ms windows, gaps >= 120 ms) already gives every phrase start.
- Look scenes up by phrase: `at("press run")`, `at("a", 3)` (src/voice.ts in Part I). A missing phrase THROWS,
  so a changed script fails the render instead of drifting. COUNT the nth: small words ("a", "one", "and") appear
  many times, and a phrase can hide inside an earlier sentence ("with your prompt" inside "once with your
  prompt"). A still at each scene change catches a wrong nth at once.
- Claude cannot hear audio: send every new voice take to the human for a listen BEFORE building on it.
- TTS pause tags ADD to the voice's own pause: keep them short (~200 ms where the screen acts, ~300 ms before a
  new idea, ~500 ms between chapters). Longer ones sound unnatural.

E2. Sync rules
- The thing is on screen WHEN it is named, never after. Move before the word; click / mark ON the word.
- When the voice names a value, point at it while it is said, and nothing moves under a mark.
- An enumeration shows each item on its word and keeps them until the list ends.
- No silent waits: a wait with nothing to learn is sped up (2x, 3x, 4x... round numbers, a speed chip only from
  2x) or cut; the voice never waits for the screen. Check: `silencedetect=noise=-40dB:d=1.2` (Part G).
- A NEW voice take for a finished piece: keep the piece in the OLD take's seconds and render with
  t = toOld(frame / fps), a piecewise-linear map between matching phrase starts of the two takes. Every action
  stays on its word.
- ONE re-recorded sentence in the middle: put everything after it in `<Sequence from={SHIFT}>` so clips, sounds
  and marks all move together. A time map alone leaves Sequence-placed clips at their old frames (blank boxes).

E3. Loudness and mixing
- YouTube plays at about -14 LUFS integrated: bring the FINAL file there with a two-pass loudnorm, as the last
  step. Measure with `ebur128` (Part G).
- A MONO voice file can come out +3 dB louder through one Audio component than through another (both channels at
  full level). Parts of ONE video use the same component; measure each new part against an old one.
- Music, if any, ducks under the voice.

E4. Sound effects
- A LONG sound (whoosh, riser, impact tail, anything over ~0.25 s) under speech is heard as a VOICE FAULT, even
  20 dB down. Long sounds only in a REAL pause; no pause = no sound.
- Clicks may land on a word, but >= 12 dB under that word's peak (sentence-end words are quiet: leave more room).
- Few of them: one per real click; nothing on every pop, mark and caption.
- `@remotion/sfx` has a set of normalised basic effects.

E5. Clips with their own sound
- Crossfading two clips: the incoming clip's sound must be at full level when the old one fades. Trim the first
  ~0.3 s of every clip after the first and crossfade picture and sound over the SAME window, or every cut gets a
  near-silent hole.
- AI video clips: their ambience under narration sounds like microphone noise: mute it under the voice, keep it
  only for a featured sound in a pause. A clip whose music stops dead at its end: ring it out with a short reverb
  tail of its last second instead of silence.


=====================================================================================================
PART F. SHOWING REAL SCREENS (app demos, tutorials, websites)
=====================================================================================================

F1. Real beats fake. Use real captures of the real app; redraw UI only when it cannot be captured.
F2. Capture STATES as screenshots at a high device scale factor, not as a video:
    a 1920x1080 viewport at deviceScaleFactor 3 (Puppeteer / Playwright `deviceScaleFactor: 3`, or the Chrome
    DevTools Protocol `Emulation.setDeviceMetricsOverride`) = a 5760x3240 PNG, sharp up to ~2.5x zoom in a 1440p
    render. The override lives only as long as that connection: set it and capture in the SAME session.
    Moving things (drags, a progress bar) can be a real screen recording or a burst of screenshots.
F3. Never enlarge a capture more than ~1.1x past its own pixels: a close-up needs its OWN, higher-resolution
    capture of that region. Enlarged crops look soft and show artefacts.
F4. Clean the screen before capturing: close promos and cookie banners, hide account names, chat lists,
    location lines and other private details, hide other extensions' bars, park the mouse on empty space (hover
    icons), and measure positions AFTER hiding things (the layout can shift). Dark mode everywhere if the video is
    dark: no white flash between screens.
F5. Typing effect: the empty-field capture underneath, the filled capture on top seen through one
    `overflow: hidden` window per line, revealed left to right, a caret at the edge. Take the line breaks from the
    real filled capture, never from a guess. The mask width = the MEASURED typed text width (a guessed width left
    the last letter showing). Typing in step with the voice reads better than typing fast and then highlighting.
F6. Camera: one wrapper transform (translate + scale) around the screen layer, zoom interpolated in LOG space;
    the cursor and click ripples drawn in frame space so they keep one size. For tutorials prefer a STILL,
    full-screen camera: constant zoom in / out is hard to follow.
F7. Cursor: eased between key points, resting on the focus, never wiggling to "talk". A cursor ON a button label
    hides it: park it just right of the text.
F8. Marks (boxes, circles, highlights, arrows):
    - The mark fits the thing: a dot = a small circle, a block = a rounded rectangle its size, one line of text =
      a highlighter bar, a group = ONE shape around all of it.
    - MEASURED on the real element (its rect from the page or the pixels), never placed by eye.
    - Edges stay >= 8 px clear of any text; when two lines are too close for an edge between them, take both in.
    - Marks never overlap or touch each other, in space or in time.
    - A mark the viewer must READ stays >= 2.5 s. A mark never outlives its screen, a cut or a scroll.
    - Nothing important in the bottom band (captions, subtitles, player controls), the bottom right above all.
    - After the render, look at a full-size crop of EVERY mark, not only new kinds.
F9. Step-by-step tutorials: one real screen per action. "Click X" shows X marked BEFORE the click. "Type X" shows
    the EMPTY box first. Never show a step on a screen that already holds its result. Do every step for real in
    the app first and capture each state as it really is (do not storyboard a screen you have not seen).
F10. Recreating UI (when a capture is impossible): copy the page's COMPUTED styles (font, size, weight, colour)
    from the live page instead of fitting by eye; for phone layouts emulate a phone viewport and copy the real
    mobile layout, never a shrunk desktop. `backdrop-filter` blur may not render: use solid sampled colours.


=====================================================================================================
PART G. RENDERING, CHECKING, FINISHING
=====================================================================================================

G1. render.mjs (Part I) does the common cases:
      node render.mjs <Id>                                  out/<Id>.mp4
      node render.mjs <Id> out/f.png --still 90              one frame
      node render.mjs <Id> out/x.mp4 --1440                  1920x1080 design rendered at exactly 2560x1440
      node render.mjs <Id> out/x.mp4 --4k                    3840x2160
      node render.mjs <Id> out/x.mov --transparent           ProRes 4444 with alpha (big; what editors import)
      node render.mjs <Id> out/x.webm --transparent          VP9 with alpha (tiny; fewer editors keep the alpha)
      node render.mjs <Id> out/x.mp4 --props file.json       other data, same template
      node render.mjs <Id> out/x.mp4 --frames 120-179        only that stretch (a quick patch or a test)
    A `.wav` output renders the sound only, no frames drawn (fast, for checking a mix).

G2. Transparent output: the composition must paint NO background; frames must be PNG (JPEG has no alpha).
    Check it: a corner pixel's alpha = 0, the panel's alpha as designed. A VP9 alpha .webm must be decoded with
    `-c:v libvpx-vp9` BEFORE `-i`, or the alpha is ignored. Full-frame is the default; make alpha only when asked.

G3. Every .mp4 gets `--color-space=bt709 --gop=60` (render.mjs adds them): standard colour, and a keyframe every
    2 s. Parts rendered alike can then be JOINED without re-encoding (`ffmpeg -f concat -safe 0 -i list.txt
    -c copy out.mp4`, every part the same size, fps, codec and audio format), and a small fix can be re-rendered
    for just a few seconds. A part with different settings (an outro from elsewhere) needs one re-encode with the
    concat FILTER, normalising size, fps, pixel format and audio sample rate.

G4. Speed: `--concurrency` (a number or "50%"; `npx remotion benchmark` finds the best), JPEG frames are the
    fastest (PNG only for alpha), VP9 encodes are slow, `--gl=angle` uses the GPU for WebGL / heavy blur / effects
    (very long renders: split them). `--hardware-acceleration=if-possible` can use the GPU encoder for H.264 on
    some setups (then use `--video-bitrate`, not `--crf`). Reuse ONE bundle for many renders (stills.mjs does).
    Rough numbers (fast desktop PC): a 10 s 1080p piece ~10-20 s; a still ~2-5 s; 1 min at 1440p ~1 min.

G5. Checks (need a full FFmpeg for the filters; Remotion's bundled FFmpeg is a minimal build without `fps`,
    `tile` and some others, so use the system one for tooling):
      size / fps / length:  ffprobe -v error -show_entries stream=width,height,r_frame_rate:format=duration -of compact x.mp4
      black frames:         ffmpeg -i x.mp4 -vf blackdetect=d=0.03:pix_th=0.06 -an -f null -
      loudness:             ffmpeg -i x.mp4 -af ebur128=peak=true -f null -          (the "I:" line = LUFS)
      silent holes:         ffmpeg -i x.mp4 -af silencedetect=noise=-40dB:d=1.2 -f null -
      contact sheet:        ffmpeg -i x.mp4 -vf "fps=1,scale=480:-1,tile=6x4" -frames:v 1 sheet.png
      one frame:            ffmpeg -ss 12.5 -i x.mp4 -frames:v 1 f.png
      final loudness:       ffmpeg -i in.mp4 -af loudnorm=I=-14:TP=-1:LRA=11 -c:v copy out.mp4
                            (two-pass loudnorm is more exact: run once with print_format=json, feed the measured
                            values back in)
    A "dark dip" (a scene fading in over a layer that ended hard) is easy to miss: scan mean brightness per frame
    (signalstats YAVG) and flag any frame much darker than the frames 4 before and 4 after.

G6. Disk: every bundle() COPIES the whole public/ folder into the system temp folder, and plain bundle() never
    deletes it. With a few GB of assets this filled a whole drive in two weeks. Scripts that bundle use
    `bundleClean()` from temp_clean.mjs, never `bundle()` directly; render.mjs sweeps old leftovers. Keep public/
    lean (give a project only the assets it needs: `--public-dir` points a render at another folder).

G7. File sizes: busy full-frame pictures at 1440p and the default quality run ~1.5-3 MB per second; still screens
    much less (75 s of tutorial screens = ~15 MB). Phone / chat apps often cap uploads around 25-30 MB: a 1080p
    copy at crf 25-27 is ~10 MB when needed, but only make extra copies when asked.


=====================================================================================================
PART H. TRAPS WE HIT (each cost a render; check here when something looks wrong)
=====================================================================================================

 1. Windows, render fails with "spawn ...chrome-headless-shell.exe ENOENT": the project path is too long (the
    browser's full path passes Windows' 260-character limit). Move the project to a short path.
 2. `--scale=1.3333333333` made a height of 1439.99999996: ProRes took it, H.264 refused ("height must be an
    integer"). Use String(4 / 3) (render.mjs does).
 3. Composition ids: letters, digits and "-" only. "My_Video" is refused.
 4. A 1-frame black gap between back-to-back Sequences: each length was rounded on its own. Round the two ENDS:
    length = round(end x fps) - round(start x fps) (`span()` in src/voice.ts).
 5. A video trimmed to end exactly on the last needed frame rendered that frame BLACK: give it 2 extra frames and
    let the Sequence cut it on time.
 6. A slow zoom done with animated left / top / width / height SHAKES (Chrome snaps those to whole pixels each
    frame). Keep the box still and animate `transform: scale()` with a fixed transform-origin: sub-pixel smooth.
 7. `AbsoluteFill` is exactly 100 % wide and high: a layer meant to overhang (inset: -60) needs a plain absolutely
    positioned div, or the right / bottom edge stays uncovered.
 8. A transformed wrapper with no size is the containing block of its absolute children: children anchored with
    `bottom:` vanished above the frame. Give the wrapper a size (AbsoluteFill).
 9. CSS 3D: `overflow` other than visible, `filter`, or `opacity < 1` on a wrapper FLATTENS its 3D children. Put
    those on leaf elements only.
10. A see-through icon made of several SVG paths, each with an rgba stroke: the crossings get the alpha twice (a
    brighter bar). Use a solid colour and put `opacity` on the whole svg. Same for overlapping divs each with
    their own rgba.
11. A highlighter with `mix-blend-mode: screen` vanishes on light pictures; on paper use `multiply` at ~0.6.
12. A label outside a wipe's clip showed while the previous picture still covered its corner: start each label
    when the wipe has covered its spot. Two cards crossing need a gap, not a crossfade.
13. A scene that fades IN over a layer that ends HARD makes a dark dip for a few frames. The outgoing layer lasts
    until the incoming one is fully in.
14. A transition with an in-out ease starts slow: a card sliding into a slot still fading out collides. End the
    exit before the move gets going. Render stills AT the scene changes to see these.
15. A `//` comment added in the middle of an object-literal line commented out the next keys on that line; their
    values became undefined and interpolate threw "inputRange must contain only numbers". Use `/* */` or put the
    comment on its own line.
16. `objectFit` inside `style` on a `@remotion/media` Video warns: pass it as a prop.
17. `<Sequence layout="none">` does not take premountFor (a TypeScript error).
18. AI video clips often carry a few pixels of black bars at the top and bottom inside a 16:9 file: scale ~1.01
    or crop them before showing full frame. Some AI video tools STRETCH the first-frame picture to their own size:
    a still that cuts into its clip must use the clip's exact geometry, or it jumps at the cut.
19. A keyed (green screen) overlay inside a box leaks a green edge wherever the box is even 1 px smaller than the
    see-through area: grow the box a few px, key from a low threshold, despill near the edge, and check video
    frames, not one still.
20. A caption narrower than its text wrapped to a lone last word: captions are `whiteSpace: nowrap`, centred, or
    sized by measurement. Never one word alone on a line.
21. A cut window taken out of a finished part started inside a mark's fade = a flash of a half-drawn box. Pick cut
    points where no mark is half drawn.
22. Stills at half size hide one-pixel problems: judge thin lines and box edges at the real output size
    (stills.mjs --scale 1.3333334 for 2560 wide).
23. Fonts not loaded before frame 0: the first frames show a fallback font and the layout jumps. Load them through
    loadFont / delayRender in one shared module (Part B4).
24. Every `remotion` / `@remotion/*` package on the same exact version, or strange errors appear. Upgrade with
    `npx remotion upgrade`.


=====================================================================================================
PART I. THE STARTER CODE (tested; create these files exactly)
=====================================================================================================

----- tsconfig.json -----
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "jsx": "react-jsx",
    "strict": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "noEmit": true
  },
  "include": ["src"]
}

----- src/index.ts -----
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";

registerRoot(RemotionRoot);

----- src/Root.tsx -----
import { Composition } from "remotion";
import { TitleCard, titleCardSchema } from "./TitleCard";

// Every video is listed here. Ids: letters, digits and "-" only (an underscore is refused).
export const RemotionRoot: React.FC = () => (
  <>
    <Composition
      id="TitleCard"
      component={TitleCard}
      schema={titleCardSchema}
      durationInFrames={4 * 30}
      fps={30}
      width={1920}
      height={1080}
      defaultProps={{ title: "Hello Remotion", subtitle: "Every value comes from the frame number" }}
    />
  </>
);

----- src/TitleCard.tsx -----
import { AbsoluteFill, Easing, interpolate, spring, useCurrentFrame, useVideoConfig } from "remotion";
import { z } from "zod";

// zod schema = an edit form in the Studio + checked --props on the command line
export const titleCardSchema = z.object({ title: z.string(), subtitle: z.string() });
type Props = z.infer<typeof titleCardSchema>;

// every beat in SECONDS, in one table at the top
const T = { titleIn: 0.2, subIn: 0.55, out: 3.4 };
const OUT = Easing.out(Easing.poly(4)); // entrances (= GSAP power3.out)
const IN = Easing.in(Easing.poly(4)); // exits

// 0..1 between two times, always clamped
const ramp = (t: number, a: number, b: number, easing = OUT) =>
  interpolate(t, [a, b], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing });

export const TitleCard: React.FC<Props> = ({ title, subtitle }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const t = frame / fps;
  // damping ratio 20 / (2 * sqrt(200)) = 0.71: a small, "alive" overshoot. Springs drive transforms only.
  const pop = spring({ frame: frame - T.titleIn * fps, fps, config: { damping: 20, stiffness: 200 } });
  const titleOp = ramp(t, T.titleIn, T.titleIn + 0.35);
  const sub = ramp(t, T.subIn, T.subIn + 0.5);
  const out = ramp(t, T.out, T.out + 0.3, IN); // the exit is faster than the entrance
  return (
    <AbsoluteFill style={{ background: "#121316", justifyContent: "center", alignItems: "center", fontFamily: "Arial, sans-serif" }}>
      <div style={{ opacity: 1 - out, translate: `0 ${-40 * out}px`, textAlign: "center" }}>
        <div style={{ fontSize: 120, fontWeight: 800, color: "#f4f4f5", letterSpacing: "-0.03em", opacity: titleOp, scale: String(0.92 + 0.08 * pop) }}>
          {title}
        </div>
        <div style={{ fontSize: 48, color: "#b4b7bf", marginTop: 24, opacity: sub, translate: `0 ${30 * (1 - sub)}px` }}>
          {subtitle}
        </div>
      </div>
    </AbsoluteFill>
  );
};

----- src/voice.ts -----
// Times from the voice, never typed by hand.
// words.json = [{ "word": "Click", "start": 1.23, "end": 1.51 }, ...] (from the TTS's timestamps or an aligner)
export type Word = { word: string; start: number; end: number };

// lowercase, letters and digits only: "it's" = "its", "Run." = "run"
const norm = (s: string) => s.toLowerCase().replace(/[^a-z0-9]/g, "");

// at("press run") = the start (s) of the 1st "press run"; at("a", 3) = the 3rd "a".
// A phrase that is not in the voice THROWS, so a changed script fails the render instead of drifting silently.
export const makeAt = (words: Word[]) => (phrase: string, nth = 1): number => {
  const want = phrase.split(/\s+/).map(norm).filter(Boolean);
  let seen = 0;
  for (let i = 0; i + want.length <= words.length; i++) {
    if (want.every((w, k) => norm(words[i + k].word) === w) && ++seen === nth) return words[i].start;
  }
  throw new Error(`phrase not in the voice: "${phrase}" (#${nth})`);
};

// a Sequence from a to b seconds with no 1-frame gaps between neighbours: round the two ENDS, never the length
export const span = (a: number, b: number, fps: number) => ({
  from: Math.round(a * fps),
  durationInFrames: Math.round(b * fps) - Math.round(a * fps),
});

// use:  import words from "../public/voice/intro.words.json";
//       const at = makeAt(words);  const T = { title: at("welcome") - 0.3, steps: at("three steps") - 0.3 };

----- render.mjs -----
// Render helper. Runs Remotion's CLI with this Node directly (no shell, so paths with spaces are fine).
//   node render.mjs <CompositionId> [out.mp4]                 -> out/<Id>.mp4
//   node render.mjs <CompositionId> out/f.png --still 90       one frame, to LOOK at
//   node render.mjs <CompositionId> out/x.mov --transparent    ProRes 4444 with alpha (.webm = VP9 with alpha)
//   add --1440 (2560x1440) or --4k (3840x2160) to render a 1920x1080 design bigger and still sharp
//   --props '{"title":"Hi"}' or --props file.json   |   --frames 0-59 = only that stretch
import path from "node:path";
import { spawnSync } from "node:child_process";
import { fileURLToPath } from "node:url";
import { sweepStaleTemp } from "./temp_clean.mjs";

const HERE = path.dirname(fileURLToPath(import.meta.url));
const CLI = path.join(HERE, "node_modules", "@remotion", "cli", "remotion-cli.js");
const run = (args) => spawnSync(process.execPath, [CLI, ...args], { cwd: HERE, encoding: "utf8", stdio: "inherit" });

// alpha needs PNG frames (JPEG, the default, has no alpha) and a codec that keeps it
const ALPHA = {
  ".mov": ["--codec=prores", "--prores-profile=4444", "--pixel-format=yuva444p10le", "--image-format=png"],
  ".webm": ["--codec=vp9", "--pixel-format=yuva420p", "--image-format=png"],
};
// every .mp4: standard BT.709 colour + a keyframe every 2 s, so parts can be joined (and patched) without re-encoding
const MP4 = ["--color-space=bt709", "--gop=60"];
// String(4/3): 1080 x 1.3333333333 = 1439.99999996, which an H.264 render refuses ("height must be an integer")
const SCALES = { "--1440": String(4 / 3), "--4k": "2" };

const a = process.argv.slice(2);
const flag = (name) => { const i = a.indexOf(name); return i < 0 ? false : (a.splice(i, 1), true); };
const value = (name) => { const i = a.indexOf(name); return i < 0 ? null : a.splice(i, 2)[1]; };
const still = value("--still");
const props = value("--props");
const frames = value("--frames");
let scale = value("--scale");
for (const [k, v] of Object.entries(SCALES)) if (flag(k)) scale = v;
const transparent = flag("--transparent");
const [id, outArg] = a;
if (!id) {
  console.log("usage: node render.mjs <Id> [out] [--still N] [--transparent] [--props JSON|file] [--1440|--4k|--scale N] [--frames a-b]");
  process.exit(2);
}

const out = path.resolve(HERE, outArg || path.join("out", `${id}${still !== null ? ".png" : transparent ? ".mov" : ".mp4"}`));
const ext = path.extname(out).toLowerCase();
const args = still !== null
  ? ["still", "src/index.ts", id, out, `--frame=${still}`, "--log=error"]
  : ["render", "src/index.ts", id, out, "--log=error"];
if (transparent && still === null) {
  if (!ALPHA[ext]) { console.log("--transparent needs a .mov or .webm output"); process.exit(2); }
  args.push(...ALPHA[ext]);
}
if (transparent && still !== null) args.push("--image-format=png");
if (still === null && !transparent && ext === ".mp4") args.push(...MP4);
if (frames && still === null) args.push(`--frames=${frames}`);
if (props) args.push(`--props=${props}`);
if (scale) args.push(`--scale=${scale}`);

sweepStaleTemp(); // a killed render leaves its temp copy behind; clear old ones first
const t0 = Date.now();
const r = run(args);
if (r.status !== 0) { console.log("RENDER FAILED"); process.exit(1); }
console.log(`rendered ${out} in ${((Date.now() - t0) / 1000).toFixed(1)} s`);
if (still === null) {
  // size / fps / length of what came out, with Remotion's own ffprobe
  run(["ffprobe", "-v", "error", "-select_streams", "v:0", "-show_entries",
    "stream=width,height,r_frame_rate,pix_fmt:format=duration", "-of", "compact", out]);
}

----- stills.mjs -----
// Many stills of one composition with ONE bundle (render.mjs --still bundles again on every call).
//   node stills.mjs <CompositionId> <outDir> <seconds> [seconds ...] [--scale N]   -> <outDir>/<sec>s.png
import path from "node:path";
import fs from "node:fs";
import { fileURLToPath } from "node:url";
import { renderStill, selectComposition } from "@remotion/renderer";
import { bundleClean } from "./temp_clean.mjs";

const HERE = path.dirname(fileURLToPath(import.meta.url));
const a = process.argv.slice(2);
const si = a.indexOf("--scale");
const scale = si >= 0 ? Number(a.splice(si, 2)[1]) : 1;
const [id, outDir, ...secs] = a;
if (!id || !outDir || !secs.length) { console.log("usage: node stills.mjs <Id> <outDir> <sec> [sec ...] [--scale N]"); process.exit(2); }
fs.mkdirSync(outDir, { recursive: true });
const serveUrl = await bundleClean({ entryPoint: path.join(HERE, "src", "index.ts"), publicDir: path.join(HERE, "public") });
const composition = await selectComposition({ serveUrl, id });
for (const s of secs) {
  const frame = Math.min(composition.durationInFrames - 1, Math.round(Number(s) * composition.fps));
  const output = path.join(outDir, `${s}s.png`);
  await renderStill({ serveUrl, composition, frame, output, scale });
  console.log(output);
}

----- temp_clean.mjs -----
// Keeps the system temp folder clean. Every bundle() COPIES the whole public/ folder into
// <temp>/remotion-webpack-bundle-*, and nothing deletes it: with a few GB of assets that filled a whole drive in two weeks.
//   bundleClean(opts) = bundle(opts) + the copy is deleted when this script ends (normal end, error, Ctrl+C)
//   sweepStaleTemp()  = deletes remotion temp folders older than 12 h (left behind by renders that were killed)
import fs from "node:fs";
import os from "node:os";
import path from "node:path";

const STALE_MS = 12 * 3600 * 1000;
const OURS = /^remotion-(webpack-bundle-|v\d)/;

export function sweepStaleTemp() {
  const dir = os.tmpdir();
  let n = 0;
  for (const e of fs.readdirSync(dir, { withFileTypes: true })) {
    if (!OURS.test(e.name)) continue;
    const p = path.join(dir, e.name);
    try {
      if (Date.now() - fs.statSync(p).mtimeMs < STALE_MS) continue;
      fs.rmSync(p, { recursive: true, force: true });
      n++;
    } catch {}
  }
  if (n) console.log(`temp_clean: deleted ${n} old remotion temp folder(s)`);
  return n;
}

export async function bundleClean(opts) {
  sweepStaleTemp();
  const { bundle } = await import("@remotion/bundler");
  const serveUrl = await bundle(opts);
  process.on("exit", () => { try { fs.rmSync(serveUrl, { recursive: true, force: true }); } catch {} });
  // Ctrl+C / Ctrl+Break skip "exit" unless handled: turn them into a normal exit so the cleanup runs
  for (const sig of ["SIGINT", "SIGBREAK"]) process.once(sig, () => process.exit(130));
  return serveUrl;
}


=====================================================================================================
PART J. REQUESTS THAT WORK WELL (examples to send Claude)
=====================================================================================================

- "Make a 5 s lower third: name 'Jane Doe', role 'Designer'. Transparent ProRes for my editor. Show me 4 stills
  first (in, held, half out, gone)."
- "Make a 20 s intro cut on voice.wav (and voice.words.json). Write the beat list first: time, what is said, what
  is on screen. Then stills at every scene change."
- "Here is steps.json. Make one explainer that shows one scene per step, its length taken from the data
  (calculateMetadata), so next week I only swap the JSON."
- "Make the vertical 1080x1920 version of this for Shorts: its own composition, with the Shorts safe zone, word by
  word captions from the timestamps."
- "Show this app's real screen: capture these 5 states at 3x, type the prompt with the reveal mask, mark the Run
  button on the word 'run'. Still camera, full screen."
- "The text leaves too fast and the cards bounce too much. Fix it, and write both into KNOWLEDGE.md as my taste."
- "Before you call it done: stills at every scene change, full-size crops of every box, then the black-frame and
  loudness checks."