Remotion Video Generator

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

Credits & References

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! 🎉

Quick Usage Guide (Step-by-Step)

Step 1: Scrape Brand Data

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

Step 2: Download Brand Assets

Step 3: Create Project Structure

Step 4: Create package.json

Step 5: Install Dependencies

Step 6: Create Video Component

• - AbsoluteFill for full-screen layout
• Sequence components for scene timing
• useCurrentFrame, useVideoConfig, interpolate, spring for animations

Step 7: Create Entry Point (Remotion v4 API)

CODEBLOCK5

⚠️ CRITICAL Remotion v4 Rules:

1. 1. Use .tsx extension (NOT .ts) for files with JSX
2. MUST use registerRoot + Composition API
3. ALWAYS pass fps to spring(): INLINECODE10
4. Use useVideoConfig() to get fps: INLINECODE12
5. Render with composition name: INLINECODE13

Step 8: Start Dev Server

cd my-video && npm run dev

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

CODEBLOCK8

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. 1. Scrape brand data (if featuring a product) using Scrapling (NOT Firecrawl)
2. Create the project in INLINECODE14
3. Build all scenes with proper motion graphics
4. Install dependencies with INLINECODE15
5. Fix package.json scripts to use npx remotion (not bun):

   "scripts": {
     "dev": "npx remotion studio",
     "build": "npx remotion bundle"
   }
   

1. 6. Start Remotion Studio as a background process:

   cd output/<project-name> && npm run dev
   

1. 7. Expose via Cloudflare tunnel so user can access:

   bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
   

1. 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)

CODEBLOCK12

Quick Start

CODEBLOCK13

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

CODEBLOCK14

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:

CODEBLOCK15

Download Assets After Scraping

CODEBLOCK16

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

Core Architecture

Scene Management

Use scene-based architecture with proper transitions:

CODEBLOCK17

Video Structure Pattern

CODEBLOCK18

Motion Graphics Principles

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

Animation Timing Reference

CODEBLOCK19

Visual Style Guidelines

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

Remotion Essentials

Interpolation

CODEBLOCK20

Sequences with Overlap

CODEBLOCK21

Cross-Scene Continuity

Place persistent elements OUTSIDE Sequence blocks:

CODEBLOCK22

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

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

File Structure

CODEBLOCK23

Common Components

See references/components.md for reusable:

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

Tunnel Management

CODEBLOCK24

Troubleshooting

Common Issues & Fixes

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

1. 1. Start dev server: INLINECODE43
2. Open http://localhost:3000
3. Make changes - auto-refreshes
4. Check composition in browser

Changelog

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

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

Commands:

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