Flat explainer

How to use it

Run most of the clip as full-frame flat explainer scenes with simple characters and charts that grow as the point builds, cutting back to the speaker once or twice.

Where the speaker sits

Full sceneSuits itSmallSuits itSplitSuits itSideWorksDrawn overAvoid

Split: the scene above, the speaker below. Stock speaker from Pexels.

Palette

THIS IS A MOODBOARD, NOT A TEMPLATE. The style below is inspiration for the look and feel. Keep its materials, colours, textures and the way it moves, but invent your own scenes, characters and objects for this clip. You are not limited to anything shown in the preview, and nothing in it has to appear. Use illustration and animation to help tell the clip's story.

STORY FIRST. Read the whole clip before you design anything.
1. Write the clip's arc in one line: setup, tension, turn, pay-off. Name the one line that is the reveal.
2. Tag every sentence with its job: setup, context, tension, turn, reveal, example, number, contrast, list, quote, feeling, metaphor, callback, pay-off, aside.
3. The visuals carry the whole clip. If the clip shows the speaker's face, open on them (the first scene keeps them on screen) unless the person says otherwise. After that, never cut back to the speaker full-frame unless the person asks for it; if they do, only on the ending, never in the middle of an explanation. The speaker can still sit inside a scene (a corner, a split or drawn in) when the person wants to be seen.
4. Build one flowing visual story, not a new picture per sentence. Each scene covers a whole thought (one to three sentences), holds 3 to 8 seconds and turns into the next.
5. Start each scene on the first word of its sentence, or up to half a second before. Never cut mid-sentence.
6. Inside a scene, bring small details in on the words they show (an item, a tag, a tick). Earlier details stay.
7. Choose one or two recurring objects or characters in the first scene and bring them back changed. Callbacks beat new pictures.
8. Build up the same picture where you can (add to it, move the camera across it) instead of replacing it.
9. Energy: about 80 percent still, drifting or gentle. Allow one big move in the whole clip, on the reveal, for 1 to 2 seconds, then settle and hold.
10. Numbers sit on a scale (gauge, bar, table, timeline) and hold long enough to read. Contrasts are a still split or the same layout twice.
11. Feelings get a quiet image, or one of the cuts back to the speaker; never effects.
12. On-screen text names, labels or quotes; it never repeats the caption. Five words or fewer per label.
13. End every scene by settling or thinning out, or by turning into the next scene. No exit effects.
14. The style sets the look. These rules set when, how long and how calmly. If the style's own motion rules ask for more energy than this, use less.

VISUAL STYLE: Flat explainer
Slice style ref: sref-XGWRVR
Flat explainer. A clean explainer world of rubbery flat characters and simple chart marks.
Palette: #FF7A45 warm orange, #2F80ED blue, #FFD33D yellow, #3A3A3A ground grey, #F4F4F2 light. One flat background colour per beat, chosen from the palette, cut (never faded) on each new sentence.
Line and fill: thin even dark line (#2B2B2B), round caps. Flat fills printed slightly off-register: every fill sits about 3px down and right of its outline, so a sliver of background shows on one side. No gradients, no texture.
Characters: simple rounded bean bodies, round heads, dot eyes, one-line smiles. Limbs are bendy rubber-hose curves that bend smoothly, never jointed. Not realistic proportions.
Light: one soft grey cast shadow ellipse under each figure. Nothing else is shaded.
Camera: locked. The world does not move; the background colour flips per beat.
Motion: bouncy walk cycles and gestures, 24fps smooth, ease with a little overshoot. Chart bars and pie slices grow from zero only when the speaker reaches them, then hold. One peak per beat at most (a jump, a big number).
Type: clean rounded grotesque, heavy weight, short labels only (two words or a number).
The rule: simple line, flat colour off-register, rubbery motion.
Don'ts: no realistic proportions, no textures, no gradients, no purple, no pill shapes (rounded rectangles only), no paragraphs of text.
Accent: as in the palette.
Frame shape: ask me before you start (9:16 vertical, 4:5 portrait, 1:1 square or 16:9 wide).
Energy: normal.

TECH: one HTML file, one GSAP 3 timeline created paused as window.__timelines.main, duration = the scene's length, transforms and opacity only.

Look rules

• Flat explainer. A clean explainer world of rubbery flat characters and simple chart marks.
• Palette: #FF7A45 warm orange, #2F80ED blue, #FFD33D yellow, #3A3A3A ground grey, #F4F4F2 light. One flat background colour per beat, chosen from the palette, cut (never faded) on each new sentence.
• Line and fill: thin even dark line (#2B2B2B), round caps. Flat fills printed slightly off-register: every fill sits about 3px down and right of its outline, so a sliver of background shows on one side. No gradients, no texture.
• Characters: simple rounded bean bodies, round heads, dot eyes, one-line smiles. Limbs are bendy rubber-hose curves that bend smoothly, never jointed. Not realistic proportions.
• Light: one soft grey cast shadow ellipse under each figure. Nothing else is shaded.
• Camera: locked. The world does not move; the background colour flips per beat.
• Motion: bouncy walk cycles and gestures, 24fps smooth, ease with a little overshoot. Chart bars and pie slices grow from zero only when the speaker reaches them, then hold. One peak per beat at most (a jump, a big number).
• Type: clean rounded grotesque, heavy weight, short labels only (two words or a number).
• The rule: simple line, flat colour off-register, rubbery motion.
• Don'ts: no realistic proportions, no textures, no gradients, no purple, no pill shapes (rounded rectangles only), no paragraphs of text.

What it suits

Best for

Clear business, money, tech and how-to explainers with simple charts and friendly characters.

Avoid for

Intimate grief, faith or poetic reflections.

Content

Explainer, How-to, Money or business, Numbers, Advice

Tone

Upbeat, Playful

Pace

Medium

Topics

business, money, tech, startup, product, process, data, marketing, growth, strategy

Colours

#FF7A45 #2F80ED #FFD33D #3A3A3A #F4F4F2

For AIs: this style as plain text.