Claude Sonnet 4.6
📚 Education
Intermediate
Education Explainer Video
Turn any topic into a full animated explainer video. Just change the topic — Claude researches it, writes the script, designs the scenes, and animates everything.
The Prompt
* Before running this prompt - Open a Terminal and run the following:
npx skills add remotion-dev/skills # This will install all Remotion Skills
Use the Remotion best practices skill.
Create an educational explainer video (1080x1920, 30fps, 30 seconds) that teaches [How AI Agents Work].
SAFE ZONE: All text and key content must stay within the safe zone — at least 150px from the top (platform search bars, status bar) and 170px from the bottom (navigation buttons, swipe-up UI). Side margins: 60px minimum. Nothing important should touch the edges. MINIMUM FONT SIZES: Headlines 56px+, body/subtitles 36px+, labels/small text 28px absolute minimum. Nothing under 28px — it’s unreadable on mobile.
STEP 1 — RESEARCH & SCRIPT: Before writing any code, research the topic and write a 5-scene script. Each scene needs: a one-line headline, 1-2 sentences of explanation, and a visual description of what to animate. Show me the script and wait for approval before coding.
STEP 2 — DESIGN & ANIMATE: After I approve the script, build all 5 scenes with these specs:
VISUAL STYLE:
- Background: #0a0a0a
- Primary text: white
- Accent: #6366f1 (indigo)
- Success/emphasis: #22c55e (green)
- Font: Inter (weights 400, 600, 800)
- All icons/diagrams built as SVG components (no external assets needed)
ANIMATION RULES:
- Every element enters with spring({ damping: 200 }) — no linear motion
- Stagger related items by 8-12 frames
- Use TransitionSeries with 12-frame fade transitions between scenes
- Diagrams and flowcharts should draw themselves (SVG stroke-dashoffset animation)
- Key numbers use count-up animation with interpolate() and tabular-nums
- Final scene: particle effect background (10-15 circles drifting upward)
Each scene should have a clear visual metaphor — diagrams, flowcharts, icons, or step-by-step animations. No walls of text. Think Kurzgesagt meets Fireship: dense information, beautiful motion, fast pacing.
PREVIEW: After building, launch Remotion Studio (npx remotion studio) so I can preview the video in my browser.
📝 Fill in the blanks
Replace these placeholders with your own content:
[How AI Agents Work]
How to use this prompt
1
Copy the prompt
Click "Copy Prompt" above to copy the full prompt text to your clipboard.
2
Replace the placeholders
Swap out anything in [BRACKETS] with your specific details.
3
Paste into Claude Sonnet 4.6
Open your preferred AI assistant and paste the prompt to get started.