remotion-render

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generation, animated graphics, motion design, data-driven videos, React animations to video. Triggers: remotion, render video from code, tsx to video, react video, programmatic video, remotion render, code to video, animated video, motion graphics code, react animation video

25 stars

byComeOnOliver

View on GitHub Installation ↓

Best use case

remotion-render is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using remotion-render should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/remotion-render/SKILL.md --create-dirs "https://raw.githubusercontent.com/ComeOnOliver/skillshub/main/skills/aiskillstore/marketplace/inferen-sh/remotion-render/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/remotion-render/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How remotion-render Compares

Feature / Agent	remotion-render	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Remotion Render

Render videos from React/Remotion component code via [inference.sh](https://inference.sh) CLI.

![Remotion Render](https://cloud.inference.sh/app/files/u/4mg21r6ta37mpaz6ktzwtt8krr/01kg2c0egyg243mnyth4y6g51q.jpeg)

## Quick Start

> Requires inference.sh CLI (`infsh`). Get installation instructions: `npx skills add inference-sh/skills@agent-tools`

```bash
infsh login

# Render a simple animation
infsh app run infsh/remotion-render --input '{
  "code": "import { useCurrentFrame, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><h1 style={{color: \"white\", fontSize: 100, opacity: frame / 30}}>Hello World</h1></AbsoluteFill>; }",
  "duration_seconds": 3,
  "fps": 30,
  "width": 1920,
  "height": 1080
}'
```


## Input Schema

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| `code` | string | Yes | React component TSX code. Must export default a component. |
| `composition_id` | string | No | Composition ID to render |
| `props` | object | No | Props passed to the component |
| `width` | number | No | Video width in pixels |
| `height` | number | No | Video height in pixels |
| `fps` | number | No | Frames per second |
| `duration_seconds` | number | No | Video duration in seconds |
| `codec` | string | No | Output codec |

## Available Imports

Your TSX code can import from `remotion` and `react`:

```tsx
// Remotion APIs
import {
  useCurrentFrame,
  useVideoConfig,
  spring,
  interpolate,
  AbsoluteFill,
  Sequence,
  Audio,
  Video,
  Img
} from "remotion";

// React
import React, { useState, useEffect } from "react";
```

## Examples

### Fade-In Text

```bash
infsh app run infsh/remotion-render --input '{
  "code": "import { useCurrentFrame, AbsoluteFill, interpolate } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1]); return <AbsoluteFill style={{backgroundColor: \"#1a1a2e\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><h1 style={{color: \"#eee\", fontSize: 80, opacity}}>Welcome</h1></AbsoluteFill>; }",
  "duration_seconds": 2,
  "fps": 30,
  "width": 1920,
  "height": 1080
}'
```

### Animated Counter

```bash
infsh app run infsh/remotion-render --input '{
  "code": "import { useCurrentFrame, useVideoConfig, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps, durationInFrames } = useVideoConfig(); const progress = Math.floor((frame / durationInFrames) * 100); return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\"}}><h1 style={{color: \"#fff\", fontSize: 200}}>{progress}%</h1><p style={{color: \"#666\", fontSize: 30}}>Loading...</p></AbsoluteFill>; }",
  "duration_seconds": 5,
  "fps": 60,
  "width": 1080,
  "height": 1080
}'
```

### Spring Animation

```bash
infsh app run infsh/remotion-render --input '{
  "code": "import { useCurrentFrame, useVideoConfig, spring, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame, fps, config: { damping: 10, stiffness: 100 } }); return <AbsoluteFill style={{backgroundColor: \"#6366f1\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><div style={{width: 200, height: 200, backgroundColor: \"white\", borderRadius: 20, transform: `scale(${scale})`}} /></AbsoluteFill>; }",
  "duration_seconds": 2,
  "fps": 60,
  "width": 1080,
  "height": 1080
}'
```

### With Props

```bash
infsh app run infsh/remotion-render --input '{
  "code": "import { AbsoluteFill } from \"remotion\"; export default function Main({ title, subtitle }) { return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\"}}><h1 style={{color: \"#fff\", fontSize: 80}}>{title}</h1><p style={{color: \"#888\", fontSize: 40}}>{subtitle}</p></AbsoluteFill>; }",
  "props": {"title": "My Video", "subtitle": "Created with Remotion"},
  "duration_seconds": 3,
  "fps": 30,
  "width": 1920,
  "height": 1080
}'
```

### Sequence Animation

```bash
infsh app run infsh/remotion-render --input '{
  "code": "import { useCurrentFrame, AbsoluteFill, Sequence, interpolate } from \"remotion\"; function FadeIn({ children }) { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 20], [0, 1]); return <div style={{ opacity }}>{children}</div>; } export default function Main() { return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\", gap: 20}}><Sequence from={0}><FadeIn><h1 style={{color: \"#fff\", fontSize: 60}}>First</h1></FadeIn></Sequence><Sequence from={30}><FadeIn><h1 style={{color: \"#fff\", fontSize: 60}}>Second</h1></FadeIn></Sequence><Sequence from={60}><FadeIn><h1 style={{color: \"#fff\", fontSize: 60}}>Third</h1></FadeIn></Sequence></AbsoluteFill>; }",
  "duration_seconds": 4,
  "fps": 30,
  "width": 1920,
  "height": 1080
}'
```

## Python SDK

```python
from inferencesh import inference

client = inference()

result = client.run({
    "app": "infsh/remotion-render",
    "input": {
        "code": """
import { useCurrentFrame, AbsoluteFill, interpolate } from "remotion";

export default function Main() {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{
      backgroundColor: "#1a1a2e",
      display: "flex",
      justifyContent: "center",
      alignItems: "center"
    }}>
      <h1 style={{ color: "#eee", fontSize: 80, opacity }}>
        Hello from Python
      </h1>
    </AbsoluteFill>
  );
}
""",
        "duration_seconds": 3,
        "fps": 30,
        "width": 1920,
        "height": 1080
    }
})

print(result["output"]["video"])
```

### Streaming Progress

```python
for update in client.run({
    "app": "infsh/remotion-render",
    "input": {
        "code": "...",
        "duration_seconds": 10
    }
}, stream=True):
    if update.get("progress"):
        print(f"Rendering: {update['progress']}%")
    if update.get("output"):
        print(f"Video: {update['output']['video']}")
```

## Related Skills

```bash
# Remotion best practices (component patterns)
npx skills add remotion-dev/skills@remotion-best-practices

# AI video generation (for AI-generated clips)
npx skills add inference-sh/skills@ai-video-generation

# Image generation (for video assets)
npx skills add inference-sh/skills@ai-image-generation

# Python SDK reference
npx skills add inference-sh/skills@python-sdk

# Full platform skill
npx skills add inference-sh/skills@agent-tools
```

## Documentation

- [Remotion Documentation](https://www.remotion.dev/docs) - Official Remotion docs
- [Running Apps](https://inference.sh/docs/apps/running) - How to run apps via CLI
- [Streaming Results](https://inference.sh/docs/api/sdk/streaming) - Real-time progress updates

Related Skills

RenderDoc/RDC GPU Debug Base Skill Wrapper

from ComeOnOliver/skillshub

当前文件是 Cursor 平台的 base skill 入口。Agent 的目标是使用 RenderDoc/RDC platform tools 调试 GPU 渲染问题。

render-automation

from ComeOnOliver/skillshub

Automate Render tasks via Rube MCP (Composio): services, deployments, projects. Always search tools first for current schemas.

remotion-best-practices

from ComeOnOliver/skillshub

Best practices for Remotion - Video creation in React

remotion

from ComeOnOliver/skillshub

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

mathjax-rendering

from ComeOnOliver/skillshub

Render mathematical formulas in Obsidian using LaTeX/MathJax syntax. Use when writing equations, matrices, integrals, summations, or any mathematical notation in Obsidian notes.

render-info

from ComeOnOliver/skillshub

Using the RendererInfo class in Blazor to detect rendering context and interactivity.

Render — Cloud Application Platform

from ComeOnOliver/skillshub

## Overview

Remotion Video Toolkit

from ComeOnOliver/skillshub

## Overview

PixiJS — High-Performance 2D WebGL Renderer

from ComeOnOliver/skillshub

You are an expert in PixiJS, the fastest 2D rendering engine for the web. You help developers build games, interactive visualizations, animated ads, creative coding projects, and rich UI effects using PixiJS's WebGL-first renderer with automatic Canvas fallback — handling sprites, text, filters, masks, blend modes, and custom shaders at 60fps with hundreds of thousands of objects.

Blender Render Automation

from ComeOnOliver/skillshub

## Overview

3ds Max Rendering

from ComeOnOliver/skillshub

Configure production renders with V-Ray and Corona. Optimize quality vs. render time for architectural visualization, product shots, and animation.

nextjs-rendering

from ComeOnOliver/skillshub

SSG, SSR, ISR, Streaming, and Partial Prerendering (PPR). Use when choosing a rendering strategy (SSG, SSR, ISR, PPR, or Streaming) in Next.js. (triggers: **/page.tsx, **/layout.tsx, generateStaticParams, dynamic, dynamicParams, PPR, streaming)