Spec — Video 001 Overlay Renders

Port 9 HTML-mockup components to a single Remotion composition (Video001Overlay) and render 16 individual WebM clips with alpha transparency. These overlay clips compose over HeyGen digital twin footage in post-production via FFmpeg.

# Decisions

Render Strategy

Individual Clips

HeyGen blocked. Clips give flexibility to iterate without re-rendering everything.

Output Format

WebM VP9 + Alpha

Transparent overlays. FFmpeg overlay filter compatible. Remotion native support.

Architecture

Single Composition

One entry point, props switch by component type. Clean, Lambda-compatible.

Resolution

1920x1080 @ 30fps

YouTube landscape format matching production manifest.

# Architecture

File Structure

remotion/src/ Video001Overlay.tsx // Main composition (switch by component) components/video001/ theme.ts // Palette, fonts, constants animations.ts // fadeIn, scaleUp, stagger helpers KeyTerm.tsx // Bold text center/lower-third (P0) SectionTitle.tsx // Full-screen title card (P0) BigNumber.tsx // Large number + subtitle (P0) WaveformSubtitles.tsx // Robot logo + waveform + subs (P0) WaveformClean.tsx // Simple waveform + text (P0) ContrastCard.tsx // Two-column comparison (P1) HierarchyList.tsx // Staggered list items (P1) ChatBubble.tsx // Telegram bubble + typing (P1) CTACard.tsx // Logo + text + subtitle (P1) Root.tsx // + register Video001Overlay

Props Union Type

type Video001Props =
  | { component: 'KeyTerm';           text: string; position: 'center' | 'lower-third'; color?: string; duration: number }
  | { component: 'SectionTitle';      text: string; accentColor?: string; duration: number }
  | { component: 'BigNumber';         number: string; subtitle: string; color?: string; duration: number }
  | { component: 'WaveformSubtitles'; audioFile: string; highlightWords: string[]; duration: number }
  | { component: 'WaveformClean';     audioFile: string; subtitle: string; duration: number }
  | { component: 'ContrastCard';      left: string; right: string; duration: number }
  | { component: 'HierarchyList';     items: string[]; staggerMs?: number; duration: number }
  | { component: 'ChatBubble';        message: string; duration: number }
  | { component: 'CTACard';           logoFile: string; text: string; subtitle: string; duration: number }
      

Theme

#1C1C1E bg

#F5F5F7 text

#D4A853 gold

#5B8DEF blue

#E85D4A red

#D77655 claude

Fonts: Inter (sans) + Playfair Display (serif) + JetBrains Mono. Animations: fadeIn 300ms ease-out via Easing.out(Easing.cubic).

# Component Designs

WaveformSubtitles P0 HERO — 16s

Background: Claude Code robot pixel logo centered (~55% width), dimmed to 0.7 brightness. Gold radial glow pulsing behind it.
Badge: Top-left "CLAUDE CODE — SPEAKING" with green pulsing dot.
Waveform: Gold bars driven by getAudioData() frame-by-frame from audio_no_soy_miles.mp3.
Subtitles: White Inter Bold, highlights in red for "mis proyectos", "Yo lo construi", "cerebro central".

KeyTerm P0

Bold text overlay. Center: ~80px, word-by-word stagger 150ms. Lower-third: ~42px, single fadeIn 300ms at bottom 12%. Color overridable (gold, blue, white).

SectionTitle P0

Centered with accent line (3px, 60px) above. Uppercase Inter 800, letter-spacing 0.08em. FadeIn 300ms. Gold or blue accent per scene mood.

BigNumber P0

~200px number, scale-up 0.8 to 1.0 (350ms spring). Subtitle below in secondary color, fadeIn 150ms delay.

WaveformClean P0

Simple gold waveform bars + Playfair Display italic subtitle. No logo. For short 6s audio clip.

ContrastCard P1

Two columns: left gray with line-through red, right gold border. "VS" between. Staggered: left, VS 150ms, right 300ms.

HierarchyList P1

3 items, #2C2C2E cards with blue left border. Numbers + text. Stagger 200ms slideInLeft.

ChatBubble P1

Telegram dark bubble, spring entrance (0.85 to 1.0). Sender blue, timestamp with checks. Typing dots at 400ms.

CTACard P1

Logo + "AI4Managers" + subtitle + gold button. Staggered 100ms intervals.

# Render Plan — 16 Clips

#	Component	Scene	Duration	Key Props
1	KeyTerm	hook	2.5s	"TU AGENTE ES MIO", center, white
2	SectionTitle	contexto	2s	"CLAUDE CODE x TELEGRAM", gold
3	KeyTerm	contexto	2.5s	"No es un chatbot.", lower-third
4	KeyTerm	setup_voz	2s	"Elegi su propia voz", lower-third
5	BigNumber	setup_voz	2s	"7", "agentes construidos juntos"
6	WaveformClean	setup_voz	6s	audio_voz_elegida.mp3
7	ChatBubble	la_pregunta	2s	"Tu eres Miles?"
8	KeyTerm	la_pregunta	2s	"Miles = mi agente principal"
9	WaveformSubtitles	el_giro	16s	audio_no_soy_miles.mp3 + highlights
10	SectionTitle	angulo1	1.5s	"APROPIACION", gold
11	ContrastCard	angulo1	4s	tachado vs gold
12	KeyTerm	angulo1	3s	"Esto es mio, yo me encargo", gold
13	SectionTitle	angulo2	1.5s	"LA INQUIETUD", blue
14	HierarchyList	angulo2	5s	3 items (contratos, IP, ownership)
15	KeyTerm	angulo2	4s	"VIRTUD O PROBLEMA?", blue
16	CTACard	cierre	3s	Agent Squad logo, "AI4Managers"

Total overlay time: ~56 seconds across 16 clips.

# Render Pipeline

Render Script

// render_video001.mjs — renders all 16 clips
node render_video001.mjs [--local]

// Per clip:
1. Build props JSON from clip table
2. Call lambda_render.mjs with --codec=vp8 (WebM alpha)
3. Download to playgrounds/video-001/renders/clip-XX-[component].webm
4. Log duration + file size
      

Output

playgrounds/video-001/renders/ clip-01-keyterm-hook.webm clip-02-sectiontitle-contexto.webm ... clip-09-waveform-subtitles-giro.webm // hero clip ... clip-16-ctacard-cierre.webm

Post-Production (FFmpeg)

ffmpeg -i heygen_scene.mp4 -i clip-XX-component.webm \
  -filter_complex "[1:v]setpts=PTS+START/TB[ov];[0:v][ov]overlay=0:0" \
  -c:a copy output_scene.mp4
      

# Assets

🤖claude-code-logo.png185KBWaveformSubtitles

🔊audio_voz_elegida.mp3179KBWaveformClean (#6)

🔊audio_no_soy_miles.mp3531KBWaveformSubtitles (#9)

🖼tweet_thariq_thumb.jpg50KBScreenshot layer (not rendered)

🖼telegram_screenshot.png956KBScreenshot layer (not rendered)

🏷agentsquad-logo-white-on-dark.png20KBCTACard (#16)

# Interactive Preview

All 10 components animated with the approved WaveformSubtitles design (robot pixel as speaker):

▶ Open Component Preview