02 Explainer figures

An explainer figure is a diagram that builds while someone talks. Each beat adds one new element. When two things appear at once, the viewer reads neither, and the voice-over runs ahead of the eye.

The order of the reveal is the order of the explanation. If you would say “first the brief, then the brand kit”, the brief appears first, and the arrow between them draws in the direction the idea flows.

Once something has been explained it should stay on screen, so the viewer always knows where they are in the story. Dim it rather than removing it. The active element gets full contrast; everything else steps back.

Pick one reveal style per figure and use it for every element of the same kind. Consistency is what lets the viewer stop watching the motion and start reading the content.

• Reveals take 400 to 600 ms; the beat holds for as long as the caption takes to read aloud.
• Speech runs at about 150 words a minute, so a 12-word caption needs roughly 5 seconds.
• Connectors draw in the direction of flow, after the element they start from.
• Labels arrive with their shape, never after a long gap.
• Loops and feedback (like the critique arrow) get the accent color; the main path stays neutral.

Both engines express beats as start times. In Remotion a <Sequence> mounts its children from a given frame. In HyperFrames each clip carries data-start and data-duration attributes.