Remotion Render
Turn Remotion/React TSX components into MP4s through belt so your agent can ship motion graphics and data-driven videos from code.
Overview
Remotion Render is an agent skill most often used in Build (also Launch distribution, Grow content) that renders MP4 video from React/Remotion TSX via the inference.sh belt infsh/remotion-render app.
Install
npx skills add https://github.com/qu-skills/skills --skill remotion-renderWhat is this skill?
- Renders MP4 from Remotion TSX passed as code input to infsh/remotion-render
- Supports useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence
- Configurable resolution, FPS, duration, and codec
- Programmatic and data-driven video for motion design and React animations
- Requires inference.sh belt CLI (npx skills add belt-sh/cli)
- Supports Remotion APIs including useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, and Sequence
Adoption & trust: 100k installs on skills.sh; 512 GitHub stars.
What problem does it solve?
You have motion logic in React/Remotion but no simple path for your agent to render and deliver MP4s without a local Remotion studio setup.
Who is it for?
Developers who already think in Remotion components and want programmatic, repeatable video exports from the agent workflow.
Skip if: Builders who only need one-off generative clips from prompts without maintaining TSX—use ai-video-generation instead.
When should I use this skill?
Remotion, render video from code, TSX to video, React video, programmatic video, motion graphics from code.
What do I get? / Deliverables
Your agent runs belt app run infsh/remotion-render with TSX code and render settings and receives a encoded video ready for distribution.
- MP4 (or configured codec) from infsh/remotion-render
- Cloud-rendered motion graphic from supplied TSX
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the primary artifact is React/Remotion source you author and render—not a one-shot generative prompt. Frontend fits Remotion’s React APIs (useCurrentFrame, Sequence, spring, interpolate) and TSX-as-video workflows indie devs already use in the repo.
Where it fits
Iterate on a Remotion Sequence for onboarding UI mocks and render a preview MP4 from the agent.
Export a launch announcement motion graphic with the same brand tokens as your React app.
Regenerate a weekly metrics recap video from updated JSON props in Remotion code.
How it compares
Code-to-MP4 Remotion pipeline via belt; not a replacement for hosted text-to-video models like Veo.
Common Questions / FAQ
Who is remotion-render for?
Solo builders and front-end-heavy indies who encode motion in Remotion/React and want agent-driven cloud renders.
When should I use remotion-render?
Use it in Build while authoring animated UI and changelog graphics, at Launch to export launch motion assets, and in Grow for data-driven recap videos—when triggers mention Remotion, TSX to video, or programmatic video.
Is remotion-render safe to install?
It uploads component code to inference.sh for rendering; check the Security Audits panel on this page and avoid embedding secrets in TSX sent to remote render.
Workflow Chain
Then invoke: skill qu skills skills ai video generation
SKILL.md
READMESKILL.md - Remotion Render
> **Install the belt CLI skill:** `npx skills add belt-sh/cli` # Remotion Render Render videos from React/Remotion component code via [inference.sh](https://inference.sh) CLI.  ## Quick Start > Requires inference.sh CLI (`belt`). [Install instructions](https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md) ```bash 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 | 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 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 ```bash 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 ```bash belt app run infsh/remotion-render --input '{ "code": "import { useCurrentFrame, useVideoConfig, spring, AbsoluteFill } from \"remotion\"; export default func