remotion-video-generator

AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional videos, product demos, social media videos, animated explainers, or any programmatic video content. Produces polished motion graphics, not slideshows.

# Remotion Video Generator

> "Create professional motion graphics videos programmatically with React and Remotion."

---

## Credits & References

### Original Skill
- **Source:** [Superskills - Video Generator (Remotion)](https://superskills.vibecode.run/)
- **Author:** Riley Brown / VibeCode Community

### Modifications
- **Firecrawl replaced with Scrapling** for brand data extraction
- Uses Python `scrapling` library instead of Firecrawl API
- Added comprehensive troubleshooting for Remotion v4 API

### Core Technologies
- **Remotion:** https://www.remotion.dev/
- **Scrapling:** https://github.com/D4Vinci/Scrapling
- **React:** https://react.dev/

### Tested With
- OpenClaw promotional video - successfully rendered! 🎉

---

## Quick Usage Guide (Step-by-Step)

### Step 1: Scrape Brand Data
```bash
# Run the scrapling script to get brand colors, logo, tagline
bash skills/remotion-video-generator/scripts/scrapling.sh "https://brand-website.com"
```

This extracts: brandName, tagline, logoUrl, faviconUrl, primaryColors, ogImageUrl, screenshotUrl

### Step 2: Download Brand Assets
```bash
mkdir -p public/images/brand
curl -sL "https://brand.com/logo.svg" -o public/images/brand/logo.svg
curl -sL "https://brand.com/og-image.png" -o public/images/brand/og-image.png
curl -sL "https://image.thum.io/get/width/1200/crop/800/https://brand.com" -o screenshot.png
```

### Step 3: Create Project Structure
```bash
mkdir -p my-video/src my-video/public/images/brand my-video/public/audio
```

### Step 4: Create package.json
```json
{
  "name": "my-video",
  "scripts": {
    "dev": "npx remotion studio",
    "build": "npx remotion bundle"
  },
  "dependencies": {
    "@remotion/cli": "^4.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remotion": "^4.0.0",
    "lucide-react": "^0.300.0"
  }
}
```

### Step 5: Install Dependencies
```bash
cd my-video && npm install
```

### Step 6: Create Video Component
Create `src/MyVideo.tsx` with:
- AbsoluteFill for full-screen layout
- Sequence components for scene timing
- useCurrentFrame, useVideoConfig, interpolate, spring for animations

### Step 7: Create Entry Point (Remotion v4 API)
Create `src/index.tsx` - **MUST use `.tsx` extension**:

```tsx
import { registerRoot, Composition } from "remotion";
import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";

const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Animations - ALWAYS pass fps to spring()
  const scale = spring({ frame, fps, from: 0.8, to: 1 });

  return (
    <AbsoluteFill style={{ backgroundColor: "#000" }}>
      <Sequence from={0} durationInFrames={90}>
        <h1>Hello World</h1>
      </Sequence>
    </AbsoluteFill>
  );
};

registerRoot(() => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={240}
      fps={30}
      width={1920}
      height={1080}
    />
  );
});
```

**⚠️ CRITICAL Remotion v4 Rules:**
1. Use `.tsx` extension (NOT `.ts`) for files with JSX
2. MUST use `registerRoot` + `Composition` API
3. ALWAYS pass `fps` to `spring()`: `spring({ frame, fps, from: 0.8, to: 1 })`
4. Use `useVideoConfig()` to get fps: `const { fps } = useVideoConfig()`
5. Render with composition name: `npx remotion render MyVideo out/video.mp4`

### Step 8: Start Dev Server
```bash
cd my-video && npm run dev
```
Server runs on http://localhost:3000

### Step 9: Preview & Iterate
- Open browser to preview
- Edit source files - hot-reloads automatically
- User reviews and requests changes

### Step 10: Render Final Video (when user asks)
```bash
npx remotion render index out/final-video.mp4
```

---

## Credits

- **Original Skill:** https://superskills.vibecode.run/
- **Modified:** Firecrawl replaced with Scrapling for brand data extraction
- **Remotion:** https://www.remotion.dev/

---

## Installation

```bash
# Install Remotion globally
npm install -g remotion

# Install dependencies for video projects
npm install lucide-react

# Install Scrapling (already in workspace skills)
pip install scrapling
```

---

## Agent Instructions

### When to Use Video Generator

**Use this skill when:**
- Creating promotional videos
- Making product demos
- Social media video content
- Animated explainers
- Commercials
- Any programmatic video content

**Do NOT use for:**
- Simple slideshows (use other tools)
- Video editing of existing footage
- Live streaming

---

## Default Workflow (ALWAYS follow this)

1. **Scrape brand data** (if featuring a product) using **Scrapling** (NOT Firecrawl)
2. **Create the project** in `output/<project-name>/`
3. **Build all scenes** with proper motion graphics
4. **Install dependencies** with `npm install`
5. **Fix package.json scripts** to use `npx remotion` (not bun):
   ```json
   "scripts": {
     "dev": "npx remotion studio",
     "build": "npx remotion bundle"
   }
   ```
6. **Start Remotion Studio** as a background process:
   ```bash
   cd output/<project-name> && npm run dev
   ```
7. **Expose via Cloudflare tunnel** so user can access:
   ```bash
   bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
   ```
8. **Send the user the public URL** (e.g. `https://xxx.trycloudflare.com`)

The user will preview in their browser, request changes, and you edit the source files. Remotion hot-reloads automatically.

---

## Rendering (only when user explicitly asks to export)

```bash
cd output/<project-name>
npx remotion render CompositionName out/video.mp4
```

---

## Quick Start

```bash
# Scaffold project
cd output && npx --yes create-video@latest my-video --template blank
cd my-video && npm install

# Add motion libraries
npm install lucide-react

# Fix scripts in package.json (replace any "bun" references with "npx remotion")

# Start dev server
npm run dev

# Expose publicly
bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
```

---

## Fetching Brand Data with Scrapling

**MANDATORY:** When a video mentions or features any product/company, use Scrapling to scrape the product's website for brand data, colors, screenshots, and copy BEFORE designing the video. This ensures visual accuracy and brand consistency.

### Using the Scrapling Script

```bash
# Run the brand data extraction script
bash skills/remotion-video-generator/scripts/scrapling.sh "https://example.com"
```

This returns structured brand data: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors, ctaText, socialLinks, plus screenshot URL and OG image URL.

### Manual Scrapling Extraction

If the script isn't available, use Python directly:

```python
import json
from scrapling.fetchers import StealthyFetcher
from urllib.parse import urljoin
import re

url = 'https://brand.com'
page = StealthyFetcher.fetch(url, headless=True)
html = page.text

def resolve(u):
    return urljoin(url, u) if u and not u.startswith('http') else u

colors = list(set(re.findall(r'#(?:[0-9a-fA-F]{3}){1,2}', html)))[:5]

data = {
    'brandName': page.css('[property="og:site_name"]::text').get() or page.title(),
    'tagline': page.css('[property="og:description"]::text').get(),
    'headline': page.css('h1::text').get(),
    'description': page.css('[property="og:description"]::text').get(),
    'logoUrl': resolve(page.css('[rel="icon"]::attr(href)').get()),
    'faviconUrl': resolve(page.css('[rel="icon"]::attr(href)').get()),
    'primaryColors': colors,
    'ctaText': page.css('a[href*="signup"]::text').get(),
    'ogImageUrl': resolve(page.css('[property="og:image"]::attr(content)').get()),
    'screenshotUrl': f"https://image.thum.io/get/width/1200/crop/800/{url}"
}

print(json.dumps(data, indent=2))
```

---

## Download Assets After Scraping

```bash
mkdir -p public/images/brand
curl -s "https://example.com/favicon.ico" -o public/images/brand/favicon.ico
curl -s "${OG_IMAGE_URL}" -o public/images/brand/og-image.png
curl -sL "${SCREENSHOT_URL}" -o public/images/brand/screenshot.png
```