Animated Explainer Video

# Animated Explainer Video

Produces a 30–60 second explainer video as a pure JavaScript canvas animation, with
narration, music, sound effects and captions. Delivers an interactive HTML page and a
rendered MP4 from the same code.

**Before starting:** complete the Briefing at the end of this skill. Take every answer
from the request or the available context; ask for anything still missing. Where you
proceed on an assumption, state it in the handover.

## 1. Story before technique
- Name the job first: what task does the product do, and for whom? Not its features.
- Structure: 3 pain points (spoken) → a turn → at most 5 features (shown) → call to action.
- Pain points must be uncomfortably concrete ("a doc called final_final_v3"), never abstract.
- Word budget: about 2.3 words per second, minus intro and outro.
- Every product claim needs a source. No number without evidence; illustrations
  ("five people, five versions") are allowed but must not sound like measurements.
- No third-party logos; product names as text only.

## 2. Timing as a single source of truth
- Generate the narration sentence by sentence, trim silence, set pauses deliberately
  (0.15–0.8 s).
- Build a cue list (JSON) from it: the start of every sentence and, approximated by
  character position, the timing of key words.
- Visual entrances AND sound effects read the same cue list. Never maintain two timings.

## 3. Voice
- Prefer a neural text-to-speech model (e.g. Kokoro via kokoro-onnx), using the
  best-rated voice for the target language.
- Check the phonemes for brand names, abbreviations and product names first; respell
  difficult words phonetically for the TTS, while captions keep the real spelling.
- Never guess the brand name's pronunciation: ask, or flag it as an assumption.

## 4. Music and sound effects
- Synthesize them yourself (no licensing questions): plucked strings, glockenspiel,
  bass, shaker.
- The music follows the story: restrained/minor for the problems, a transition at the
  turn, bright/major for the features, a final chord on the end card.
- Tie a sound effect to every visible action (pop, rustle, stamp, scissors).
- Duck the music by about 6–9 dB under the voice; the voice should sit ≥ 9 dB above it.
- Normalize the master to −16 LUFS, peaks ≤ −1.5 dBTP.

## 5. Visuals
- Own renderer instead of a library: paper polygons with torn edges, paper grain,
  shadows, tape, hand-drawn lines that draw on progressively.
- Stop-motion feel: quantize motion to 12 fps, let lines jitter slightly at 8 fps.
- All randomness deterministic (seeded), so every frame is reproducible.
- One clear composition per scene; keep the caption zone free.
- Vary transitions (paper wipe, swirl into one point); not every cut the same.
- Embed fonts as Base64 so the page and the offline render look identical.

## 6. Delivery
- HTML: canvas, play overlay (autoplay needs a user gesture), scrubber, caption
  toggle; the animation reads its time from audio.currentTime.
- Render mode (?render=1) exposing window.__render(t) for frame output.
- MP4: render frames headless in batches (background processes may be killed), then
  encode with ffmpeg to H.264 + AAC, 1080p, 30 fps.

## 7. Checks before handover
- Render keyframes of every scene as a contact sheet and look at them: overlaps,
  clipped elements, legibility.
- Inspect the mix's spectrogram and levels: no noise walls, voice clearly in front.
- Verify every fact against the source; state assumptions (pronunciation, audience) openly.

## Never
- Never show features that are not live.
- Never invent numbers, certifications or customer logos.
- Never imitate copyrighted characters, songs or voices.

## Briefing

Settle these before production starts:

- **Product:** what is being explained, and what it is not.
- **Audience:** a concrete role, not a segment ("the person who maintains the team's
  AI instructions", not "marketing teams"). The audience decides the pain points.
- **Fact source:** where product claims may come from (website, product description,
  persona, a document). Anything outside it does not go in.
- **Length:** target duration within 30–60 seconds.
- **Aspect ratio:** 16:9 (website, presentation) or 9:16 (LinkedIn, Reels, Stories).
- **Style:** e.g. whimsical hand-drawn paper collage; brand colors if any.
- **Narration language and voice:** language, female/male, accent.
- **Pronunciation:** how the brand name is spoken.
- **Call to action:** what the viewer should do at the end (e.g. start a trial).
- **Deliverables:** HTML page, MP4, or both; captions on or off by default.