Motion graphics
A scene can carry a visual board in place of its headline panel: a number, a list, a procedure, or a document drawn in Wallace type with Design System icons as the illustrations. Every board has a 16:9 and a 9:16 layout. Its items appear on the word the narration says, and every board reads its colors from the contract.
npm run check:video enforces all three rules.Three layouts, chosen for you
Authors never pick a layout. The format and whether the scene has footage decide it, and the same record renders correctly in the long-form and the Short. The shaded block is where the board draws. The dashed lane is the captions and the small marks are the logo, the subscribe pill, and the watermark labels.
text side| Layout | When | Budget family | Words on one board |
|---|---|---|---|
wide | Long-form scene with no asset or assets | wide | 24 |
side | Long-form scene with footage | column | 16 |
vertical | Every Short scene | column | 16 |
side and vertical share the column budgets, so a board written for a Short fits over long-form footage unchanged. Captions and the eyebrow do not count toward the word total.
The executable limits live in video/boards.json. The producer checks the format and footage before rendering, and the components resolve their budgets from that same catalog. Automated drafts use the column-safe item limits; an explicitly authored footage-free horizontal board can still use the larger wide budget.
The board kinds
These are the only kinds the Wallace scene draws. An unknown kind, an over-budget board, or an icon outside the set fails npm run check:video before anything renders. The last column counts where the ready productions use each kind, read from their records.
| Kind | Use it for | Copy budget | Layout | In production |
|---|---|---|---|---|
stat | One number the viewer must keep: a deadline, a percentage, a rank. Integers of two or more count up; the rest slam in. | value ≤ 5 characters, unit ≤ 2 words, label ≤ 8 | 16:9 Figure left, the icon as a large illustration right Column Icon tile, figure, label, stacked | 9 boards in 4 productions |
cards | A spoken list: evidence to keep, things the insurer stalls on. Each card is an icon and a label. | label ≤ 3 words, note ≤ 6, title ≤ 6 | 16:9 2–5 cards in a row Column 2–3 rows | 6 boards in 4 productions |
steps | A procedure in order. The connector fills from one step to the next as the voice moves on. | label ≤ 4 words, title ≤ 6 | 16:9 3–5 steps across Column 2–3 steps down | 2 boards in 1 production |
flow | Cause and consequence. The last node is the consequence and is drawn in yellow. | node ≤ 3 words, outcome ≤ 10 | 16:9 2–4 nodes across Column 2–3 nodes down | 4 boards in 3 productions |
document | Reading a paper line by line: a release, a report. The highlighted row is marked in yellow on its cue. | title ≤ 3 words, label ≤ 3, value ≤ 4 | 16:9 up to 4 rows Column up to 3 rows | 2 boards in 1 production |
compare | What they say against what is true. Right is always the Wallace side. | title ≤ 3 words, row ≤ 4 | 16:9 two columns, up to 3 rows each Column two panels stacked, up to 2 rows each | Not yet used |
statement | The one rule a scene must land. The gold phrase arrives behind a yellow wipe on its cue. | text ≤ 8 words, subline ≤ 10 | 16:9 Copy left, the icon as a large illustration right Column Icon tile over the copy | Not yet used |
chapter-title | Opens a chapter in a longer explainer and names it on the rail. | title ≤ 5 words, icon required | 16:9 Number, title, illustration Column Not available | Not yet used |
subscribe | The mid-video ask. The subscribe pill lands large with a bell. Enable producer.subscribe to have the Video Lab insert it. | question ≤ 12 words, line ≤ 14 | 16:9 Question, line, pill Column Not available | Not yet used |
Cues: the screen never runs ahead of the voice
Each item names a cue, a word from its scene's narration. The item appears on the frame that word starts, read from the timed captions. Cues resolve in order, each one searched after the previous cue's word, so two items that share a word still appear in sequence. A cue the narration never says, or says out of order, fails CI. An item without a cue is spaced evenly across the line.
{
"id": "dashcam",
"eyebrow": "Evidence",
"assets": ["dash-16-day-car-red-light-runner", "dash-30-day-car-spinout"],
"visual": {
"kind": "cards",
"title": "Locked in on video",
"items": [
{ "label": "Speed", "icon": "gauge-high", "cue": "Speed" },
{ "label": "Distance", "icon": "arrows-left-right", "cue": "Distance" },
{ "label": "Timing", "icon": "stopwatch", "cue": "Timing" }
]
}
}This is the dashcam scene of rear-end-collision. The narration says "Speed. Distance. Timing." and each card snaps in on its word. The board replaces the headline panel, so headline, goldPhrase, and subline are dropped. The scene's eyebrow still draws above the board.
Motion vocabulary
Four moves make up every board. They are faster than the Pierce set because a Crash Cam edit cuts every few seconds.
| Move | What it does | Where |
|---|---|---|
| Snap | A spring with a small overshoot (damping 12, stiffness 220). Icon tiles also turn 12° to square. | Icon tiles, step markers, the stat figure, the subscribe pill |
| Wipe | A yellow bar sweeps across and uncovers the words behind it, like a highlighter. | A statement's gold phrase, a chapter title |
| Slide | A 12-frame ease-out travel: up in a row, in from the copy side in a column. | Cards, flow nodes, document rows, labels |
| Count | An integer of two or more counts up from zero over 16 frames. A percentage or a rank slams in instead. | Stat figures |
Icons are the illustrations
Boards draw the Brand icon set, 49 Font Awesome Free solid glyphs, from public/design-system/icons. The contract's brand.staticFiles mounts that folder into every render as icons/. A glyph renders as inline SVG in a contract color: navy on a yellow tile, or yellow as a large illustration. Each glyph keeps the meaning assigned on Brand · Icons. To add one, copy the file from Font Awesome Free's svgs-full/solid, then add its --i- token, its .i- class, its meaning on that page, and its name in WALLACE_ICONS. CI fails if the list and the folder differ.
arrow-rightarrow-trend-downarrows-left-rightbellbook-openbrainbuilding-columnscameracar-burstcar-sidecircle-checkcircle-xmarkclockcomment-dotscommentscrutchenvelope-circle-checkfile-invoice-dollarfile-linesfile-signaturegauge-highgavelhand-holding-dollarhashtagheart-crackhelmet-safetyhospitallinklocation-dotmagnifying-glassmicrophonemicrophone-slashmoney-bill-wavemotorcyclenotes-medicalpeople-groupphone-volumesack-dollarscale-balancedscale-unbalancedshield-halvedstopwatchtriangle-exclamationtruck-movinguser-doctoruser-injureduser-slashuser-tievideoChapter rail
Every long-form content scene carries a rail under the subscribe pill: the current chapter's number and name over one tick per chapter. The chapters come from publishing.chapters, the same list the YouTube description prints, so the two always match. A longer explainer can instead give scenes a chapter id and open each chapter with a chapter-title board, which names it. Shorts have no rail.