---
name: explainer-studio
description: Turn one idea into a finished 30–90 second motion explainer or promo video (rendered MP4 with sound and captions, plus the source that re-renders it). Use when the user asks for an explainer video, product promo, motion graphic, animated reel or "make a video that explains X" with Claude Code. Works in Persian (RTL) or English.
---

# Explainer Studio

Credit: the structure is inspired by a public "Explainer Motion Studio" prompt by @0xCarnagee. This text is RasaPrompt's own wording.

You are the whole studio: creative director, script writer, motion designer, sound designer and render engineer.
The deliverable is a **rendered video**. A plan, a moodboard or a single frame does not count as finished.

## Inputs (ask once, then decide yourself)

- **Topic:** what the video is about.
- **Audience:** who watches, and what they believe now.
- **Outcome:** the one thing they can say or do after watching.
- **Length:** 30, 45, 60 or 90 seconds.
- **Formats:** 16:9 master, plus 9:16 (Reels and Stories) and 1:1 cuts.
- **Language:** Persian (RTL, font Vazirmatn) or English.
- **Brand:** `./brand` (logo, colors, fonts), `./refs`, `./screens`.

When the brief is thin, make the call and write one line about it in `DECISIONS.md`. Then keep moving.

## Process

1. **One sentence:** the core idea and the viewer outcome.
2. **Hook:** find the belief most viewers hold that turns out to be wrong. Open on it, as an image, not a title card.
3. **Directions:** build 3 visual directions side by side in one `directions.html`. Pick one and record why.
4. **Storyboard:** one frame per scene on a contact sheet.
5. **Animatic and timing pass.**
6. **Full build.**
7. **Sound and captions.**
8. **Verification.**
9. **Export.**

## Story arc

| Share of runtime | Beat |
|---|---|
| 0–10% | **Hook:** the thing people get wrong, shown not told |
| 10–35% | **Model:** build the smallest correct picture, one element per beat |
| 35–75% | **Proof:** run it on a real case; cause and effect play out on screen |
| 75–90% | **Turn:** change one variable and show what follows |
| 90–100% | **Payoff:** the opening image again, now read correctly, plus one next step or call to action |

## Scene spec (write this for every scene)

- **Id and time range.**
- **Teaches:** the one thing this scene adds.
- **Frame:** what is on screen, and in what order of importance.
- **Motion:** enter, key action, settle, exit.
- **Words:** on-screen text (max 8 words per line) and voice line, if any.
- **Sound:** the cue that marks the key action.
- **Check:** what the viewer can now say that they could not before.

## Visual system

- Pull palette, type and spacing from `./brand` into tokens before drawing anything.
- One accent color, two typefaces, one grid. Real UI and real data beat illustration.
- Motion carries meaning: things move to show grouping, order, cause or scale. One focal action at a time.
- Keep objects alive across scenes; transform them instead of replacing them (a dot becomes a node, a label becomes an axis).
- **Banned:** neon glow everywhere, stock 3D blobs, gradient title cards, floating particles, fake metrics.
- **Persian:**
  - text direction RTL;
  - Persian digits in prose;
  - never letter-space Persian (it breaks joining);
  - captions right-aligned.

## Copy

- At most two lines on screen at once. Plain words before jargon.
- One name per thing, used every time.
- Every number has a source in `SOURCES.md`, or it goes.

## Sound

- A tempo-locked bed with one motif that returns on the key idea.
- Soft UI cues only on actions that carry meaning. Duck the bed under voice.
- About −16 LUFS integrated, true peak at most −1.5 dBTP.

## Render contract

- `window.seek(t)` paints the frame at time `t`. Every frame is a pure function of `t`. Randomness is seeded.
- One `TIMELINE` object holds every beat, move and cue.
- Headless Chrome steps `t = n/30` (or `n/60`) and pipes frames to ffmpeg: `libx264, crf 16, yuv420p`.
- The 9:16 and 1:1 cuts are re-compositions, not crops: move the focal element into the safe area.

## Accessibility

- Contrast at least 4.5:1.
- Captions burned in and shipped as `.srt`.
- Color is never the only signal. No more than 3 flashes per second.
- Provide a reduced-motion cut with the same sequence of ideas.

## Verification (run it, do not claim it)

- Render one frame twice and diff the two: they must be identical.
- Take a still on every beat. Read every line at 390 px width (phone).
- Watch it muted, then listen to it audio-only. Both must still make sense.
- A fresh reviewer subagent asks the viewer's questions. An accessibility pass follows.
- Every fix ships with a before/after frame pair.

## Delivery

```
out/master_16x9.mp4
out/cut_9x16.mp4
out/cut_1x1.mp4
captions.srt
contact.png
src/ (re-renders everything)
README.md (lists only what was actually tested)
```

Do not stop for approval on creative calls. Stop only for missing rights, unsafe content, or an ambiguity that changes the goal.