Animated explainer videos

Apply these rules when you plan, write, animate or review a video. Story rules come first: a beautiful video with a flat script still fails.

Making the video

When the user wants an actual video file, build it with Remotion (and Three.js for 3D) from the template in this skill.

Story first. Write the script as beats (one idea per beat) using the Story rules below. Check the first sentence and the opening seconds before anything else.
Project. Copy template/ to a new folder, run npm install. Read reference/remotion.md before writing code, and reference/threejs.md before any 3D scene.
Voice. If the user gives a voiceover (their recording or any text-to-speech file), put it in public/ and set "voice" in public/plan.json. If they don't, put each line in its scene's "text" and run npm run voice (free Kokoro voice, English): it writes public/voice.wav and sets every scene's start and end. Pick a voice with node scripts/voice.mjs am_michael (male) or the default af_heart (female).
Timing. Run npm run captions for word timestamps. With your own voice file, start each scene at the first word of the line it shows; with npm run voice this is already done.
Scenes. Write one component per scene in src/scenes/, register it, and list the scenes in plan.json. Every spoken line gets its own visual.
Check. Render stills (npx remotion still Main out/still.png --frame=N) at the start, middle and end of each scene, look at them, and fix anything that breaks the rules below.
Render. npm run render writes out/video.mp4. Watch the first 3 seconds again before calling it done.

Requirements: Node.js 18+ and ffmpeg. Remotion downloads its own headless Chrome on the first render.

Every video is a small story: a character wants something, something blocks it, a twist happens, there is a payoff. A list of facts is not a story.
The first sentence is a bold claim, a contradiction of something people believe, or a character with a problem.
- Good: "Something in your kitchen is killing you." / "I always thought computers were better at math than people." / "This is Uncle Don, and he's got a huge problem."
- Bad: "How does X work?" / "Here are 3 tools that…" / "Today we'll look at…". If the video answers a "how" question, move that question to the second sentence.
Open a question or a tension in the first 3 seconds and keep the answer for later. Don't spend the twist in the hook.
Pick broad or timely topics. A niche topic needs an everyday angle that anyone can feel.
A strong opener doesn't save a weak topic. Decide the topic first, then write the hook.
Every video stands on its own. No "Part 2", no openers that continue an earlier video, no generic utility lists.
Show, don't tell: every spoken line has its own visual. If the video makes sense on mute, the scenes work.
One idea per scene. If a line holds two ideas, split it into two scenes.
Escalate: each beat raises the stakes or the surprise a little more than the one before.
End on a line the viewer can repeat or use (a question to ask, a rule of thumb), not on a summary.
Length is a free choice: use the length the story needs. In long videos, give a small payoff at least every 60-90 seconds.

Keep the main subject in the upper-middle band, about y = 500-1100.
The bottom ~20% (y > 1500) sits under the platform's UI: no key visuals there. Put captions just above it.
Keep ~60 px margins on the sides. Keep the right edge (x > 960, y 900-1700) free of key information, because the like and comment buttons sit there.
Center framing usually works best in vertical video. Use thirds for scenes with two subjects.
One dominant element per frame. Everything else is smaller, darker or less saturated.
A character's face should be at least ~15% of the frame width in key moments.

Start speaking at frame 0. No silent intro, no logo.
Something visibly changes within the first 1-2 seconds: a new object, a move, a transformation. No static title card.
Big text in the first frame is optional. If you use it, it states the claim; it isn't decoration.
A face in the first frame is optional. A strong character or image works just as well.

Every camera move has a motive: it follows a character, reveals information or adds emphasis. No decorative motion.
Never move linearly: always ease in and out.
Reveal = slow push-in (scale 1.0 to 1.1-1.25 over 1-3 s). Shock = fast punch-in (0.15-0.25 s) with a small shake.
New location: wide shot first, then closer.
Low angle = power or threat, high angle = small or helpless, eye level = neutral.
If two characters face each other, keep each one on its own side for the whole scene.
In 3D: FOV 35-50 degrees, depth from foreground, middle and background layers. Move the camera (dolly) rather than changing the FOV (zoom).
In 3D cartoon scenes, use linear tone mapping and a slight saturation boost; filmic tone mapping washes cartoon colours out.

After the opening, pacing follows the style. A fast first moment matters more than a fast whole video.
Eye trace: the point of interest in a new shot starts where it was in the previous shot.
Match cuts: a shape or colour from the end of one scene becomes the start of the next.
After a joke or a punchline, hold 0.3-0.6 s before cutting.
Slow down before the key moment, speed up after it.
Cut on action: change shots in the middle of a movement, not after it stops.
No white flashes or strobe transitions. Use whip pans, match cuts and wipes.

Squash and stretch on every impact and jump (scale 0.8-1.25, volume roughly kept).
Anticipation: a small move the opposite way before a big move (0.1-0.2 s).
Follow-through: hair, antennas and arms keep moving and settle after the body stops.
Limbs and thrown objects move on arcs, never on straight lines.
Blinking, breathing and idle sway never stop, even while a scene waits.
Timing sells weight: heavy things move slowly and land hard, light things move fast.
Exaggerate emotions: huge eyes, big mouth shapes, a flying sweat drop.
One clear silhouette per pose. If the pose doesn't read as a black shape, change it.

Captions: 2-5 words per chunk, synced to the voice, popping in, high contrast (white with a dark outline).
Big kinetic words only at punch moments, and only one big word group on screen at a time.
Numbers on screen exactly match the narration and the source.

Every number on screen has a real source and matches it.
Never put first-person claims into the narration that the creator didn't actually do.
Parody headlines use clearly made-up names, never imitations of real outlets.