Graphics built in code

Every word and brand element on screen is designed and rendered as its own file, never generated inside a shot.

Build every graphic in code [best available, not yet validated]: a small HTML composition (a web page made for one graphic), animated on one timeline and rendered to video by HyperFrames, an open-source renderer. Pin one renderer version for the film. The renderer adds no creative quality: the bar is set by award-level human motion design, studied as reference only.

If you don't write code, a motion designer or developer builds the compositions from your graphics brief and style file. The rules below are what you check.

Before any motion

1. The graphics brief [proven], one short internal page per film. It covers:

   • what the graphics are for;

   • where they play, and on which screens;

   • every element, with its exact copy and reading time;

   • the audio they sit on (the voice lines' word timings, the music's beat grid);

   • the brand assets received;

   • the references;

   • how each element enters and leaves;

   • the renderer.

2. Stills first [proven]: two to four style frames of the key elements over real frames from the approved takes (plus one key frame per beat for a full-frame graphics film), shown as one storyboard image with a short note beside each frame. Motion starts once you approve them.

3. The style file [proven]: once a brand's graphics look is approved, write down its grid and positions, type sizes and weights per element, colours by role, entrance and exit timings and eases, and sound cues. Later films and versions for that brand start from it.

What is rendered, and where it sits

Key: ProRes is Apple's high-quality editing format. ProRes 4444 can carry an alpha channel (the transparency layer), so the picture under it shows through; ProRes 422 HQ is the opaque version.

Render at the sequence's frame rate and at each version's own size and language. Brand fonts and the client's logo are local files; nothing loads from the web at render time.

The brand-book check before placing

• only the brand's fonts;

• the client's own logo and emblem files, never redrawn, recoloured or traced;

• one fixed position and size per element type across the film, from one layout grid;

• a super that names something the voice says lands on that word, from the word timings [proven];

• every other entrance lands on a beat of the chosen track;

• no shadow, glow or bloom unless the brand book allows it;

• claim wording matches the client's confirmed substantiation.

Defaults: timing, type sizes, what looks generic

The brand book overrides each of them.

Timing defaults:

• Entrances take about 0.4–0.5 s, because a 0.16 s rise reads as a jump.

• A title holds at least 1.5 s, and a title with a line about 2 s.

• Exits take about 0.3–0.4 s, unless the element leaves on a cut.

• Ease out on entrances, and ease in on exits.

A full-frame graphics shot keeps moving [best available, not yet validated]: the camera, the background or the element being built moves in every frame; a frame where nothing moves is a declared hold.

Minimum type sizes [best available, not yet validated], the brand book first:

Arabic goes one step larger. Check at phone size.

What looks generic [official guidance]: centred text on a gradient, gradient text, purple-blue or neon accents, identical cards, everything centred, an overused default font. Use them only where the brand book does. Otherwise, work from the brand's grid, type and colour. You judge the look and the hierarchy.

Sources

• HyperFrames (the renderer).

• Standard motion-design practice (the brief, style frames, the style file).