Remotion Render Agent Skill

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

13k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

404

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/aiskillstore/marketplace --skill remotion-render

What comes with it

44 108 bytes besides the instruction

skill-report.json

What it tells the agent to use

found in the instruction text

Bash runs shell commands — read the instruction before connecting

The instruction itself

14 sections, as written by the author

> Install the belt CLI skill: npx skills add belt-sh/cli

Remotion Render

Render videos from React/Remotion component code via inference.sh CLI.

!Remotion Render

Quick Start

> Requires inference.sh CLI (belt). Install instructions

belt login

# Render a simple animation
belt 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

|-----------|------|----------|-------------|

| fps | number | No | Frames per second |

Available Imports

Your TSX code can import from remotion and react:

// 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

belt 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

belt 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

belt 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

belt 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

belt 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

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

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']}")

# 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@infsh-cli

Documentation

Remotion Documentation - Official Remotion docs
Running Apps - How to run apps via CLI
Streaming Results - Real-time progress updates

Other skills for the same job

different authors, same section of the catalogue

Pydicom

by christophacham

×3

Python library for working with DICOM (Digital Imaging and Communications in Medicine) files. Use this skill when reading, writing, or modifying medical imaging data in DICOM format, extracting pixel data from medical images (CT, MRI, X-ray, ultrasound), anonymizing DICOM files, working with DICOM metadata and tags, converting DICOM images to other formats, handling compressed DICOM data, or processing medical imaging datasets. Applies to tasks involving medical image analysis, PACS systems, radiology workflows, and healthcare imaging applications.

Remotion Best Practices

by ncklrs

×3

Best practices for Remotion - Video creation in React

Generate AI-powered podcast-style audio narratives using Azure OpenAI's GPT Realtime Mini model via WebSocket. Use when building text-to-speech features, audio narrative generation, podcast creation from content, or integrating with Azure OpenAI Realtime API for real audio output. Covers full-stack implementation from React frontend to Python FastAPI backend with WebSocket streaming.

4k tokens scripts

Remotion Best Practices

by ComeOnOliver

×2

Best practices for Remotion - Video creation in React

Use this skill when building applications with Gemini API hosted models, including Gemini and Gemma 4, working with multimodal content (text, images, audio, video), implementing function calling, using structured outputs, or needing current model specifications. Covers SDK usage...

Turn error logs, screenshots, voice notes, and rough bug reports into crisp, developer-ready GitHub issues with repro steps, impact, and evidence.

1k tokens

Trackpy Particle Tracking

by BioTender-max

×1

Python library for single-particle tracking (SPT) in video microscopy via the Crocker-Grier algorithm. Locate particles (fluorescent spots, colloids, vesicles, cells) per frame, link into trajectories, filter short tracks, and compute MSD for diffusion analysis. 2D/3D with subpixel accuracy; reads TIF stacks, AVI, image series via pims. Use for quantitative SPT and diffusion coefficient extraction from fluorescence or brightfield video.

7k tokens

How to use it

Copy the folder

Take aiskillstore/remotion-render from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.

Install what it needs

The instructions reference npx. Without those the skill loads but fails at the first command.