# Render React Animations as Videos

Turning React animation code into shareable video requires a rendering pipeline. This skill submits Remotion components to inference.sh and returns rendered video output.

## Install

```bash
npx skillstore add inferen-sh/remotion-render
```

## Metadata

- Status: approved
- Slug: inferen-sh-remotion-render
- Skillstore revision: r2
- Version status: missing
- Tree hash: 2b8072583eac799f61e8826560be1293ebc70512cb46193e62ef62f268152df8
- Author: inferen-sh
- GitHub username: inferen-sh
- License: MIT
- Repository: https://github.com/inferen-sh/skills/tree/main/tools/video/remotion-render/
- Ref: 4121de961d1b6f2ffca856260e239505c302452c
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network
- Quality score: 50
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/inferen-sh-remotion-render
- Manifest: https://skillstore.pages.dev/api/skills/inferen-sh-remotion-render/manifest

## Capabilities

- Submits default-exported React and Remotion TSX components for video rendering.
- Configures video width, height, frame rate, duration, and codec.
- Passes structured props into a rendered React component.
- Uses Remotion timing, interpolation, spring, sequence, audio, video, and image APIs.
- Shows CLI, Python SDK, and streaming progress workflows.
- Returns a rendered video reference from the inference.sh service.

## Use Cases

- Create Product Animations: Render reusable product announcements from React components with configurable titles, colors, and timing.
- Produce Data Videos: Pass structured values into a component to generate consistent counters, reports, or metric animations.
- Automate Motion Assets: Generate repeatable social and campaign videos from approved Remotion templates.

## Prompt Templates

### Render Simple Text

```
Create a three-second Remotion video with centered fade-in text. Use 1920 by 1080 pixels at 30 frames per second.
```

### Animate Provided Values

```
Create a Remotion component that receives title and percentage props. Animate the percentage from zero and render a five-second square video.
```

### Build a Sequenced Scene

```
Render three timed scenes with Sequence, spring transitions, and consistent typography. Use 60 frames per second and provide progress updates.
```

### Prepare a Production Render

```
Review this Remotion TSX for unsupported imports, secret values, timing errors, and layout issues. Then render with my approved dimensions, duration, and codec.
```

## Limitations

- Requires an inference.sh account, belt authentication, and network access.
- Sends component source and props to an external rendering service.
- Only documented React and Remotion imports are supported.
- Rendering cost, queue time, output retention, and service limits are not documented here.

## Best Practices

- Remove secrets and confidential values before submitting code or props.
- Test timing and layout at a lower resolution before starting a final render.
- Specify dimensions, frame rate, duration, and codec explicitly for repeatable output.

## Anti Patterns

- Do not submit untrusted TSX without reviewing its imports and behavior.
- Do not place credentials, private URLs, or personal data in component source or props.
- Do not install related skills or packages without verifying their publisher and version.

## Security Audit

- Audited at: 2026-08-06T11:12:51.193\+00:00
- Summary: Most external-command detections are Markdown formatting, code fences, or source examples and are false positives. Eight examples invoke external tooling, one image loads remotely, and the workflow sends supplied code and props to inference.sh.

## Stats

- Views: 164
- Downloads: 7
- Favorites: 0
- Popularity score: 0