A programmatic video production workflow that uses React and Remotion to create high-quality motion graphics and brand-consistent promotional content.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install skill-5
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install skill-5 using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Video Generator (Remotion)?
The Video Generator skill enables developers to build sophisticated motion graphics videos using the React ecosystem. By leveraging Remotion, this skill allows for the programmatic creation of videos, short films, and commercials with a focus on high-fidelity animation rather than simple slideshows. It integrates seamlessly with other Openclaw Skills to automate the entire production pipeline.
Key to its functionality is the ability to maintain brand consistency through automated asset scraping. By utilizing Firecrawl, the skill extracts brand colors, logos, and typography from a website to inform the video's design. This ensures that every generated video feels like an organic extension of the target brand's visual identity.
Video Generator (Remotion) Use Cases
- Generating high-impact promotional videos and product demos for SaaS platforms.
- Creating programmatic social media content and animated explainers with dynamic data.
- Building brand-consistent motion graphics that automatically pull assets from official websites.
- Automating the production of cinematic video content that avoids the generic look of PowerPoint-style transitions.
How Video Generator (Remotion) Works
- Scrapes brand identity (colors, logos, screenshots) from a target URL using Firecrawl to ensure visual accuracy.
- Scaffolds a new Remotion project within the local file system using standardized templates.
- Develops scene-based React components incorporating advanced motion principles like spring physics and overlapping transitions.
- Configures project scripts to ensure compatibility with npx remotion environments.
- Launches the Remotion Studio development server and exposes it via a secure Cloudflare tunnel for real-time user previewing.
- Iterates on the source code based on user feedback using hot-reloading capabilities.
- Renders the final composition to a high-quality MP4 file upon explicit request.
Video Generator (Remotion) Setup
To initialize a project within the Openclaw Skills environment, follow these steps:
# Scaffold the video project
cd output && npx --yes create-video@latest my-video --template blank
cd my-video && npm install
# Install required motion libraries
npm install lucide-react
# Start the development studio
npm run dev
# Expose the studio for remote previewing
bash skills/cloudflare-tunnel/scripts/tunnel.sh start 3000
Video Generator (Remotion) Data Schema & Taxonomy
The skill organizes video projects with a clear separation between logic and assets:
| Directory | Description |
|---|---|
src/ |
Contains Root.tsx for composition definitions and MyVideo.tsx for the main animation logic. |
public/images/brand/ |
Stores assets scraped via Firecrawl (logos, screenshots, favicons). |
public/audio/ |
Background music and sound effect assets. |
remotion.config.ts |
Global configuration for rendering and browser settings. |
package.json |
Dependency management and script definitions for npx remotion tasks. |
Video Generator (Remotion) Advanced Features
- Integrated Firecrawl brand scraping for automated visual identity mapping.
- Native Cloudflare tunnel support for instant, public-facing previews of Openclaw Skills output.
- Scene-based architecture with support for persistent background layers and cross-scene continuity.
- Advanced animation timing utilizing spring physics for organic, non-linear motion.
- Programmatic rendering of specific compositions directly to MP4 via CLI.
SKILL.md
Loading
Related Openclaw Skills
Hello Agent World
A fundamental greeting skill that allows AI agents to provide personalized, context-aware introductions in the user's native language.
PVPC Spain Electricity Optimizer
A specialized tool for tracking and optimizing Spanish PVPC electricity prices to minimize domestic energy costs.
Workplace Skill
A sophisticated project management framework for orchestrating multi-agent workflows, isolated memory, and seamless context switching across various codebases.
Workplace Manager
A sophisticated workspace management system for orchestrating multi-agent workflows, isolated project memory, and seamless context switching.
TOTP Verification
A secure multi-factor authentication layer for AI agents to protect sensitive operations using Time-based One-Time Passwords.
Odds-API.io Sports Betting Integration
A specialized integration for querying real-time sports events and betting odds from Odds-API.io.
Featured*
