video/remotion-composer/SCENE_TYPES.md

Remotion Composer — Scene & Overlay Cheat Sheet

Authoritative list of cut.type and overlay.type values the Explainer composition accepts. Each row maps to a dispatch case in src/Explainer.tsx.

When you add a new component, append it here and in src/components/index.ts.

---

Cut types (cut.type)

type	Component	Required fields	Common fields	Purpose
(none — video)	OffthreadVideo	source (path to mp4)	source_in_seconds, animation (zoom-in, ken-burns), in_seconds, out_seconds	Play an MP4 clip directly
(none — image)	Img	source (path to png/jpg)	animation, in_seconds, out_seconds	Play a still with Ken Burns
text_card	TextCard	text	fontSize, backgroundVideo, backgroundOverlay, color	Large-typography beat
hero_title	HeroTitle	text	heroSubtitle, backgroundVideo, backgroundOverlay	Title/end card
stat_card	StatCard	stat	subtitle, accentColor, backgroundVideo	A single big number
callout	CalloutBox	text	callout_type (info/warning/tip/quote), title, backgroundVideo	Boxed message with bullets
comparison	ComparisonCard	leftLabel, leftValue, rightLabel, rightValue	title, backgroundColor	Side-by-side compare
bar_chart	BarChart	chartData	chartAnimation, showValues, showGrid, backgroundVideo	Animated bars
line_chart	LineChart	chartSeries	chartAnimation, xLabel, yLabel, showMarkers	Animated line
pie_chart	PieChart	chartData	donut, centerLabel, centerValue, showLegend	Pie / donut
kpi_grid	KPIGrid	chartData	title, columns, chartAnimation	2–4 column KPI grid
progress_bar	ProgressBar	progress	progressLabel, progressColor, progressSegments	Animated progress
anime_scene	AnimeScene	images (list)	particles, lightingFrom, lightingTo, vignette	Still-image anime scene with particles + camera motion
terminal_scene	TerminalScene	steps (list of cmd/out/pause/pill)	terminalTitle, prompt, accentColor	Synthetic terminal animation — NO real capture needed. See .agents/skills/synthetic-screen-recording/SKILL.md
screenshot_scene	ScreenshotScene	backgroundImage (path in public/), screenshotSteps (list of overlays)	screenshotSize (natural px w/h), cursorStartAt, accentColor	Approach-1 synthetic UI — drop any screenshot, animate scripted overlays on top (cursor, click_pulse, type_into, bubble_append, typing_dots, highlight_box, callout_balloon). Viewer-indistinguishable from a real recording for 15–30s focused demos. Coordinates are normalized (0–1) against the contain-fit rect. See .agents/skills/synthetic-ui-recording/SKILL.md (planned).

---

Overlay types (overlay.type)

type	Component	Required fields	Common fields	Purpose
section_title	SectionTitle	text	accentColor, position (top-left, etc.)	Tiny section label
stat_reveal	StatReveal	text	subtitle, accentColor, position	Corner stat badge
hero_title	HeroTitle (as overlay)	text	subtitle	Full-frame title overlay
provider_chip	ProviderChip	providers (list of strings)	cycleSeconds, position, accentColor, label	Rotating badge that cycles through provider names — used in AI-generated-motion scenes to show which model produced the clip

---

Adding a new scene type

1. Create the React component in src/components/MyScene.tsx. Use interpolate(frame, [inFrame, outFrame], [from, to]) and spring(...) for motion. Read useCurrentFrame() and useVideoConfig().
2. Export it in src/components/index.ts.
3. Add the type to the Cut interface in src/Explainer.tsx (and any new prop fields).
4. Add a dispatch case in SceneRenderer:

   if (cut.type === "my_scene" && cut.mySceneData) {
     return maybeWrapWithBg(<MyScene ... />);
   }
   

5. Document it in this file. That's what makes it discoverable to the next agent.

Existing synthetic-UI components

Currently only TerminalScene exists. The pattern generalizes — likely candidates to add next, if a pipeline needs them:

• ChatTranscript — Claude/Cursor/GPT chat-bubble timeline with typing animation
• EditorScene — VS Code-style code editor with syntax highlight + cursor motion
• PrReview — GitHub PR diff view with inline-comment reveals
• SlackThread — Slack thread with avatars + reaction pops
• TicketBoard — Jira / Linear card moving across columns

Pattern: follow TerminalScene.tsx — a steps list of timeline primitives, cursor-advancing durations, spring-based reveals, optional non-blocking pills/badges.