Remotion Render
Video & media66K installs
What it does
Render videos from React/Remotion component code via inference.sh CLI.
Install
npx skills add https://github.com/its-a-skill-issue/superpowers --skill remotion-renderWebsite
www.skills.sh/its-a-skill-issue/superpowers/remotion-renderDetails
From the skill’s SKILL.md or README, by its authors. View the original
Hello World; }", "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
```
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 Welcome
; }",
"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 {progress}%
Loading...
; }",
"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 ; }",
"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 {title}
{subtitle}
; }",
"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 {children}; } export default function Main() { return First
Second
Third
; }",
"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 (
Hello from Python
);
}
""",
"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']}")
```
## Related Skills
```
# 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](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
Welcome
{progress}%
Loading...
{title}
{subtitle}
First
Second
Third
Hello from Python
More Video & media skills
See allVideo & media
The HyperFrames CLI by job - scaffold, check, look at frames, edit the timeline, preview, render locally or in the cloud, publish, project history - plus reading its JSON and recovering from build or render failures.
1.5M installsnpx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-cliVideo & media
Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of…
1.4M installsnpx skills add https://github.com/heygen-com/hyperframes --skill hyperframesVideo & media
Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or…
1.3M installsnpx skills add https://github.com/heygen-com/hyperframes --skill media-useVideo & media
About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also…
1.2M installsnpx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-registry
Skills are shared by members and not reviewed by us. Read a skill’s code before you install it.