remotion-resemble-ai

What this skill does

## When to use

Use this skill when the user wants to create:

1. **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"

2. **SaaS Walkthrough Demos** - Showcase software features with animated UI
   - Example: "Create a demo video showing how to use Notion's database feature"

3. **Product Launch Announcements** - Marketing videos with motion graphics
   - Example: "Create a launch video announcing our new AI-powered search feature"

4. **Tutorial / Walkthrough Videos** - Step-by-step guides with cursor animations
   - Example: "Create a tutorial showing how to set up a project in our app"

5. **Social Media Promo Videos** - Short, punchy kinetic text videos for ads
   - Example: "Create a 15-second Instagram ad for our fitness app"

6. **App/Product Showcase Videos** - Kinetic text combined with floating UI mockups
   - Example: "Create a promo showing our crypto exchange interface"

7. **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:

```
1. 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 w