Add titles and motion graphics

Words and graphics you control (titles on slides, a news chyron, lower thirds, captions, a headline that builds on a word) are composited over the raw footage with hn4a-compositor, the app's compositor, so they stay separate from the picture: you can change, re-time and re-render them without touching the footage. Don't generate them as part of an image or video. The compositor plays a JSON layer spec live in a browser page (the same runtime shows on review pages) and renders it frame-exact to MP4 with the spec's audio.

First question: is the type a layer over the picture, or part of the scene? A headline beside a presenter is a layout; a word on the back wall that people walk in front of is an in-scene title. Both are composited.

Routes

Text baked into the picture (drawn into a still, then animated) is a different thing: it becomes part of the scene. Text that looks superimposed on the image usually survives the motion, holding still while the background moves, but you can't change, re-time or re-style it without re-rendering the shot. Use it only for text that belongs to the world (a sign on the set, a logo on a prop: guide-design-a-set, guide-keep-small-details), never for titles, chyrons or captions.

Cues

Graphics change on the words. The first look runs on word times estimated from the script (Process, step 1); everything after it waits for the real inputs. Lock them before the full build: the voice track, its word timings (elevenlabs-speech-to-text, read with python-read-word-timings; track.json gives each line's span), the footage, and a matte where needed.

• Start an entrance a little before its word: graphics in the source clips landed about 0.1 s early.
• Find shots with a low scene threshold (0.015): soft cuts and dissolves score 0.02–0.06, which a scene > 0.25 pass misses; hard cuts score ~0.4–0.8 (ffmpeg-scene-cuts). Find visual events (a screen tearing, a phone picked up) on a 2 fps contact sheet of the shot.
• After a voice re-take, re-cue from its new transcript; never nudge numbers by hand.

Process (each gate a review page)

1. The first scene, early. As soon as the script is approved, before the voice, music or any picture is made, build the opening scene alone in two or three looks that differ in kind, cued from word times estimated from the script, and put them on a review page as live compose candidates (hn4a-compositor-motion-graphics, references/first-scene-preview.md). Free, a few minutes, and the first thing the person sees move. Voice auditions can share the page; never hold the looks back for them. Gate: the look the whole video is built in.
2. One spec per layout in the job folder (slides/<name>.json), in the picked look, boxes laid out on the 1920×1080 canvas against a still of the reference slide, entrances from the cues.
3. A still per scene, on one sheet, looked at once for overflowing text, a missing font, a head covering a word. That catches mistakes; it doesn't approve the look. Save the still per cue and the frame-by-frame checks for the render.
4. Gate on the whole design, live. review_open with each spec as a {"compose": "slides/<name>.json"} candidate, which plays live in its card, free, in seconds, and the key-moment stills beside it as the row's refs. The person watches the design move there, not on a sheet of stills. Get their yes on the caption and title design before any render, though the render is free: a caption style agreed in words ("bold slab captions") is not one they have seen. Iterate on the JSON, never on the derived HTML.
5. Render the picked spec, only after that yes. Check the frame count, a contact sheet, and the start of the audio.
6. Revisions: re-render only the span that changed and splice it into the full render; look at stills either side of the span. A change to the look goes back to the person on the live page first. A change to duration, fps or the audio list needs a whole render.

Choosing

• A presenter cut out over a background needs a real matte: birefnet-matte, "General Use (Heavy)", which also keeps podiums and chairs. Snap the matte's span to the shot's cut times. Otherwise keep the presenter in a window or bubble where its own background shows.
• Type behind people: place it so a head or shoulder covers one letter or part of one, never a whole word. Check the still and nudge the box.
• A whole layout swap reads as one move when the old layer fades out over the new one fading in (a 0.5 s overlap), or as one box-and-crop keyframe move (full frame → window → bubble).
• Brand type and colour: local font files embed in the page; name the brand colour in the spec (Brand Sans, Globex Lime #B8E62E on #1B2E24).

Avoid

• Colour-keying for a cutout: it eats skin and hair edges.
• Remotion or any build step: the spec and one runtime are the whole tool.
• Titles, chyrons or captions generated into the image or video: composite them.
• A whole word covered by a head.
• A scene > 0.25 pass for cue times: it misses dissolves.
• Text boxes sized for short copy: they don't shrink text; check the longest line.
• Building the whole design before the person has seen any of it move: they wait for every voice and picture, then see one look they didn't choose.

Related

• guide-voice-a-script: the track and word timings this reads.
• guide-design-a-set: where in-scene type sits.
• recipe-slide-deck-presenter: a talking head in slide layouts, end to end.