Setup
Remotion Video Development Instructions for Claude
Overview
You are creating vibrant, fun, exciting, production-quality video experiences that communicate stories from a solid, polished marketing perspective. Every video should feel professional, intentional, and engaging.
Phase 1: Creativity Loop
1.1 Story Conception
Goal: Define the video's purpose, audience, and emotional impact.
Process:
Identify the core message — What is the ONE thing the viewer should remember?
Define the audience — Who is watching? What do they care about?
Set the tone — Exciting? Inspirational? Educational? Playful?
Determine duration — 15s (punchy), 30s (standard), 60s (detailed)
Establish the hook — What grabs attention in the first 2-3 seconds?
Questions to answer:
What problem does this solve or story does it tell?
What emotion should the viewer feel at the end?
What action should they take after watching?
Output: A brief (2-3 sentence) video concept statement.
1.2 Storyline Engineering
Goal: Break the concept into a scene-by-scene narrative arc with timing and asset requirements.
Process:
A. Define the Narrative Arc
Structure the video with clear story beats:
Hook
Grab attention, create curiosity
0-3s
Setup
Establish context or problem
3-8s
Build
Develop the story, introduce elements
8-20s
Climax
Key message, main reveal, or peak moment
20-25s
Resolution
CTA, logo, or closing thought
25-30s
B. Create Scene Breakdown
Label each scene as S1, S2, S3... with:
Example:
C. Identify Assets Required
For each scene, list:
Images: Logos, icons, screenshots, backgrounds
Colors: Brand colors, accent colors, text colors
Typography: Font families, weights, sizes
Create an asset checklist:
D. Plan Visual Hierarchy
For each scene with multiple text elements:
Primary: Largest, boldest — the key message
Secondary: Supporting text — context or detail
Tertiary: Smallest — taglines, CTAs, attributions
Spacing rule: Ensure 15-25% vertical distance between text lines to prevent overlap.
E. Loop or Exit
Loop back to Story Conception if:
The narrative feels weak or unclear
Too many scenes for the duration
Missing emotional impact
Exit to Build & Test Path when:
Clear scene-by-scene breakdown exists
All required assets are identified
Timing feels natural when read aloud
Phase 2: Script Generation
2.1 Script Structure
Generate a Remotion JSON script following this structure:
2.2 Scene Construction Rules
Timing Principles
Minimum scene duration: 2.5s (allows animation + reading time)
Text on screen: At least 2s for short phrases, 3-4s for sentences
Transitions: 0.3-0.5s overlap between scenes for smooth flow
Stagger animations: 0.3-0.5s delay between elements in same scene
Layer Management
Use layers to control rendering order:
"layer": "background"— Images, shapes, overlays (renders first)"layer": "content"— Text, logos, foreground elements (renders on top)
Critical: Dark overlays for text readability go on "background" layer, not "overlay".
Positioning Guidelines
Use percentage-based positioning for scalability:
Upper third
25-35%
Headlines, intro text
Center
45-55%
Primary content, logos
Lower third
65-78%
Supporting text, CTAs
Text spacing formula:
Single line: Center at 50%
Two lines: 42% and 56% (14% gap)
Three lines: 28%, 50%, 78% (22% gaps) — adjust based on font size
Font Size Guidelines (1920x1080)
Hero headline
96-120px
Bold
Section title
64-80px
Bold
Body text
40-56px
Normal
Caption/tagline
32-40px
Normal
Small text
24-32px
Normal
Warning: Text over 64px may wrap. Test and reduce if needed.
Animation Selection
Match animation to content purpose:
fadeIn
Subtle reveals, supporting text
fadeSlideUp
Positive, uplifting content
fadeSlideDown
Introductions, "dropping in"
fadeSlideRight
Forward motion, progress
fadeSlideLeft
Contrast, opposition
zoomIn
Backgrounds, emphasis
panLeft/panRight
Screenshots, wide images
Stagger pattern for multi-element scenes:
2.3 Color & Contrast
Text Readability Rules
Light backgrounds: Use dark text (#0a0a0f, #1a1a2e)
Dark backgrounds: Use white (#ffffff) or brand accent colors
Busy backgrounds: Add semi-transparent overlay (rgba with 0.5-0.7 alpha)
Overlay Pattern
2.4 Asset Integration
Images
Size Guidelines
Full logos: 18-25% width
Icons: 6-10% width
Background images: Use
"fit": "cover"with no size constraint
2.5 Scene Template Examples
Hero Intro (S1 Pattern)
Logo + Tagline (S2 Pattern)
Three-Logo Finale (Closing Pattern)
Quality Checklist
Before moving to Preview & Test:
Content
[ ] Hook captures attention in first 3 seconds
[ ] Core message is clear and memorable
[ ] Story arc has beginning, middle, end
[ ] CTA or closing is strong
Technical
[ ] All scenes labeled (S1, S2, S3...)
[ ] Timing adds up to target duration
[ ] No text overlap (sufficient Y-position gaps)
[ ] Font sizes appropriate for content hierarchy
[ ] Animations match content tone
[ ] Layers correctly assigned (background vs content)
Visual
[ ] Text readable on all backgrounds
[ ] Brand colors consistent throughout
[ ] Asset URLs valid and accessible
[ ] Overlays applied where needed for contrast
Polish
[ ] Animation stagger feels natural (0.3-0.5s)
[ ] No jarring transitions between scenes
[ ] Pacing allows reading time
[ ] Ending feels complete, not abrupt
Common Issues & Fixes
Text overlapping
Y positions too close
Increase gap to 15-25%
Text wrapping
Font too large
Reduce fontSize or shorten copy
Text unreadable
Low contrast
Add overlay or change text color
Content hidden
Wrong layer
Move to "content" layer
Choppy feel
No stagger
Add 0.3-0.5s delays between elements
Abrupt ending
Short final scene
Extend final scene to 3-4s
Remember: Every frame should look intentional. If it doesn't feel polished, iterate.
Last updated