skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

remotion-render

Render MP4 videos from React and Remotion TSX component code via inference.sh.

Updated Jul 28, 2026
Search Tags:#react#motion graphics#mp4#remotion#tsx#video rendering#programmatic video
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill remotion-render-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-render
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/remotion-render
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill remotion-render-aadi-110i

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing video content programmatically requires a rendering pipeline that turns React/Remotion component code into actual MP4 files, which normally demands local Remotion setup, headless browser infrastructure, and encoding configuration. This Skill removes that burden by rendering TSX code remotely through the inference.sh platform. ## Core Features & Use Cases - Code-to-Video Rendering: Pass a TSX component that exports a default component and receive a rendered MP4 video. - Full Remotion API Support: Use useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence, Audio, Video, and Img in your code. - Configurable Output: Control width, height, FPS, duration, codec, composition ID, and component props. - Use Case: Generate a data-driven animated dashboard summary video by passing a Remotion component with dynamic props, then download the resulting MP4 for embedding in a report. ## Quick Start Ask the AI to render a Remotion component as a video by running the belt CLI command with your TSX code, duration, FPS, and resolution, for example: render a 3-second 1080p fade-in title animation from this TSX code.

Frequently Asked Questions about remotion-render

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a video from Remotion code without installing Remotion locally?▼

Use the belt CLI to run the infsh/remotion-render app with your TSX component code as input. The code is rendered remotely on inference.sh and returns an MP4 video, so no local Remotion or browser setup is needed.

What Remotion APIs are supported when rendering TSX to video?▼

The renderer supports core Remotion APIs including useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence, Audio, Video, and Img. Your code can also import React and use hooks like useState and useEffect.

Can I pass dynamic props to a Remotion component when rendering?▼

Yes, the input schema accepts a props object that is passed directly to your component. Define your component to accept props such as title or subtitle, then supply their values in the props field of the input JSON.

How do I track rendering progress for long videos?▼

Use the Python SDK with stream=True to receive progress updates during rendering. Each update reports a progress percentage, and the final update contains the output video URL.

What video settings can I configure for Remotion rendering?▼

You can configure width, height, frames per second, duration in seconds, output codec, and composition ID. All parameters except the TSX code are optional and fall back to defaults.

Related Skills

Explore More Design & Creative Skills→
Asygnuz-S-A-SAsygnuz-S-A-S

remotion-best-practices

Guides building programmatic videos in React with Remotion, from animation to rendering.

Official
Advanced
chmonitorchmonitor
255

website-to-video

Capture websites with headless Chrome and convert them into brand videos.

Official
Advanced
MinhHoangDonoMinhHoangDono

ck:remotion

Standardize frame-driven animations and media in Remotion React compositions.

Community
Intermediate
hector-mannyhector-manny

video-editing

Structure, transcribe, edit, and augment video footage with AI-assisted workflows.

Community
Advanced