# EXPLAINER.md: Explainer and data animation system ## Principles - One idea per scene. One chart per scene. - Every number on screen comes from the source file. If a number is missing, show [placeholder], never invent it. - Show the source on screen, small, bottom right, whenever a number appears. ## Scene timing - Each scene: 4 to 8 seconds. Build 1 to 1.5 s, hold at least 2 s, exit 0.5 s. - Numbers count up over 1 s with ease out, then hold the final value. - Narration leads, animation follows: the visual appears on the word, not before. ## Charts - Bar charts start at zero. Always. - Max 6 bars or 4 lines per chart. Group the rest as "Other". - Highlight one data point in the accent color, everything else in muted gray. - Labels directly on the bars or line ends, no legends when possible. - Axis labels and units always visible. Round to what matters (18%, not 18.27%). - Bars grow from the baseline with a 3 frame stagger, left to right. ## Type and color - Use the motion brand system (DESIGN.md) for fonts, colors and easing. - Numbers use tabular figures so they do not jitter while counting. - Big number scenes: number at t-hero size, label under it at t-body. ## Structure for a 30 to 60 s explainer 1. Hook: the single most surprising number or claim. 2. Context: what we are measuring and since when. 3. Three beats: one chart or diagram each. 4. Takeaway: one sentence, held still for a voiceover. ## Never - 3D pie charts, dual axes, truncated axes, animated gridlines that distract. - Stock icons for every word. Use an icon only when it explains faster than text.