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. Requires FIRECRAWL_API_KEY for website scraping and brand asset extraction.
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. Requires FIRECRAWL_API_KEY for website scraping and brand asset extraction.
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:
Attention — Establish the problem being solved. High-impact hook in the first 3 seconds.
Interest — Introduce the solution. Show what it is and why it matters.
Desire — Show use cases, not feature lists. Demonstrate real scenarios the viewer relates to.
Action — End with a CTA that includes an incentive (discount, free trial, limited offer).
Default Workflow (ALWAYS follow this)
Scrape brand data (if featuring a product) using Firecrawl
Create the project from the local template:
cd output && bash ../scripts/remotion.sh init <project-name>
Install dependencies with npm install
Build all scenes with proper motion graphics
Start Remotion Studio as a background process:
cd output/<project-name> && npm run dev
Wait for "Server ready" on port 3000.
Expose via Cloudflare tunnel so user can access it:
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
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/:
