Video Generator

Video Generator (Remotion)

Create professional motion graphics videos programmatically with React and Remotion.

Default Workflow (ALWAYS follow this)

1. Scrape brand data (if featuring a product) using Firecrawl 2. Create the project in output// 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):

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

   cd output/ && npm run dev
   

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

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/
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 Firecrawl

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

API Key: Set FIRECRAWL_API_KEY in .env (see TOOLS.md).

Usage

bash scripts/firecrawl.sh "https://example.com"

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

Download Assets After Scraping

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

Core Architecture

Scene Management

Use scene-based architecture with proper transitions:

const SCENE_DURATIONS: Record = {
  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 (
    
      {/* Background music */}
      
      {/* Persistent background layer - OUTSIDE sequences */}
      
      {/* Scene sequences */}
      
        
      
      
        
      
    
  );
};

Motion Graphics Principles

AVOID (Slideshow patterns)

PURSUE (Motion graphics)

Transition Techniques

1. Morph/Scale - Element scales up to fill screen, becomes next scene's background 2. Wipe - Colored shape sweeps across, revealing next scene 3. Zoom-through - Camera pushes into element, emerges into new scene 4. Clip-path reveal - Circle/polygon grows from point to reveal 5. Persistent anchor - One element stays while surroundings change 6. Directional flow - Scene 1 exits right, Scene 2 enters from right 7. Split/unfold - Screen divides, panels slide apart 8. Perspective flip - Scene 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 },
};

Visual Style Guidelines

Typography

Colors

Layout

Remotion Essentials

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

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 (
    
  );
};

Quality Tests

Before delivering, verify:

Implementation Steps

1. Firecrawl 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 9. Define durations — Vary pacing (2-3s punchy, 4-5s dramatic) 10. Build persistent layer — Animated background outside scenes 11. Build scenes — Each with enter/exit animations, 3-5 timed moments 12. Open with hook — High-impact first scene 13. Develop narrative — Content-driven middle scenes 14. Strong ending — Intentional, resolved close 15. Start Remotion Studio — npm run dev on port 3000 16. Expose via tunnel — bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000 17. Send user the public URL — They preview and request changes live 18. Iterate — Edit source, hot-reload, repeat 19. 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/            # Firecrawl-scraped assets
│   └── audio/                # Background music
├── remotion.config.ts
└── package.json

Common Components

See references/components.md for reusable:

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

bash scripts/firecrawl.sh "https://example.com"

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

Download Assets After Scraping

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