Bespoke Vs Presets

If you only use presets, your render will look generic. If you only copy existing renders, your skill won’t adapt. The right workflow is:

1. Decide the shape first (template choice, plane position, blend mode).
2. Check if a canonical example is close enough → clone and tweak words + timings.
3. Otherwise start from presets → override per-group via custom_css.

Canonical example renders

Full HTML for two validated renders is in references/example-renders/:

When a new scene matches one of these closely (similar framing, similar subject-center, similar backdrop type): clone the HTML and only replace the GROUPS array + word timings. Don’t re-derive the design from presets — you’ll lose the specific choices that took many iterations to validate.

When presets are wrong

You’ll reach for presets like "style": "emph" when what the scene really needs is:

“This cap is at position N and deserves its own treatment”

memory-wall.html uses cap-1 / cap-2 / cap-3 / cap-4 — position-indexed, not role-indexed. Each one is a bespoke design for a specific phrase at a specific point in the arc:

• cap-1 (soft opener, 4 words): 78px italic 600 — feels like a whisper
• cap-2 (dreamy modifier, 3 words): 66px italic 500 + padding-right: 44px — hanging indent creates ragged right-edge stagger
• cap-3 (turn, 2 words): 72px upright 700 — the syntactic pivot, no italic
• cap-4 (climax, 4 words): 90px uppercase 900 — three lines cascade right-aligned

phrase/emph/intro can’t express “this cap has a hanging indent” or “this cap is the syntactic pivot”. When that matters, invent your own class names:

The "style": "1" field becomes class="cap-1" on the element — any string works, no validation.

“The template’s blend doesn’t suit this backdrop” → pick a different template, do NOT override

Cinematic mode does not override colour or blend. A template’s mix-blend-mode + fill are locked DNA — make-composition.cjs ignores plan.cap_color / blend_mode / text_shadow / text_filter. Selecting a template commits to its look; the only agent-authored things are layout (planes/positions) and per-group typography.

So use the caption-region luminance to choose a template that already fits — never to recolour one:

If the scene is bright and the cream/screen look washes out, that’s the signal to switch to Standard mode (which sets opaque colour in the HTML), not to recolour a Cinematic template into something it isn’t.

“Hanging indent / outdent / letter-width tweak”

These are per-group affordances you’ll occasionally need. Express via custom_css:

The #cg-N selector always works because make-composition.cjs writes <div id="cg-N" ...> for every group.

“Caps should accumulate (flex stack) instead of swap”

All three templates default to position: absolute on .cap inside their plane — caps stack at one spot and only the active one shows (single-caption swap). This is correct for portrait-header and corner-column-crown, where each caption replaces the last.

memory-wall uses flex column accumulation — captions pile up like a poem. The template doesn’t default to this, so override via custom_css:

With this + staggered in / out times, cap-0 fades in at t=0.2, cap-1 at t=2.55 (below cap-0 in flex order), cap-2 at t=4.90 (replaces both as they fade out together at t=4.85) — this is how the memory-wall poem pages work.

“Font size doesn’t match the scene”

Template preset sizes are tuned for a specific column width + frame size. Don’t fight them — override:

Then check typography-presets.md § Font-size scales with column width for what to aim at given your plane’s actual dimensions.

The clone-and-tweak workflow

For a new video that’s clearly similar to an existing canonical example:

This skips the preset-based plan.json entirely. Use when:

• Subject framing, shot composition, and backdrop type are similar to the example
• You just need to swap the words and timings
• The bespoke typography from the example is what you want

Don’t clone when:

• Subject position differs significantly (e.g. centered vs off-center)
• Scene luminance / blend-mode needs are different
• You want to experiment with new typography

In those cases, start with plan.json + custom_css and iterate.

Rendering history

render-and-composite.sh now snapshots index.html + plan.json into <project>/history/ with a timestamp before every render. If the user says “the previous one was better”, diff against the latest snapshot:

This lets you recover a design you iterated away from, without re-reading the agent transcript.