When to use
Use this skill when the user wants to create:
Educational Tutorial Videos - Research a topic and create an animated explainer
Example: "Create a tutorial about the lifecycle of a butterfly for grade 3 students"
SaaS Walkthrough Demos - Showcase software features with animated UI
Example: "Create a demo video showing how to use Notion's database feature"
Product Launch Announcements - Marketing videos with motion graphics
Example: "Create a launch video announcing our new AI-powered search feature"
Tutorial / Walkthrough Videos - Step-by-step guides with cursor animations
Example: "Create a tutorial showing how to set up a project in our app"
Social Media Promo Videos - Short, punchy kinetic text videos for ads
Example: "Create a 15-second Instagram ad for our fitness app"
App/Product Showcase Videos - Kinetic text combined with floating UI mockups
Example: "Create a promo showing our crypto exchange interface"
Landing Page Reveal Videos - Design-tool aesthetic with webpage animations
Example: "Create a video showcasing our new SaaS landing page design" Video Production Workflow
Follow this pipeline for all video types:
- UNDERSTAND → 2. RESEARCH → 3. SCRIPT → 4. SCENES → 5. AUDIO → 6. ANIMATE
Step 1: Understand the Request
Identify:
Video type: Educational tutorial, SaaS demo, product launch, tutorial/walkthrough, social promo, app showcase, landing page reveal, or AI explainer? Target audience: Age, expertise level, context Tone: Educational, professional, energetic, playful, dramatic, minimal Duration: Ultra-short (5-15s), short (30-60s), medium (1-3min), or long (3-5min) Format: Widescreen 16:9 (1920x1080), square 1:1 (1080x1080), or vertical 9:16 (1080x1920) Visual style: Dark dramatic, soft gradient, clean minimal, or design tool aesthetic Step 2: Research (for tutorials and demos)
For educational content:
Search for accurate, up-to-date information Use reliable sources (official docs, educational sites) Gather key facts, statistics, or steps to explain
For SaaS demos:
Explore the product to understand features Capture screenshots or note UI patterns Identify the key workflow to demonstrate Step 3: Write the Script
Write a complete voiceover script BEFORE generating audio. Structure varies by video type (see below).
Step 4: Plan Scenes
Break the script into visual segments:
Each scene = one key idea or step Note what visuals accompany each line Plan transitions between scenes Step 5: Generate Audio
Use Resemble.ai to generate the voiceover (see setup below).
Step 6: Create Animations
Build the Remotion composition with animations synchronized to the audio.
Video Type: Educational Tutorial
Goal: Explain a concept clearly for a specific audience level.
Script Structure HOOK (5-10s) "Have you ever wondered how a caterpillar becomes a butterfly?"
INTRODUCTION (10-15s) Set context and preview what they'll learn.
BODY (main content, broken into 3-5 key points) - Point 1: Explain with visual metaphor - Point 2: Build on previous point - Point 3: Add detail or example - ...
RECAP (10-15s) Summarize the key takeaways.
OUTRO (5s) Call to action or closing thought.
Audience Adaptation Audience Language Style Visuals Grade K-2 Very simple, playful, 5-word sentences Bright colors, cute characters, big shapes Grade 3-5 Simple but informative, analogies Clear diagrams, step-by-step, moderate pace Grade 6-8 More vocabulary, cause-effect Charts, labeled diagrams, faster pace High School+ Technical terms OK, nuance Data viz, detailed graphics Adults Professional, concise Clean design, infographics Animation Patterns for Tutorials Reveals: Fade in elements as narrator mentions them Transformations: Morph shapes to show change (caterpillar → butterfly) Diagrams: Animated labels, arrows pointing to parts Timelines: Progress bars, step indicators Comparisons: Side-by-side with highlighting Example Scene Plan Script: "First, the butterfly lays tiny eggs on a leaf."
Scene 1: - Visual: Leaf appears (slide in from bottom, spring animation) - Visual: Small eggs fade in on leaf - Timing: Sync "eggs" word with eggs appearing - Duration: 4 seconds
Video Type: SaaS Walkthrough Demo
Goal: Show users how to accomplish a task in software.
Script Structure HOOK (5-10s) "Let me show you how to [accomplish goal] in [Product]."
CONTEXT (10s) Why this feature matters, what problem it solves.
WALKTHROUGH (main content) - Step 1: Navigate to X - Step 2: Click on Y - Step 3: Configure Z - ...
RESULT (10s) Show the outcome, the finished state.
OUTRO (5-10s) Recap benefit, suggest next steps.
Visual Elements UI Mockups: Stylized representations of the interface Cursor animations: Animated pointer moving to click targets Highlights: Glowing borders around buttons/fields being discussed Zoom effects: Focus on specific areas of the UI Callouts: Text labels pointing to UI elements Animation Patterns for Demos Cursor movement: Smooth bezier curves, slight pause before click Click effect: Ripple or pulse on click Field focus: Highlight border, slight scale up Typing animation: Characters appearing in input fields Transition: Slide or fade between screens Callout arrows: Animate in, point to element, fade out Example Scene Plan Script: "Click the blue 'New Database' button in the sidebar."
Scene: - Visual: UI mockup of sidebar - Animation: Cursor moves to button (0.8s ease-out) - Animation: Button highlights with glow - Animation: Click ripple effect - Animation: New panel slides in from right - Duration: 3 seconds
Video Type: Product Launch Announcement
Goal: Generate excitement about a new product or feature.
Script Structure HOOK (5-10s) Bold statement or question that grabs attention.
PROBLEM (10-15s) What pain point does this solve?
SOLUTION REVEAL (10-15s) Introduce the product/feature dramatically.
KEY FEATURES (20-40s) 3-5 punchy feature highlights with visuals.
SOCIAL PROOF (optional, 10s) Stats, testimonials, or credibility markers.
CALL TO ACTION (5-10s) What should viewers do next?
Visual Style Bold typography: Large text, kinetic type animations Brand colors: Use product's color palette consistently Icons and graphics: Abstract shapes, feature icons High energy: Faster cuts, dynamic movement Logo reveal: Animated logo at end Animation Patterns for Launches Text slams: Words slam in with impact Kinetic typography: Words that move, scale, rotate Counter animations: Numbers counting up (users, revenue, etc.) Icon sequences: Features appearing with bounce/spring Gradient backgrounds: Slowly shifting color gradients Particle effects: Subtle sparkles, floating shapes Logo reveal: Scale up, fade in, or assemble from pieces Example Scene Plan Script: "Introducing Smart Search — find anything in milliseconds."
Scene: - Visual: Dark background with gradient - Animation: "Introducing" fades in (0.5s) - Animation: "Smart Search" slams in large, bold (0.3s, with shake) - Animation: Tagline types out below (typewriter, 1.5s) - Animation: Search icon pulses - Duration: 4 seconds
Video Type: Tutorial / Walkthrough
Goal: Teach users how to accomplish a task with clear step-by-step visual guidance.
Script Structure INTRO (3-5s) "Here's how to [accomplish goal] in [Product]."
STEP 1 (10-20s) First action with clear visual demonstration.
STEP 2 (10-20s) Second action, building on previous step.
STEP 3+ (10-20s each) Continue through workflow...
SUCCESS STATE (5-10s) Show completion, celebrate the outcome.
RECAP (optional, 5s) Quick summary of what was accomplished.
Visual Style Light, clean backgrounds: Off-white (#fafafa), cream, or light gray Full UI context: Show the complete interface, not just fragments Progress indicators: Step breadcrumbs, numbered stages (1 → 2 → 3) Cursor as guide: Smooth cursor movement leads the viewer's eye Success celebration: Green checkmarks, confetti, or branded success screens Minimal distractions: Focus on the task, avoid decorative elements Animation Patterns for Tutorials Cursor choreography: Smooth bezier paths with slight pause before clicks Click feedback: Subtle ripple or highlight on click Form field focus: Border glow when field is active Typing simulation: Text appears character-by-character in inputs Step transitions: Gentle crossfade or slide between screens Progress updates: Breadcrumb/step indicator animates forward Success burst: Checkmark scales in with bounce, optional confetti Panel reveals: Sidebars or dropdowns slide in smoothly Visual Elements Breadcrumb navigation: "← 1. Intent → 2. Seed Idea → 3. Sketchpad" Form inputs: Placeholder text, labels, validation states Buttons: Clear CTAs with hover/active states shown Sidebars/panels: AI suggestions, settings, or tool palettes Success screens: Full-color background with icon + message Example Scene Plan Script: "First, enter what your lesson is about."
Scene 1 - Setup (2s): - Visual: Full app interface, light background - Visual: Breadcrumb shows "2. Seed Idea" active - Animation: Screen fades in
Scene 2 - Interaction (4s): - Visual: Form with "Enter a concept or theme:" label - Animation: Cursor moves to input field (0.6s ease-out) - Animation: Field border highlights blue - Animation: "The Secret Lives of Mushrooms" types in (2s) - Animation: Cursor moves to "Continue" button
Scene 3 - Transition (2s): - Animation: Button highlights on hover - Animation: Click ripple effect - Animation: Screen slides left, new panel slides in
Scene 4 - Result (3s): - Visual: Sketchpad view with AI suggestions panel - Animation: Suggestion cards stagger in (0.15s delay each) - Animation: "Lesson Flow" section populates
Scene 5 - Success (3s): - Visual: Green full-screen background - Animation: White circle scales in (spring) - Animation: Checkmark draws inside circle - Animation: "Your lesson is live!" fades in below - Animation: Subtitle "Ready to inspire wonder and discovery" fades in
Tutorial Pacing Guidelines Step Complexity Duration Notes Simple click 2-3s Click and immediate result Form input 4-6s Type + submit Multi-field form 8-12s Multiple inputs Complex workflow 15-20s Several sub-steps Success state 3-5s Let it breathe Tips for Effective Tutorials One action per scene — Don't rush multiple clicks together Pause on results — Let viewers see the outcome before moving on Highlight what changes — Use subtle glow or scale on new elements Match narration to action — Click happens as narrator says "click" Show the whole UI — Context helps users orient themselves End with celebration — Success states reinforce completion Video Type: Social Media Promo
Goal: Grab attention fast with bold kinetic text for ads and social content.
Script Structure HOOK (1-3s) Single powerful word or phrase that stops the scroll.
VALUE PROP (3-5s) What's in it for them? One punchy sentence.
FEATURE FLASH (5-10s) 2-3 key benefits, rapid fire.
CTA (2-3s) Clear action: "Download now", "Try free", URL
Visual Style Minimal backgrounds: Solid colors or simple gradients Maximum contrast: Dark bg + white text OR colored bg + white text Word-by-word reveals: Each word gets its own moment Color transitions: Background color shifts between scenes Square format: 1080x1080 for Instagram/social feeds Animation Patterns for Social Promos Word slam: Single words appear with impact (scale 1.2→1 + slight shake) Background flash: Instant color changes between words/phrases Text scaling: Words grow large then shrink to make room for next Minimal motion: Let bold typography do the work Fast cuts: 0.5-1s per word/phrase maximum Example Scene Plan Script: "We are ready."
Scene sequence (4 seconds total): - Frame 1: Black bg, "WE" slams in white (0.8s) - Frame 2: White bg, "A" appears black, centered (0.8s) - Frame 3: Red bg, "R" types out, becomes "READY" (1.6s) - Frame 4: Hold final frame (0.8s)
Duration Guidelines Platform Ideal Length Max Length Instagram Reels 15-30s 90s TikTok 15-60s 3min Twitter/X 15-45s 2min 20s LinkedIn 30s-1min 10min YouTube Shorts 15-60s 60s Video Type: App/Product Showcase
Goal: Demonstrate a product's interface with cinematic flair, combining text and UI.
Script Structure HOOK (3-5s) Problem statement or intriguing question.
INTRODUCE PRODUCT (5-10s) Show the product name/logo, establish brand.
FEATURE TOUR (20-40s) Walk through 3-5 key features with UI demonstrations.
BENEFIT SUMMARY (5-10s) Recap what makes it special.
CTA (5s) URL, app store badge, or next step.
Visual Style Dark gradient backgrounds: Black to purple/blue for tech products Soft gradient backgrounds: Pastels (pink, lavender, mint) for friendly apps Floating UI mockups: App screens at slight angles with shadows Kinetic text alongside UI: Text appears next to or above interface Cursor interactions: Show clicks, scrolls, typing within the UI Animation Patterns for App Showcases URL bar typing: Browser address bar with typewriter effect UI slide-in: App mockups slide in from bottom or side with spring Perspective tilt: UI has subtle 3D rotation (5-10 degrees) Glow effects: Subtle glow/bloom around UI elements Cursor choreography: Smooth bezier movement with click ripples List reveals: Items in lists appear with stagger (0.1s delay each) Token/icon grids: App icons or crypto tokens arranged in grid Example Scene Plan Script: "Earn the best yields on your crypto."
Scene 1 (3s): - Visual: Soft purple gradient background - Animation: Text "Earn the best" fades in, "yields" appears in accent color - Timing: Words sync with voiceover
Scene 2 (4s): - Visual: Browser URL bar appears (rounded rectangle) - Animation: "jumper.exchange/" types out character by character - Animation: Cursor blinks at end
Scene 3 (5s): - Visual: App UI mockup slides up from bottom - Animation: Token list (USDC, ETH, LINK) reveals with stagger - Animation: Cursor moves to highlight token row
Video Type: Landing Page Reveal
Goal: Showcase a website design with dramatic designer-tool aesthetics.
Script Structure INTRO (3-5s) Establish the problem or context.
DESIGN REVEAL (10-20s) Dramatic entrance of the landing page.
FEATURE CALLOUTS (15-30s) Highlight specific sections of the page.
CTA (5-10s) "Book a demo", "Get started", with URL.
Visual Style Design tool aesthetic: Grid lines, guides, rulers visible Neutral backgrounds: Light gray (#f5f5f5) or dark charcoal (#1a1a1a) Full webpage mockups: Complete landing page in browser frame Light beams/lens flares: Dramatic reveal lighting Bento grid layouts: UI components arranged in grid formation Animation Patterns for Landing Page Reveals Grid appearance: Dotted guide lines fade in first Element construction: Blue rectangles represent elements before they "become" real UI Light sweep: Diagonal light beam crosses the design Zoom and pan: Camera movement across the page Component highlights: Sections glow or lift when discussed Browser frame: Chrome/Safari browser chrome for context Example Scene Plan Script: "Achieve team harmony with TeamFusion."
Scene 1 (2s): - Visual: Dark background, grid lines appear (dashed, gray) - Animation: Blue rectangle placeholder at center - Animation: Cursor enters frame
Scene 2 (3s): - Visual: Light beam sweeps diagonally - Animation: Blue rectangle transforms/morphs into webpage mockup - Animation: Glow effect around the design
Scene 3 (5s): - Visual: Full landing page visible with bento-style feature cards - Animation: Cards lift slightly with shadow on hover simulation - Animation: Text callout points to CTA button
Video Type: AI/Tech Product Explainer
Goal: Explain complex AI or tech products with text and interface demonstrations.
Script Structure MEET THE PRODUCT (5-10s) "Meet [Product] — the [category] that [key benefit]."
PROBLEM (10-15s) What frustration does this solve?
HOW IT WORKS (20-40s) Show the interface, demonstrate the magic.
INTEGRATIONS (10-15s) What does it connect with?
CTA (5-10s) Try it, sign up, learn more.
Visual Style Dark mode UI: Dark backgrounds with vibrant accent colors Neon accents: Purple, cyan, magenta glows Voice/AI indicators: Waveforms, recording buttons, chat bubbles App icon grids: Show integrations with recognizable logos Side-by-side layout: Text on one side, UI on the other Animation Patterns for AI Explainers Voice waveform: Animated dots or bars showing "listening" Recording indicator: Pulsing red dot with "Stop" button Chat message typing: Messages appear with typing indicator first Model selector: Dropdown showing AI model options Integration icons: App logos slide in from edges with stagger Glow pulses: Elements glow when being discussed Example Scene Plan Script: "Meet the AI assistant that lets you talk to all your apps."
Scene 1 (3s): - Visual: Dark purple gradient background - Animation: "Meet" fades in gray, holds
Scene 2 (5s): - Visual: App mockup slides in from right - Visual: Voice recording UI with waveform animation - Animation: Red recording dot pulses - Animation: Text "that lets you talk to all your apps" appears left
Scene 3 (4s): - Visual: Dropdown opens showing model options (GPT-4, Claude, etc.) - Animation: List items stagger in (0.1s delay) - Animation: Cursor hovers, selection highlights
Visual Styles Reference
Choose a visual style based on the product type and tone:
Dark Dramatic (Tech, AI, Fintech, Crypto) Background: Black to purple/blue gradient, or solid dark (#0a0a0a) Text: White or light gray, with colored accents Accents: Neon purple (#8b5cf6), cyan (#06b6d4), magenta (#ec4899) Effects: Glows, light beams, subtle particles Soft Gradient (Consumer Apps, Lifestyle) Background: Pastel gradients (lavender→pink, mint→blue) Text: Dark purple or navy for contrast Accents: Complementary pastels Effects: Soft shadows, rounded corners, friendly motion Clean Minimal (SaaS, Productivity, B2B) Background: White (#ffffff) or light gray (#f8fafc) Text: Dark gray (#1f2937) or black Accents: Brand color for buttons/highlights Effects: Subtle shadows, clean transitions Design Tool (Landing Pages, Design Showcases) Background: Neutral gray with visible grid Elements: Construction indicators (blue rectangles, guides) Effects: Light sweeps, element reveals Frame: Browser chrome for context Animation Vocabulary
Use these terms when describing animations:
Basic Animations Term Effect Best For Fade Opacity 0→1 or 1→0 Subtle entrances, transitions Slide Move from off-screen UI elements, list items Scale Grow or shrink Emphasis, entrances Spring Bouncy with overshoot Playful, energetic feel Ease-out Starts fast, slows at end Natural movement Ease-in-out Slow start and end Smooth, polished Typewriter Characters appear one by one Text reveals, URLs, code Stagger Sequential delay between items Lists, multiple elements Morph Shape transforms into another Transformations, transitions Pulse Scale up/down rhythmically Drawing attention Shake Quick horizontal vibration Impact, emphasis Wipe Reveal with moving edge Scene transitions Advanced Animations (from examples) Term Effect Best For Word slam Word appears with scale overshoot + shake Bold statements, social videos Background flash Instant background color change Scene transitions, energy Light sweep Diagonal light beam across frame Dramatic reveals Glow/bloom Soft light halo around element Focus, premium feel Perspective tilt 3D rotation (5-10°) on UI App mockups, depth Cursor trail Smooth bezier path for pointer UI demonstrations Click ripple Circular pulse on click Button interactions Countdown Numbers ticking down Urgency, timers Grid reveal Guide lines appear before content Design tool aesthetic Logo assemble Logo pieces come together Brand reveals Timing Guidelines Ultra-fast: 0.1-0.2s — Word slams, color flashes Fast: 0.2-0.3s — Snappy, energetic Medium: 0.4-0.6s — Balanced, professional Slow: 0.8-1.2s — Dramatic, elegant Stagger delay: 0.1-0.2s between items Hold time: 0.5-1s — Let important text breathe Scene Planning Template
For each scene, document:
SCENE [number]: [title] Script: "[exact voiceover text]" Duration: [X seconds] Visuals: - [element]: [description] - [element]: [description] Animations: - [timing]: [element] [animation type] ([duration], [easing]) - [timing]: [element] [animation type] ([duration], [easing]) Transition to next: [type]
Required Setup - Resemble.ai
Before generating voiceovers, verify the user has credentials configured.
Check for existing configuration
Check if .env file exists with:
RESEMBLE_API_KEY - The Resemble.ai API token RESEMBLE_VOICE_UUID - Voice ID (optional, defaults to 7213a9ea) Prompt for missing credentials
If RESEMBLE_API_KEY is missing: Ask: "I need your Resemble.ai API key to generate voiceovers. You can get one from https://app.resemble.ai/account/api — please paste your API key:"
If RESEMBLE_VOICE_UUID is missing: Use the default voice UUID 7213a9ea. Only ask if they want a different voice.
Save credentials Create or update .env with the provided values Ensure .env is in .gitignore Confirm setup before proceeding Credential Security NEVER commit API keys to version control NEVER display the full API key back to the user ALWAYS ensure .env is in .gitignore Store credentials only in .env, never hardcoded Captions Behavior
Captions are DISABLED by default. Only generate word-level timestamps and caption components when explicitly requested.
Default (no captions): Generate audio file only Save basic metadata (duration, fps, durationInFrames) Do NOT process timestamps into words When user requests captions: User must explicitly ask for "captions", "subtitles", or "word highlighting" Process audio_timestamps into word-level data Include caption components in composition Rule Files
Read these for detailed implementation:
rules/resemble-setup.md - API credentials and configuration rules/resemble-sync-tts.md - Synchronous TTS generation rules/resemble-streaming-tts.md - Streaming for longer scripts rules/resemble-voices.md - Voice selection and management rules/resemble-remotion-integration.md - Audio integration with Remotion rules/resemble-captions.md - Synchronized captions rules/visual-animations.md - Animation patterns and Remotion primitives Quick Reference For Educational Tutorial: Research the topic thoroughly Adapt language to audience level Use reveal animations synced to narration Include visual metaphors and diagrams For SaaS Demo: Understand the feature workflow Create UI mockups or capture screenshots Use cursor animations and highlights Show the result/outcome clearly For Product Launch: Focus on the problem → solution narrative Use bold typography and brand colors Keep it punchy — short sentences, fast cuts End with clear call to action For Tutorial / Walkthrough: Light, clean UI aesthetic One action per scene — don't rush Cursor guides the viewer's attention Show step progress (breadcrumbs, numbers) Pause on results before moving on End with success state celebration For Social Media Promo: Lead with one powerful word/phrase Use word-by-word reveals with impact Background color transitions add energy Keep total duration under 30s for best engagement Square (1080x1080) format for feeds For App/Product Showcase: Choose gradient style (dark dramatic vs soft pastel) Show UI mockups with slight perspective/tilt Combine kinetic text with interface demos Use URL bar typing for web products Cursor choreography for click demonstrations For Landing Page Reveal: Start with design tool aesthetic (grids, guides) Use light sweep for dramatic reveal Show full webpage in browser frame Highlight specific sections with callouts End with clear CTA and URL For AI/Tech Explainer: Dark mode aesthetic with neon accents Show voice/chat UI interactions Demonstrate integrations with app icon grid Side-by-side layout: text + interface Use waveforms and typing indicators for AI feel