What makes Remotion Video Generator notable?

1.9K downloads. Trust evidence available

How should Remotion Video Generator be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Remotion Video Generator

AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional... Skill: Remotion Video Generator Summary: AI video production workflow using Remotion. Use when creating videos, short films, commercials, or motion graphics. Triggers on requests to make promotional... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-02-25T14:20:06.194Z | auto remotion-video-generator v1.0.0 - Initial release of programmatic video generation workflow using Remotion and React. - Firecrawl replaced wi

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.9k

Updated

Oct 9, 2026

Version

1.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.9K downloads reported by the source. Last updated 10/9/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 9, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 9, 2026
Adoption signal: 1.9K downloadsadoption · observed Oct 9, 2026
Latest release: 1.0.0release · observed Feb 25, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install unknown:remotion-video-generator

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-unknown-remotion-video-generator/snapshot"

Documentation

CLAWHUB

32,606 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: remotion-video-generator
description: 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.
version: "1.0.0"
metadata: {"openclaw":{"emoji":"🎬","requires":{"bins":["node","npm","python3"]}, "tags":["video", "remotion", "motion-graphics", "production"]}}
---

# Remotion Video Generator

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

---

## Credits & References

### Original Skill
- **Source:** [Superskills - Video Generator (Remotion)](https://superskills.vibecode.run/)
- **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
```bash
# Run the scrapling script to get brand colors, logo, tagline
bash skills/remotion-video-generator/scripts/scrapling.sh "https://brand-website.com"
```

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

### Step 2: Download Brand Assets
```bash
mkdir -p public/images/brand
curl -sL "https://brand.com/logo.svg" -o public/images/brand/logo.svg
curl -sL "https://brand.com/og-image.png" -o public/images/brand/og-image.png
curl -sL "https://image.thum.io/get/width/1200/crop/800/https://brand.com" -o screenshot.png
```

### Step 3: Create Project Structure
```bash
mkdir -p my-video/src my-video/public/images/brand my-video/public/audio
```

### Step 4: Create package.json
```json
{
  "name": "my-video",
  "scripts": {
    "dev": "npx remotion studio",
    "build": "npx remotion bundle"
  },
  "dependencies": {
    "@remotion/cli": "^4.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "remotion": "^4.0.0",
    "lucide-react": "^0.300.0"
  }
}
```

### Step 5: Install Dependencies
```bash
cd my-video && npm install
```

### Step 6: Create Video Component
Create `src/MyVideo.tsx` with:
- AbsoluteFill for full-screen layout
- Sequence components for scene timing
- useCurrentFrame, useVideoConfig, interpolate, spring for animations

### Step 7: Create Entry Point (Remotion v4 API)
Create `src/index.tsx` - **MUST use `.tsx` extension**:

```tsx
import { registerRoot, Composition } from "remotion";
import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig, interpolate, spring } from "remotion";

const MyVideo = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoC

_meta.json

{
  "ownerId": "kn7ezb7w8vhk2wpmt1t4gax5w980vfak",
  "slug": "remotion-video-generator",
  "version": "1.0.0",
  "publishedAt": 1772029206194
}

references/components.md

# Video Components

> "Reusable components for Remotion videos."

---

## Animated Backgrounds

```tsx
// AnimatedGradient.tsx
import { useCurrentFrame, useVideoConfig, interpolate } from 'remotion';

export const AnimatedGradient = () => {
  const frame = useCurrentFrame();
  const { width, height } = useVideoConfig();

  const opacity = interpolate(frame, [0, 100], [0.3, 0.8]);

  return (
    <div
      style={{
        width,
        height,
        background: `linear-gradient(${frame * 2}deg, #1a1a2e, #16213e, #0f3460)`,
        opacity,
      }}
    />
  );
};
```

---

## Terminal Window

```tsx
// Terminal.tsx
import { AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';

export const Terminal = ({ text = "npm run dev" }: { text?: string }) => {
  const frame = useCurrentFrame();
  const charsVisible = interpolate(frame, [0, 30], [0, text.length]);

  return (
    <AbsoluteFill style={{ backgroundColor: '#1e1e1e', justifyContent: 'center', alignItems: 'center' }}>
      <div style={{
        backgroundColor: '#2d2d2d',
        borderRadius: 8,
        padding: 20,
        fontFamily: 'monospace',
        fontSize: 24,
        color: '#00ff00',
      }}>
        <div style={{ marginBottom: 10, color: '#ff6b6b' }}>~/project$</div>
        <span>{text.slice(0, Math.floor(charsVisible))}</span>
        <span style={{ animation: 'blink 1s infinite' }}>_</span>
      </div>
    </AbsoluteFill>
  );
};
```

---

## Feature Card

```tsx
// FeatureCard.tsx
import { interpolate, useCurrentFrame } from 'remotion';

export const FeatureCard = ({
  title,
  description,
  icon,
  delay = 0,
}: {
  title: string;
  description: string;
  icon: React.ReactNode;
  delay?: number;
}) => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [delay, delay + 30], [0, 1], { extrapolateRight: 'clamp' });

  return (
    <div style={{
      transform: `translateY(${interpolate(progress, [0, 1], [50, 0])})px`,
      opacity: progress,
      backgroundColor: 'white',
      borderRadius: 12,
      padding: 24,
      boxShadow: '0 4px 20px rgba(0,0,0,0.1)',
    }}>
      <div style={{ fontSize: 32, marginBottom: 12 }}>{icon}</div>
      <h3 style={{ margin: '0 0 8px 0' }}>{title}</h3>
      <p style={{ margin: 0, color: '#666' }}>{description}</p>
    </div>
  );
};
```

---

## Stats Display

```tsx
// StatsCounter.tsx
import { interpolate, useCurrentFrame, useVideoConfig } from 'remotion';

export const StatsCounter = ({
  value,
  label,
  delay = 0,
}: {
  value: number;
  label: string;
  delay?: number;
}) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const progress = interpolate(frame, [delay, delay + 60], [0, 1], { extrapolateRight: 'clamp' });
  const currentValue = Math.floor(value * progress);

  return (
    <div style={{ textAlign: 'center' }}>
      <div style={{
        fontSize: 64,
        fontWeight: 'bold',
        background: 'linear-gradient(90deg, #667eea, #764ba2)',
        Webki

references/composition-patterns.md

# Composition Patterns

> "Advanced composition patterns for complex Remotion videos."

---

## Parallel Sequences

Run multiple scenes simultaneously:

```tsx
<AbsoluteFill>
  <Sequence from={0} durationInFrames={150}>
    <SceneA />
  </Sequence>
  <Sequence from={30} durationInFrames={150}>
    <SceneB />
  </Sequence>
  <Sequence from={60} durationInFrames={150}>
    <SceneC />
  </Sequence>
</AbsoluteFill>
```

---

## Nested Sequences

Scene within a scene:

```tsx
<Sequence from={0} durationInFrames={300}>
  <MainScene>
    <Sequence from={60} durationInFrames={90}>
      <SubScene />
    </Sequence>
  </MainScene>
</Sequence>
```

---

## Conditional Rendering

Show different content based on frame:

```tsx
const frame = useCurrentFrame();

{
  frame < 60 ? <Intro /> : <MainContent />
}
```

---

## Loop Points

Create seamless loops:

```tsx
const loopFrame = frame % 120; // Loop every 4 seconds at 30fps

<AnimatedElement frame={loopFrame} />
```

---

## Shared Animations

Extract common animations:

```tsx
const useSlideIn = (delay: number, from: 'left' | 'right' | 'top' | 'bottom') => {
  const frame = useCurrentFrame();
  const progress = interpolate(frame, [delay, delay + 30], [0, 1]);

  const offsets = {
    left: [ -200, 0],
    right: [200, 0],
    top: [0, -200],
    bottom: [0, 200],
  };

  return {
    x: from === 'left' || from === 'right' ? interpolate(progress, [0, 1], offsets[from]) : 0,
    y: from === 'top' || from === 'bottom' ? interpolate(progress, [0, 1], offsets[from]) : 0,
    opacity: progress,
  };
};

// Usage
const style = useSlideIn(30, 'right');
<div style={{ transform: `translate(${style.x}px, ${style.y}px)`, opacity: style.opacity }} />
```

---

## Audio Synchronization

Sync visuals to audio:

```tsx
import { useAudio } from 'remotion';

export const AudioSync = () => {
  const audio = useAudio();
  // Visualize audio data
  return <Visualizer data={audio.frequencyData} />;
};
```

---

## Scroll-Linked Animation

Progress based on scroll position:

```tsx
import { useScroll } from 'remotion';

export const ScrollVideo = () => {
  const { scrollY, scrollYProgress } = useScroll();

  const scale = interpolate(scrollYProgress, [0, 1], [1, 1.5]);
  const opacity = interpolate(scrollYProgress, [0.8, 1], [1, 0]);

  return (
    <div style={{ transform: `scale(${scale})`, opacity }}>
      <Content />
    </div>
  );
};
```

---

## Stagger Children

Animate list items one by one:

```tsx
const items = ['First', 'Second', 'Third', 'Fourth'];

{items.map((item, i) => (
  <Sequence key={i} from={i * 15} durationInFrames={60}>
    <div>{item}</div>
  </Sequence>
))}
```

---

## Gesture/Interaction Simulation

Simulate user interactions:

```tsx
export const ClickAnimation = () => {
  const frame = useCurrentFrame();
  const clickProgress = interpolate(frame, [30, 45], [0, 1]);

  return (
    <div>
      <Button scale={1 + clickProgress * 0.1} />
      {clickProgress > 0.5 && (
        <div style={{ opacity: i

skill-card.md

## Description:

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.

This skill is ready for commercial/non-commercial use.

## Publisher:

[zendenho7](https://clawhub.ai/user/zendenho7)

### License/Terms of Use:


## Use Case:

Developers and content teams use this skill to create programmatic motion graphics videos, including promotional videos, product demos, short films, social media clips, animated explainers, and commercials. It helps agents scaffold Remotion projects, gather brand assets, build scenes, preview work, iterate, and render final video files.

### Deployment Geography for Use:

Global

## Known Risks and Mitigations:

Risk: A crafted URL passed to the scraping helper could trigger code execution due to unsafe input handling.

Mitigation: Review or patch the helper script before use, validate and quote user-supplied URLs, and require explicit approval before running scraping commands.

Risk: The workflow can scrape user-specified websites, download remote assets, and use third-party screenshot services.

Mitigation: Confirm that scraping and asset downloads are authorized for the target site, inspect downloaded assets before use, and avoid third-party screenshot services unless the user approves them.

Risk: The workflow can expose a local Remotion Studio to the public internet through a tunnel.

Mitigation: Use local preview by default and require explicit user approval before starting any public tunnel.

Risk: The workflow installs npm and pip packages without pinned versions.

Mitigation: Pin dependencies, review generated package files, and run installation in an isolated workspace.

## Reference(s):

- [Remotion](https://www.remotion.dev/)
- [Scrapling](https://github.com/D4Vinci/Scrapling)
- [React](https://react.dev/)
- [Superskills - Video Generator (Remotion)](https://superskills.vibecode.run/)
- [Video Components](references/components.md)
- [Composition Patterns](references/composition-patterns.md)
- [ClawHub Skill Page](https://clawhub.ai/zendenho7/skills/remotion-video-generator)

## Skill Output:

**Output Type(s):** [Text, Markdown, Code, Shell commands, Configuration, Guidance]

**Output Format:** [Markdown guidance with bash, JSON, Python, and TypeScript/TSX code blocks]

**Output Parameters:** [1D]

**Other Properties Related to Output:** [May produce project files, Remotion source code, package configuration, preview commands, and render commands when used by an agent.]

## Skill Version(s):

1.0.0 (source: frontmatter and server release metadata)

## Ethical Considerations:

Users should evaluate whether this skill is appropriate for their environment, review any generated or modified files before relying on them, and apply their organization's safety, se

Github ReposUpdated 7h agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.