Launch Video

Launch video creator

Builds a 30-60s motion-graphics launch video for a product or feature, end-to-end:

• Remotion 4 React composition rendered to MP4 (1920×1080 + 1080×1080)
• ElevenLabs AI narration (Bill voice by default), per-event sound

effects, and a background music bed

• Beat-anchored timing: every visual phase reads its start frame from

measured audio durations in script.timings.json. Edit copy → regen audio → all visuals auto-shift. No manual frame nudging.

• If your brand has a motion subsystem (glass/cursor/tool-pill components),

inherit from there. The reference patterns described below are one valid system: a glassmorphic motion subsystem (chat shells, cursor, tool pills) layered over a clean white tabular system (results tables, dashboards, traces).

If your repo has a reference Remotion project, point this skill at it. Otherwise the patterns described below stand alone. Reference implementation path in the source repo: ``.

---

When to use

Trigger on:

• "Create a launch video for X"
• "Make a launch video / product video / feature reveal"
• "Render a video for the [feature]"
• User explicitly types /launch-video

Skip for:

• Static social graphics → /graphics-designer
• Slide decks / webinars → your decks pipeline
• Short ad clips /

├── package.json # remotion 4 + react 19 + tsx + dotenv + mp3-duration ├── remotion.config.ts # publicDir → ../../brand/motion (single asset source) ├── tsconfig.json ├── SCRIPT.md # human-readable narration script (per beat) ├── .env # ELEVENLABSAPIKEY (gitignored!) ├── .env.example ├── generate-audio.ts # ElevenLabs narration runner, hash-cached per beat ├── generate-sfx.ts # ElevenLabs sound-generation runner, hash-cached ├── generate-music.ts # ElevenLabs music runner + leading-silence trim ├── script.timings.json # narration durations (generated) ├── sfx.timings.json # SFX durations (generated) ├── music.timings.json # music duration (generated) └── src/ ├── Root.tsx # registerRoot ├── Video.tsx # composition registry + LaunchVideoComposition wrapper ├── theme.ts # fps + duration + colors (mirrors ) ├── script.ts # narration beats (id, phase, text) ├── timings.ts # loader for script.timings.json + beatStartFrame() ├── sfx.ts # SFX clip definitions (anchored to frames) ├── music.ts # music prompt + volume ├── Narration.tsx # narration-only Sequence track ├── SoundDesign.tsx # narration + SFX + music combined └── scenes/ ├── HeroBackground.tsx # looped /video/hero-bg.mp4 ├── OpeningScene.tsx # the orchestration scene (anchors all phases) ├── GlassCursor.tsx # multiplayer-style "you" cursor ├── CompanyTable.tsx # populating data table with column reveals ├── AgentDashboard.tsx # Google-Calendar week view ├── AgentRunDetail.tsx # tool-call trace view ├── MemoryPanel.tsx # stats + sparkline dashboard ├── Confetti.tsx # particle burst └── ClosingCard.tsx # closing chat callback (the "Inviting" pattern)

Assets live in `brand/motion/`:
- `video/hero-bg.mp4` + poster (your brand's hero background loop · e.g.
  an ambient video at `brand/motion/video/hero-bg.mp4`)
- `logos/{models,tools,companies,sequencers}/` — third-party brand marks
- `audio/{launch-narration,sfx,music}/` — generated mp3s (committed for
  reproducible renders)
- `components/HeroChatMockup.tsx` — framework-agnostic chat shell

---

## Workflow for a new launch video

### 1. Brief

Get from the user:
- **Audience**: who is this for (GTM teams? Engineers? Investors?)
- **Runtime**: target seconds (default 30-45s; 60s+ feels long for hype)
- **Key messages**: 4-8 things to communicate, in narrative order
- **Output formats**: landscape (web/LinkedIn), square (IG/feed), or both

### 2. Outline beats

Each beat = one narration sentence that lands during one visual phase.
Typically **6-8 beats**. Sum of beat audio lengths = total runtime.
Beat lengths target **3-7s** each.

For each beat capture: `id`, `phase` (one-line visual description), `text`
(spoken line, 10-20 words).

### 3. Write SCRIPT.md

Save the script as a sibling of `package.json` for human review.
Format:

```md
## Beat N — Phase name
**Frames** ~start–end (seconds) · **target ~Nwords**

> "Spoken line here."

**Visual sync:** what happens on screen.

4. Build src/script.ts

Mirrors SCRIPT.md as data. The narration generator and the composition both import SCRIPT. No Remotion imports here so generators can run in plain Node:

export interface Beat { id: string; phase: string; text: string; }
export const SCRIPT: Beat[] = [...];
export const AUDIO_SUBDIR = "audio/launch-narration";
export function audioPath(id: string) { return `${AUDIO_SUBDIR}/${id}.mp3`; }

5. Generate narration

cd motion/
cp .env.example .env  # paste ELEVENLABS_API_KEY
npm install
npm run generate-audio

This creates brand/motion/audio/launch-narration/{beat-id}.mp3 and writes durations to script.timings.json. Hashes by beat text so unchanged beats are skipped on subsequent runs (cheap iteration).

6. Build the visual scene

In OpeningScene.tsx:

1. Compute beat starts at module load:

``ts const HERO_BEAT = beatStart("hero", 0); // → 0 const DATABASE_BEAT = beatStart("database", 0); // → 171 (after hero finishes) // ... etc ``

1. Express every animation frame as BEAT_X + offset:

``ts const BADGE_IN = HERO_BEAT + 6; const TYPE_START = HERO_BEAT + 38; const TOOLS_START = HERO_BEAT + 115; // synced to "GTM stack" lyric const CURSOR_PRESS = HERO_BEAT + 165; ``

1. Cross-fade between phase scenes using opacity gates per beat.

7. Generate SFX (optional but high-impact)

Define click/transition moments in src/sfx.ts. Anchor each clip to a specific fromFrame using the same beatStartFrame() helper. Example clips that earn their place:

• typing texture under prompt animation
• crisp click on cursor presses
• celebratory pop on "enroll" / completion moments
• subtle swell on closing card reveal

npm run generate-sfx

8. Generate music

Define one prompt + duration in src/music.ts. generate-music.ts trims leading silence automatically (ElevenLabs music often opens with a quiet bar that reads as "no music" against narration).

npm run generate-music

9. Iterate with renders

npm run render:landscape

Rendering takes ~30-90s. Always re-encode the output to yuv420p TV range for QuickTime compatibility — the bg video is yuvj420p (JPEG range) and the propagation breaks playback in some players:

ffmpeg -y -i out/launch-landscape.mp4 \
  -c:v libx264 -profile:v high -level:v 4.0 \
  -pix_fmt yuv420p -color_range tv -crf 18 -c:a copy \
  out/launch-landscape-fixed.mp4
mv out/launch-landscape-fixed.mp4 out/launch-landscape.mp4

Use ffmpeg -ss N -i ... -frames:v 1 /tmp/check.jpg to spot-check specific timestamps without watching the whole render.

---

Design rules

Voice (visual + spoken)

• Never use em dashes. Periods, commas, colons, parens, middot only.
• Banned words anywhere: leverage, synergy, robust, world-class,

seamless, intuitive, powerful, innovative.

• Numerals beat adjectives ("8 tools" not "many tools").
• Terse, concrete. No hedging.
• Closing: brand-led, not "Congrats." The strongest closing pattern

found here: "Inviting" kicker → chat input with a new prompt typed in → URL signature. The chat callback to the opening beats celebration every time.

Color (example tokens · adjust to your brand)

Light, neutral. One accent only, used once per scene where it earns meaning (live dot, highlight, success state).

| Token | Hex | Use | |---|---|---| | --bg | #fafafa | page bg | | --surface | #ffffff | cards, dashboards | | --ink | #0a0a0a | primary text + numerals | | --muted | #71717a | secondary text | | --line | #e4e4e7 | borders | | --accent | #10b981 | the one accent |

Typography

• Stack: 'Helvetica Neue', Helvetica, Arial, sans-serif
• Mono (kickers, code, labels): ui-monospace, 'SFMono-Regular', Menlo
• Hero typography: weight 450 with tight tracking (-0.05em)
• Mono kicker style: 11-14px, uppercase, letter-spacing 0.16-0.18em,

color #71717a or #a1a1aa

• Bold/medium parts in muted-grey body text mirror the brand pattern:

bold vs surrounding #71717a text.

Two visual modes

Pick one per scene; don't mix:

1. Glassmorphic / in-product — chat shell, cursor, tool pills,

over the hero bg video. White glass with backdrop-filter: blur(28px), rgba(255,255,255,0.45).

1. Clean white / tabular — tables, dashboards, traces, memory panel.

bg #ffffff, 1px solid #e4e4e7, subtle drop shadow.

The bg-fade transition between modes is one of the most cinematic moments; budget ~20-30 frames for it and use Easing.bezier(0.4, 0, 0.2, 1) (material standard) for smoothness.

---

Animation rules

1. Damping 22-28 on springs. Below 20 you get bounce that reads as

amateur. Use 14-18 only when you intentionally want a "pop".

1. Tighter staggers > slower. First instinct is always to slow down;

the second pass usually involves cutting staggers in half. Default stagger between cascading items: 3-6 frames.

1. Sync visuals to lyrics where it matters. If the narration says

"GTM stack", the tool pills should fly in on that word — not 3s before. Use with_timestamps from ElevenLabs for word-level sync, or estimate from beat duration / word count if approximate is fine.

1. Reserve row heights. When tables/cards animate text in,

minHeight on the row prevents layout from jumping as content fills. Looks janky if rows grow during the cascade.

1. **Conditional render rather than 0-opacity if it would create a tall

empty rectangle.** Cards that haven't started revealing yet should not occupy space.

1. Crossfade between scene modes, don't hard-cut. Each major scene

gets an opacity gate animated via interpolate + ease curves.

---

ElevenLabs gotchas

• Default voice + model: generate-audio.ts defaults to Bill

(pqHfZKP75CvOlQylNhV4) on eleven_multilingual_v2. Bill is the advertisement use-case voice in ElevenLabs' library: wise, mature, crisp. Reads as a real ad voiceover, not "AI guy on social media". multilingual_v2 is the most stable + lifelike model for production narration. Do not use eleven_turbo_v2_5 for launch videos — it's the fast/cheap model and the difference is audible against a hero bg video. Turbo is fine for previews / SFX timing checks, not the final render.

• Voice settings baked into the script: stability 0.40,

similarity_boost 0.75, style 0.30, use_speaker_boost true. Per ElevenLabs best-practices: stability under 0.30 is unstable, over 0.60 is monotone; similarity 0.75 is the docs sweet spot; style 0.20–0.40 adds expressiveness without drift. Don't push style above 0.4 unless you want noticeable inflection swings.

• Voice cache key includes voice + model + settings. Swapping any

of those (or editing beat text) invalidates the cached MP3 and re-renders the beat. Just edit .env (VOICE_ID=... MODEL_ID=...) or generate-audio.ts and re-run npm run generate-audio.

• Other narration-grade voices if Bill doesn't fit:
• Eric cjVigY5qzO86Huf0OWal — smooth, trustworthy, modern SaaS feel
• Chuck Miller HIGUfNOdjuWQwwapnTRW — pro clone, deep raspy, cinematic
• George JBFqnCBsd6RMkjVDRZzb — British storyteller, narrative_story
• Logan jD4PjnscE4XmlzgsuqY0 — pro clone, young storyteller
• Brian nPczCjzI2devNBz1zQrb — the legacy default; labeled social_media, reads more "AI" than Bill
• A/B sample these in your reference Remotion project before committing
• Voices listing requires voices_read permission. Some keys

don't have it; if you can't GET /v1/voices, fall back to known IDs.

• Music API rejects brand names in prompts. "Apple keynote",

"Linear launch trailer" etc. trigger a TOS violation. Describe the vibe without naming brands ("cinematic instrumental for a modern technology launch trailer", "pulsing electronic beat with arpeggiated synthesizer melody").

• Music starts with leading silence (~1-2s) by default. The

generator's silenceremove ffmpeg pass strips it so playback hits at frame 0. Keep that filter in place.

• Sound-effects minimum duration is 0.5s. Anything below that the

API errors. Round up.

• Music volume: 0.10 reads as silent under narration; 0.15-0.18

is the sweet spot — clearly there but doesn't fight the voice.

---

Pitfalls to avoid

1. Adding ` without `: it'll play continuously

from frame 0. Use ` or ` to place audio at specific positions.

1. Computing absolute frame constants that drift when audio changes.

Always express as BEAT_X + offset. Re-derives automatically when you regen audio.

1. JSON imports in Node generators: script.ts should not import

from remotion. Import staticFile lazily where needed.

1. Mixing too many accents. One accent per scene. If a scene has

both a play button and a check icon and a highlight, you've lost the focal point.

1. Studio scrub showing "blacked-out first 10s": that's a thumbnail

cache issue in Remotion Studio — the rendered MP4 has the visuals. Re-extract a frame with ffmpeg -ss N to verify.

1. API keys in chat/logs: rotate any key the user pastes into a

conversation. Always store in .env (gitignored).

1. Hard-coded prompt text in scenes: the same prompt may appear in

the visual chat input, the SCRIPT.md, and the audio narration. Keep the audio version in script.ts as the single source of truth and reference it from visuals where appropriate.

1. Closing on "Congrats.": the audience remembers the brand, not

the celebration. Close with the chat callback + brand stamp.

---

Reusable scenes (copy & adapt)

The scene library is written to be reusable. For a new launch video, copy what fits and edit data + copy:

| Component | Use for | |---|---| | HeroBackground | The looped hero background video | | GlassCursor | Multiplayer-style "you" cursor with label pill | | CompanyTable | Any populating tabular content with cascading columns | | AgentDashboard | Google-Calendar week-view with event cards | | AgentRunDetail | Step-by-step tool-call trace with reasoning headers | | MemoryPanel | Stats + dashboard preview pattern | | Confetti | Celebration burst (use sparingly, once per video max) | | ClosingCard | The "Inviting" chat callback closing pattern | | HeroChatMockup (in brand/motion) | Standalone chat shell for stills/static use |

For new components, follow the same pattern:

• Props for frame anchors (cardInFrame, firstRowFrame, rowStagger)
• Inline styles in TSX (no separate CSS file — assets resolve via staticFile)
• All animation values via spring, interpolate, or interpolate with

Easing.bezier for smooth curves

---

Starting a new launch video — concrete steps

# 1. Scaffold the project (or copy a reference Remotion project)
cp -R motion/launch-video motion/
cd motion/

# 2. Reset state
rm -rf node_modules out
rm script.timings.json sfx.timings.json music.timings.json
echo "{}" > script.timings.json
echo "{}" > sfx.timings.json
echo "{}" > music.timings.json
rm -rf ../../brand/motion/audio/launch-narration/* \
       ../../brand/motion/audio/sfx/* \
       ../../brand/motion/audio/music/*

# 3. Install +

…

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [timscheuerai](https://github.com/timscheuerai)
- **Source:** [timscheuerai/content-vault](https://github.com/timscheuerai/content-vault)
- **License:** MIT

Install and usage instructions live in the source repository linked above.