remotion-render_skill

Overview

This skill renders MP4 videos from React/Remotion TSX component code using the inference.sh rendering backend. It supports the full Remotion API surface (hooks, primitives, animations) and lets you configure resolution, frame rate, duration, and codec. Supply a default-exported component and optional props; the skill compiles and returns a rendered video URL or streaming progress. It's designed for programmatic, data-driven, and motion-design video generation pipelines.

How this skill works

You pass TSX source that exports a default React component plus render parameters (width, height, fps, duration_seconds, codec, composition_id, and props). The service evaluates the component with allowed Remotion imports (useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence, Audio, Video, Img) and renders frames into a final MP4. The CLI and SDK return a video URL or stream progress events so you can monitor rendering in real time. The skill runs remotely, so no local Remotion setup is required.

When to use it

• Generate marketing videos or intros from React components
• Produce data-driven or batch videos with dynamic props
• Convert interactive React animations into high-quality MP4s
• Create motion graphics templates using Remotion APIs
• Automate rendering in CI/CD or server workflows

Best practices

• Export a single default component and pass dynamic values via props to reuse code
• Use useVideoConfig for frame-accurate animations and to compute durationInFrames
• Keep assets inline or referenced by stable URLs to avoid missing resources
• Test animations at low resolution or short durations before full renders to save time
• Stream progress to capture failures early and retrieve partial outputs if supported

Example use cases

• Render a 30-second social ad from a template component with product data props
• Produce animated KPI videos that pull numbers from a data pipeline and render hourly
• Turn React prototype animations into shareable MP4 demos for stakeholders
• Batch-generate personalized greeting videos by iterating props and rendering each MP4