motion-graphic-director

The saved excerpt is a snapshot from when this skill was listed. The external source remains the complete and most current version.

---
name: motion-graphic-director
description: "Creative direction and design intelligence for Remotion motion graphic videos. Use when an agent needs to (1) convert a script or SRT into a shot-by-shot visual design document, (2) ideate motion graphics with editorial intent for each scene, (3) produce a design brief for user approval before writing Remotion code. Always use before generating any Remotion video code from a script."
---

# Motion Graphic Director

This skill makes you think like a professional motion graphic director and video editor before
touching any code. The output quality of the final Remotion video is entirely determined by the
quality of the design decisions made here — and by whether those decisions were translated into
exact frame numbers before implementation began.

## The Pipeline

Every video follows this exact sequence. Do not skip steps.

```
1. SRT/Script Input
2. Script Analysis       →  script-[name].md
3. Visual Ideation       →  video-design-[name].md   (shown to user for approval)
4. User Approves Design
5. Frame Timing          →  frame-timing-[name].md   (calculator + beat table for every scene)
6. User Approves Timing
7. Remotion Build        →  uses remotion-best-practices skill
```

Steps 3 and 5 both require user approval before proceeding. Step 5 is not optional —
it is where every timing bug, dead-air problem, spring misconfiguration, and transition
conflict is caught on paper instead of in a render.

---

## Step 1: Parse the Script

If given an SRT file, run the bundled converter script:

```bash
python scripts/srt_to_script.py <input.srt> "<Video Title>" [output.md]
```

This produces a `script-[name].md` with one segment per SRT cue and exact voiceover text —
matching the format of the example scripts in `examples/`. The segment names will be generic
placeholders ("Segment 1", etc.) — rename them to meaningful scene names during Step 2 analysis.

If given raw voiceover text instead of an SRT, structure it manually into the same format.
See `references/design-doc-format.md` for the exact format and `examples/video-script-1.md`
as a reference.

---

## Step 2: Analyze Before Ideating

Before designing anything, extract from the script:

- **Core thesis** — what is the single idea being proven?
- **Emotional arc** — where does tension rise? where is relief? where is the climax?
- **Key terms** — which words/concepts deserve a dedicated visual metaphor?
- **Target viewer** — tech-savvy? general? what is their assumed anxiety or curiosity?
- **Video duration** — determines pacing budget per segment

This analysis drives every design decision. Never skip it.

---

## Step 3: Ideate the Design

This is the most important creative step. Think like a director, not a programmer.

### Core Design Decisions (make these first)

**1. Visual Identity**
- Choose a 2-3 color palette. Typically: 1 dark/neutral background + 1 blazing accent +
  1 secondary accent for "error/wrong" states
- Every color must have a *meaning* — train the viewer to associate it with an emotion
  (e.g., green = correct/progress, red = wrong/warning)
- Choose a single dominant typographic style (monospace/hacker, bold serif/editorial, clean sans)

**2. Dominant Visual Metaphor**
- What is the ONE central metaphor that visualizes the core thesis?
- This metaphor must be introduced in the hook and returned to at the resolution

**3. Pacing Architecture**
- These videos are relentlessly fast-paced — constant motion, no dead air, visuals always
  serving the voiceover rhythm. Study the example files to calibrate your instincts.
- No single static element should sit idle for more than ~22 frames (~0.73s at 30fps) without
  purpose. If nothing is moving, there must be a deliberate reason.
- Plan the tension curve: Hook → Build → Pattern Interrupt → Teach → Climax → Resolution → CTA
- See `references/editorial-patterns.md` for tension/relief patterns

**4. Motion Graphic Vocabulary**
- Decide on 2-3 signature animation moves t