Remotion Best Practices
clawhub2 platformsVideo Editing Easy
3.5
Best practices for Remotion - Video creation in React
159K
clawhub install remotion-best-practices
Complete toolkit for programmatic video creation with Remotion + React.
# Install Skill (downloads SKILL.md to .claude/skills/) clawhub install shreefentsar/remotion-video-toolkit # Then just tell Claude: "use Remotion Video Toolkit to help me..."
# Same install command — works with all SKILL.md-compatible AI coding tools clawhub install shreefentsar/remotion-video-toolkit
This Skill is compatible with the OpenClaw standard. After installation, a SKILL.md file is auto-generated, usable by any OpenClaw-compatible AI Agent (Claude Code, Cursor, Windsurf, etc.).
npx create-video@latest@remotion/renderer, no separate install needed# Scaffold a project
npx create-video@latest my-video
# Preview in browser
cd my-video && npm start
# Render to MP4
npx remotion render src/index.ts MyComposition out/video.mp4
# Pass dynamic data
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'
```javascript
import { Composition } from 'remotion';
const MyVideo = () => (
<div style={{
flex: 1,
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
justifyContent: 'center',
alignItems: 'center',
fontSize: 100,
color: 'white',
}}>
Hello Remotion!
</div>
);
export const RemotionRoot = () => (
<Composition
id="my-video"
component={MyVideo}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
/>
);
```Real cold-start runs of this skill on Claude Code and Codex.
Input: In a Remotion 4.0.481 project, write a bar-chart composition (staggered spring animation, labels, values) and render out.mp4.
One render, first try. Cleanest, most idiomatic code (typed, correct interpolate + clamp); visuals slightly plainer.
claude-opus-4-8
190 lines; more polished visuals (glass cards, gridlines, layered shadows), more literal to spec.
codex-cli 0.140
Output: out.mp4 — 3.05s animated bar chart. Both agents rendered successfully.
Verdict: Blind LLM judge: Codex wins visual polish (4.67); Claude wins code cleanliness (4.5).
Input: Make a 3s kinetic-typography intro for skills.video (wordmark staggered entrance + tagline follow-in).
One render, first try. Cleanest code + two-tone wordmark, most literal; visuals plainer, tagline tracking a touch loose.
claude-opus-4-8
Input: A 3→2→1 countdown where an SVG ring sweeps once per number.
Cleanest code (derived sizes, no magic numbers, smoothstep easing, ambient breathe); visuals plainer.
claude-opus-4-8
Environment: macOS · Remotion 4.0.481 · node v22 · symmetric cold start. Local headless Chromium download was network-blocked; both agents reused an existing headless shell via --browser-executable.
280 lines; richest visuals (grid texture, light sweep, glow, footer chrome, per-letter blur-in), broadcast-quality.
codex-cli 0.140
Output: out.mp4 — 3.05s intro. Both agents rendered successfully.
Verdict: Split decision: Codex wins the visual axis (broadcast-quality); Claude has the cleanest code (higher mean 4.67).
Gradient ring stroke + SVG glow filter + 60 ticks (broadcast timer motif) + layered halo, broadcast-quality.
codex-cli 0.140
Output: out.mp4 — 3.05s countdown. Both agents rendered successfully.
Verdict: Blind judge mean tied at 4.67; Codex more polished visuals, Claude cleaner code.