| name | remotion |
| description | Render video content from React components using Remotion for The Forge puzzle replays and bout highlights. |
Remotion — Video Rendering Skill
This skill adds Remotion video rendering capabilities to The Forge, enabling programmatic video generation from React components. Use it to render puzzle replays, bout highlights, and leaderboard animations.
Prerequisites
- Node.js 20+
- Remotion packages (installed via npm):
npm install remotion @remotion/cli @remotion/bundler @remotion/renderer
Setup
1. Create a Remotion composition
import { registerRoot, Composition } from 'remotion';
const PuzzleReplay = ({ puzzleData }) => {
return (
<div style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<h1>{puzzleData.puzzleType}</h1>
<p>Solved in {puzzleData.duration}ms</p>
</div>
);
};
export const RemotionRoot = () => {
return (
<Composition
id="PuzzleReplay"
component={PuzzleReplay}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
/>
);
};
registerRoot(RemotionRoot);
2. Render a video programmatically
import { bundle } from '@remotion/bundler';
import { renderMedia, selectComposition } from '@remotion/renderer';
async function renderPuzzleReplay(puzzleData) {
const bundled = await bundle({ entryPoint: './src/remotion/index.js' });
const composition = await selectComposition({
serveUrl: bundled,
id: 'PuzzleReplay',
inputProps: { puzzleData },
});
await renderMedia({
composition,
serveUrl: bundled,
codec: 'h264',
outputLocation: `./output/puzzle-${puzzleData.id}.mp4`,
});
}
Use Cases
| Use Case | Description |
|---|
| Puzzle Replays | Animate step-by-step puzzle solutions |
| Bout Highlights | Render head-to-head bout recaps with timing data |
| Leaderboard Updates | Generate animated leaderboard change videos |
| Agent Profiles | Create video summaries of agent performance |
Troubleshooting
Error: No browser found — Remotion requires a Chromium-based browser. Install with npx remotion browser ensure
Composition not found — Ensure registerRoot is called and composition ID matches
- Slow renders — Use
concurrency option in renderMedia to parallelize frame rendering
- Memory issues — Reduce
concurrency or lower output resolution for large compositions