# Send Remotion Video Generator to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- Download the package from Yavira.
- Extract it into a folder your agent can access.
- Paste one of the prompts below and point your agent at the extracted folder.
## Suggested prompts
### New install

```text
I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete.
```
### Upgrade existing

```text
I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run.
```
## Machine-readable fields
```json
{
  "schemaVersion": "1.0",
  "item": {
    "slug": "remotion-video-generator",
    "name": "Remotion Video Generator",
    "source": "tencent",
    "type": "skill",
    "category": "AI 智能",
    "sourceUrl": "https://clawhub.ai/zendenho7/remotion-video-generator",
    "canonicalUrl": "https://clawhub.ai/zendenho7/remotion-video-generator",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadUrl": "/downloads/remotion-video-generator",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=remotion-video-generator",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md",
      "references/components.md",
      "references/composition-patterns.md",
      "scripts/remotion.sh",
      "scripts/scrapling.sh"
    ],
    "downloadMode": "redirect",
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-30T16:55:25.780Z",
      "expiresAt": "2026-05-07T16:55:25.780Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=network",
        "contentDisposition": "attachment; filename=\"network-1.0.0.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/remotion-video-generator"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    }
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/remotion-video-generator",
    "downloadUrl": "https://openagent3.xyz/downloads/remotion-video-generator",
    "agentUrl": "https://openagent3.xyz/skills/remotion-video-generator/agent",
    "manifestUrl": "https://openagent3.xyz/skills/remotion-video-generator/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/remotion-video-generator/agent.md"
  }
}
```
## Documentation

### Remotion Video Generator

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

### Original Skill

Source: Superskills - Video Generator (Remotion)
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! 🎉

### Step 1: Scrape Brand Data

# 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

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

mkdir -p my-video/src my-video/public/images/brand my-video/public/audio

### Step 4: Create package.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

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:

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:

Use .tsx extension (NOT .ts) for files with JSX
MUST use registerRoot + Composition API
ALWAYS pass fps to spring(): spring({ frame, fps, from: 0.8, to: 1 })
Use useVideoConfig() to get fps: const { fps } = useVideoConfig()
Render with composition name: npx remotion render MyVideo out/video.mp4

### Step 8: Start Dev Server

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)

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

# 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

### 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)

Scrape brand data (if featuring a product) using Scrapling (NOT Firecrawl)
Create the project in output/<project-name>/
Build all scenes with proper motion graphics
Install dependencies with npm install
Fix package.json scripts to use npx remotion (not bun):
"scripts": {
  "dev": "npx remotion studio",
  "build": "npx remotion bundle"
}


Start Remotion Studio as a background process:
cd output/<project-name> && npm run dev


Expose via Cloudflare tunnel so user can access:
bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000


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)

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

### Quick Start

# 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

# 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:

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

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

Note: Some S3 buckets block direct access. Use thum.io screenshot service as fallback.

### Scene Management

Use scene-based architecture with proper transitions:

const SCENE_DURATIONS: Record<string, number> = {
  intro: 3000,      // 3s hook
  problem: 4000,    // 4s dramatic
  solution: 3500,   // 3.5s reveal
  features: 5000,  // 5s showcase
  cta: 3000,        // 3s close
};

### Video Structure Pattern

import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring, Img, staticFile, Audio } from "remotion";

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

  return (
    <AbsoluteFill>
      {/* Background music */}
      <Audio src={staticFile("audio/bg-music.mp3")} volume={0.35} />

      {/* Persistent background layer - OUTSIDE sequences */}
      <AnimatedBackground frame={frame} />

      {/* Scene sequences */}
      <Sequence from={0} durationInFrames={90}>
        <IntroScene />
      </Sequence>
      <Sequence from={90} durationInFrames={120}>
        <FeatureScene />
      </Sequence>
    </AbsoluteFill>
  );
};

### AVOID (Slideshow patterns)

Fading to black between scenes
Centered text on solid backgrounds
Same transition for everything
Linear/robotic animations
Static screens
Emoji icons — NEVER use emoji, always use Lucide React icons

### PURSUE (Motion graphics)

Overlapping transitions (next starts BEFORE current ends)
Layered compositions (background/midground/foreground)
Spring physics for organic motion
Varied timing (2-5s scenes, mixed rhythms)
Continuous visual elements across scenes
Custom transitions with clipPath, 3D transforms, morphs
Lucide React for ALL icons (npm install lucide-react) — never emoji

### Transition Techniques

TechniqueDescriptionMorph/ScaleElement scales up to fill screen, becomes next scene's backgroundWipeColored shape sweeps across, revealing next sceneZoom-throughCamera pushes into element, emerges into new sceneClip-path revealCircle/polygon grows from point to revealPersistent anchorOne element stays while surroundings changeDirectional flowScene 1 exits right, Scene 2 enters from rightSplit/unfoldScreen divides, panels slide apartPerspective flipScene rotates on Y-axis in 3D

### Animation Timing Reference

// Timing values (in seconds)
const timing = {
  micro: 0.1-0.2,     // Small shifts, subtle feedback
  snappy: 0.2-0.4,    // Element entrances, position changes
  standard: 0.5-0.8,   // Scene transitions, major reveals
  dramatic: 1.0-1.5,  // Hero moments, cinematic reveals
};

// Spring configs
const springs = {
  snappy: { stiffness: 400, damping: 30 },
  bouncy: { stiffness: 300, damping: 15 },
  smooth: { stiffness: 120, damping: 25 },
};

### Typography

One display font + one body font max
Massive headlines, tight tracking
Mix weights for hierarchy
Keep text SHORT (viewers can't pause)

### Colors

Use brand colors from Scrapling scrape as the primary palette — match the product's actual look
Avoid purple/indigo gradients unless the brand uses them or the user explicitly requests them
Simple, clean backgrounds are generally best — a single dark tone or subtle gradient beats layered textures
Intentional accent colors pulled from the brand

### Layout

Use asymmetric layouts, off-center type
Edge-aligned elements create visual tension
Generous whitespace as design element
Use depth sparingly — a subtle backdrop blur or single gradient, not stacked textures

### Interpolation

const opacity = interpolate(frame, [0, 30], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp"
});

const scale = spring({
  frame,
  fps,
  from: 0.8,
  to: 1,
  durationInFrames: 30,
  config: { damping: 12 }
});

### Sequences with Overlap

<Sequence from={0} durationInFrames={100}>
  <Scene1 />
</Sequence>
<Sequence from={80} durationInFrames={100}>
  <Scene2 />
</Sequence>

### Cross-Scene Continuity

Place persistent elements OUTSIDE Sequence blocks:

const PersistentShape = ({ currentScene }: { currentScene: number }) => {
  const positions = {
    0: { x: 100, y: 100, scale: 1, opacity: 0.3 },
    1: { x: 800, y: 200, scale: 2, opacity: 0.5 },
    2: { x: 400, y: 600, scale: 0.5, opacity: 1 },
  };

  return (
    <motion.div
      animate={positions[currentScene]}
      transition={{ duration: 0.8, ease: "easeInOut" }}
      className="absolute w-32 h-32 rounded-full bg-gradient-to-r from-coral to-orange"
    />
  );
};

### Quality Tests

Before delivering, verify:

Mute test: Story follows visually without sound?
Squint test: Hierarchy visible when squinting?
Timing test: Motion feels natural, not robotic?
Consistency test: Similar elements behave similarly?
Slideshow test: Does NOT look like PowerPoint?
Loop test: Video loops smoothly back to start?

### Implementation Steps

Scrapling brand scrape — If featuring a product, scrape its site first
Director's treatment — Write vibe, camera style, emotional arc
Visual direction — Colors, fonts, brand feel, animation style
Scene breakdown — List every scene with description, duration, text, transitions
Plan assets — User assets + generated images/videos + brand scrape assets
Define durations — Vary pacing (2-3s punchy, 4-5s dramatic)
Build persistent layer — Animated background outside scenes
Build scenes — Each with enter/exit animations, 3-5 timed moments
Open with hook — High-impact first scene
Develop narrative — Content-driven middle scenes
Strong ending — Intentional, resolved close
Start Remotion Studio — npm run dev on port 3000
Expose via tunnel — bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
Send user the public URL — They preview and request changes live
Iterate — Edit source, hot-reload, repeat
Render — Only when user says to export final video

### File Structure

my-video/
├── src/
│   ├── Root.tsx          # Composition definitions
│   ├── index.ts          # Entry point
│   ├── index.css         # Global styles
│   ├── MyVideo.tsx       # Main video component
│   └── scenes/           # Scene components (optional)
├── public/
│   ├── images/
│   │   └── brand/        # Scrapling-scraped assets
│   └── audio/            # Background music
├── remotion.config.ts
└── package.json

### Common Components

See references/components.md for reusable:

Animated backgrounds
Terminal windows
Feature cards
Stats displays
CTA buttons
Text reveal animations

### Tunnel Management

# Start tunnel (exposes port 3000 publicly)
bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000

# Check status
bash skills/cloudflare-tunnel/scripts/tunnel.sh status 3000

# List all tunnels
bash skills/cloudflare-tunnel/scripts/tunnel.sh list

# Stop tunnel
bash skills/cloudflare-tunnel/scripts/tunnel.sh stop 3000

### Common Issues & Fixes

IssueSolutionExpected ">" but found "schema"Use .tsx extension for files with JSX, not .tsuseCurrentFrame() can only be called inside a componentUse registerRoot + Composition API (see Step 7)"fps" must be a number, but you passed undefined to spring()Pass fps to spring: spring({ frame, fps, from: 0.8, to: 1 })Could not find composition with ID indexUse composition name: npx remotion render MyVideo out.mp4Module build failedEnsure react and react-dom are in dependenciesRemotion not foundRun npm install in project directoryHot reload not workingEnsure running npm run dev, not npx remotion directlyBrand colors not extractingSome sites use CSS variables - check page source manually

### File Extension Rules

Use .tsx for files with JSX (components with < tags >)
Use .ts for pure TypeScript files
Entry point MUST be .tsx if it uses JSX

### Testing Your Video

Start dev server: npm run dev
Open http://localhost:3000
Make changes - auto-refreshes
Check composition in browser

### v1.0.0 (2026-02-25)

Initial release (adapted from superskills)
Firecrawl replaced with Scrapling for brand data extraction
Uses StealthyFetcher for JS-heavy sites
Full brand data extraction: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors, ctaText, socialLinks, screenshotUrl, ogImageUrl

### v1.1.0 (2026-02-25)

Added Quick Usage Guide with step-by-step instructions
Added troubleshooting section for common issues
Tested with OpenClaw promotional video - working! 🎉
Documented file extension requirements (.tsx vs .ts)
Fixed Remotion v4 API: registerRoot + Composition pattern
Fixed spring() must receive fps parameter
Fixed composition name in render command

### Practical Example: OpenClaw Promo Video

Here's the actual project created during testing:

Location: skills/remotion-video-generator/openclaw-promo/

Brand Data Extracted:

Tagline: "The AI that actually does things."
Logo: favicon.svg from openclaw.ai
Primary Color: #FF6B35 (extracted from design)
Screenshot: Generated via thum.io

Project Structure:

openclaw-promo/
├── src/
│   ├── index.tsx        # Entry point
│   └── OpenClawPromo.tsx # Video component
├── public/
│   └── images/
│       └── brand/
│           ├── logo.svg
│           ├── og-image.png
│           └── screenshot.png
├── package.json
└── tsconfig.json

Commands:

cd skills/remotion-video-generator/openclaw-promo
npm run dev    # Start studio at localhost:3000
npm run build  # Bundle for production

Last updated: 2026-02-25
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: zendenho7
- Version: 1.0.0
## Source health
- Status: healthy
- Source download looks usable.
- Yavira can redirect you to the upstream package for this source.
- Health scope: source
- Reason: direct_download_ok
- Checked at: 2026-04-30T16:55:25.780Z
- Expires at: 2026-05-07T16:55:25.780Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/remotion-video-generator)
- [Send to Agent page](https://openagent3.xyz/skills/remotion-video-generator/agent)
- [JSON manifest](https://openagent3.xyz/skills/remotion-video-generator/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/remotion-video-generator/agent.md)
- [Download page](https://openagent3.xyz/downloads/remotion-video-generator)