Back

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

Website

www.skills.sh/its-a-skill-issue/superpowers/remotion-render

Details

From the skill’s SKILL.md or README, by its authors. View the original

> **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) ``` 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

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

See all
  • Video & 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.

    npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-cli
    1.5M installs
  • Video & 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…

    npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes
    1.4M installs
  • Video & 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…

    npx skills add https://github.com/heygen-com/hyperframes --skill media-use
    1.3M installs
  • Video & 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…

    npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-registry
    1.2M installs

Skills are shared by members and not reviewed by us. Read a skill’s code before you install it.