# Render React Animations as Videos

Creating polished video from React animation code requires a reliable rendering workflow. This skill sends Remotion TSX to inference.sh and returns a rendered video.

## Install

```bash
npx skillstore add infsh-skills/remotion-render
```

## Metadata

- Status: approved
- Slug: infsh-skills-remotion-render
- Skillstore revision: r2
- Version status: missing
- Tree hash: 2b8072583eac799f61e8826560be1293ebc70512cb46193e62ef62f268152df8
- Author: infsh-skills
- GitHub username: infsh-skills
- License: MIT
- Repository: https://github.com/infsh-skills/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: 74
- Public page: https://skillstore.pages.dev/skills/infsh-skills-remotion-render
- Manifest: https://skillstore.pages.dev/api/skills/infsh-skills-remotion-render/manifest

## Capabilities

- Renders default-exported React TSX components through the infsh/remotion-render application.
- Configures width, height, frame rate, duration, codec, composition identifier, and component props.
- Uses documented React and Remotion imports for frame-based animation.
- Supports belt CLI and Python SDK requests with optional streaming progress.
- Returns a video output reference after remote rendering completes.

## Use Cases

- Build Product Animations: Convert a React animation concept into a configured Remotion render for product demos or release clips.
- Produce Motion Graphics: Render timed text, counters, sequences, and spring animations at a chosen aspect ratio and frame rate.
- Generate Data-Driven Videos: Pass structured props into reusable components and monitor longer renders through streamed progress updates.

## Prompt Templates

### Render a Simple Title

```
Create a three-second Remotion title animation with a dark background, white text, 1920x1080 resolution, and 30 FPS. Render it through inference.sh.
```

### Animate Component Props

```
Build a Remotion component that accepts title and subtitle props. Fade both elements in, then render a five-second square video.
```

### Sequence Multiple Scenes

```
Create three timed Remotion scenes using Sequence and interpolate. Configure clean transitions, 60 FPS, and a ten-second duration.
```

### Design a Streaming Render Workflow

```
Prepare a Python SDK workflow for a parameterized Remotion component. Include validation, render settings, streamed progress handling, and final video output reporting.
```

## Limitations

- Requires belt CLI login or the inference.sh Python SDK and network access.
- Rendering occurs on inference.sh, so submitted code and props leave the local environment.
- Available component imports are limited to the documented React and Remotion packages.
- The skill provides instructions and examples, not a bundled local renderer.

## Best Practices

- Keep animation timing derived from the current frame and configured frame rate.
- Test short, low-resolution renders before requesting long or high-resolution output.
- Remove secrets and confidential values from code and props before remote submission.

## Anti Patterns

- Do not embed credentials, private URLs, or sensitive customer data in submitted components.
- Do not assume browser-only dependencies are available beyond the documented imports.
- Do not request expensive final settings before validating composition timing and layout.

## Security Audit

- Audited at: 2026-08-06T12:07:44.523\+00:00
- Summary: Most static findings are Markdown formatting or documentation links, not shell execution or unauthorized network activity. Unpinned skill installation commands create supply-chain exposure, and submitted code and props are processed by inference.sh.

## Stats

- Views: 101
- Downloads: 6
- Favorites: 0
- Popularity score: 0