Video Generator

AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional...

Security Scan

The skill's purpose (Remotion-based video generation) matches most of its files, but there are several incoherences and safety-relevant instructions (sourcing .env across the workspace, referencing another skill's tunnel script, and executing networked curl/python commands) that deserve user attention before installing.

Purpose & Capability

The skill is indeed a Remotion video scaffolder and asset-scraper; requesting FIRECRAWL_API_KEY aligns with the declared 'Firecrawl' scraping step. However the package declares no required binaries while included scripts rely on curl, python3, sed, npm/npx and a separate 'cloudflare-tunnel' skill script — those runtime dependencies are not declared.

Instruction Scope

SKILL.md directs the agent to scrape arbitrary websites and auto-download images, to source .env files from multiple locations (workspace root, skill dir), to start a dev server, and to expose it publicly via a Cloudflare tunnel script located at skills/cloudflare-tunnel/scripts/tunnel.sh (which is not part of this bundle). Sourcing .env from parent directories and auto-downloading remote content broaden the scope beyond simple templating and could expose other secrets or publish local content unintentionally.

Install Mechanism

There is no install spec (instruction-only install), which avoids forced remote installs; however the bundle contains executable shell scripts that will be run at runtime and those scripts make network calls (curl to api.firecrawl.dev and arbitrary image URLs). No third-party downloads during installation were found, but runtime network fetches are part of normal operation.

Credentials

Only FIRECRAWL_API_KEY is declared and used for the Firecrawl API (proportional). But firecrawl.sh automatically sources .env files from the workspace and skill directories and exports variables, which can import other secrets into the script environment unnecessarily. The skill does not declare that it will read .env files outside its own directory.

Persistence & Privilege

The skill is not always-enabled and does not request elevated platform privileges. It writes project files into output directories (expected for scaffolding) but does not modify other skills or system-wide agent settings.

What to consider before installing

This skill generally does what it advertises (scaffold Remotion projects and scrape brand assets), but there are important caveats you should review before installing: - Scripts require command-line tools not declared in the manifest (curl, python3, sed, npm/npx). Ensure your environment provides these or the scripts will fail. - firecrawl.sh sources .env files from the workspace root and the skill dir. That will export any variables found there into the script's environment — review those .env files first and avoid running in a workspace that contains other secrets you don't want touched. - The skill instructs exposing a local dev server via a Cloudflare tunnel script at skills/cloudflare-tunnel/scripts/tunnel.sh which is not included here. Verify the existence and trustworthiness of that tunnel script before following that step, since exposing the dev server will make your project files publicly reachable. - The skill will fetch and save images from arbitrary scraped URLs and from user-supplied URLs. Only run scraping/downloading on domains you trust, and inspect any downloaded content before using it in production. - Confirm the legitimacy of the Firecrawl service (api.firecrawl.dev) and restrict the API key scope where possible. Provide the minimum necessary credential and consider using a scoped/test key. If you plan to use it: review the scripts line-by-line, run them in an isolated/sandboxed environment, and avoid running them in a workspace that contains unrelated .env files or sensitive data.

Video Generator (Remotion)

Create professional motion graphics videos programmatically with React and Remotion.

Non-Negotiable Story Structure (AIDA)

Every video MUST follow the AIDA arc in order:

1. Attention — Establish the problem being solved. High-impact hook in the first 3 seconds.
2. Interest — Introduce the solution. Show what it is and why it matters.
3. Desire — Show use cases, not feature lists. Demonstrate real scenarios the viewer relates to.
4. Action — End with a CTA that includes an incentive (discount, free trial, limited offer).

Default Workflow (ALWAYS follow this)

1. Scrape brand data (if featuring a product) using Firecrawl
2. Create the project from the local template:

   cd output && bash ../scripts/remotion.sh init <project-name>
   

3. Install dependencies with npm install
4. Build all scenes with proper motion graphics
5. Start Remotion Studio as a background process:

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

   Wait for "Server ready" on port 3000.
6. Expose via Cloudflare tunnel so user can access it:

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

7. 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 from local template (no network needed)
cd output && bash ../scripts/remotion.sh init my-video
cd my-video && npm install

# Add motion libraries
npm install lucide-react

# Start dev server
npm run dev

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

Collecting Visual Assets

MANDATORY: Every video needs visual assets — logos, screenshots, product images, brand colors. Collect them BEFORE designing scenes. There are three sources:

1. Firecrawl Scrape (for any product/company URL)

Scrapes a website and extracts brand data + downloads reusable images in one step:

# Scrape and auto-download assets to the project's public/images/brand/
bash scripts/firecrawl.sh "https://example.com" output/my-video/public/images/brand

This returns JSON with: brandName, tagline, headline, description, features, logoUrl, faviconUrl, primaryColors (hex codes), ctaText, socialLinks, imageUrls (hero images, product shots, illustrations).

It also auto-downloads to the output directory: screenshot.png, og-image.png, favicon.png, logo.png, and all extracted page images (image-1.png, image-2.png, ...).

API Key: Set FIRECRAWL_API_KEY in the environment or .env.

2. User-Provided Assets

The user may provide logos, images, or screenshots directly (as file paths, URLs, or paste). Always ask if they have specific assets they want included. Save them to public/images/:

mkdir -p public/images
curl -sL "https://user-provided-url.com/logo.png" -o public/images/logo.png

3. Manual Download from Scrape Data

If you need specific images spotted in the scrape markdown (e.g. plan cards, channel icons), download them directly:

curl -sL "https://example.com/path/to/image.png" -o public/images/image.png

Using Assets in Remotion

Reference downloaded assets with staticFile():

import { Img, staticFile } from "remotion";

<Img src={staticFile("images/brand/logo.png")} />
<Img src={staticFile("images/brand/screenshot.png")} />

Core Architecture

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

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
• slideLeft, slideRight, crossDissolve, fadeBlur presets
• 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

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

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

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

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
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 — bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
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

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:

• 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