Render batch product demo videos from JSON with Claude Code and Remotion
Replace slow timeline editing and generic templates: mount a Remotion Agent Skill in Claude Code, feed a JSON payload of feature highlights, and render crisp 60fps MP4 clips from the terminal.
Why default setups fall short
One of the most bookmarked creator workflows on X combines Anthropic's Claude Code with Remotion's programmatic React video engine. Instead of dragging keyframes inside After Effects or CapCut, you lock physics-based spring curves inside a reusable SKILL.md and let a Node worker render 10 to 100 localized product launch videos directly from a JSON array.
Prerequisites before starting
- Node.js 20+ and FFmpeg installed locally or in Docker
- Claude Code, Cursor, or Antigravity for component generation
- A JSON file containing product titles, metrics, and UI screenshots
Step-by-step implementation
1. Lock spring physics and forbid CSS transitions in SKILL.md
Standard CSS animations drop frames during headless Chromium video capture because they run on wall-clock time instead of frame index. Your Remotion skill file must force the coding agent to drive every opacity, scale, and translateY value strictly through useCurrentFrame() and spring().
// Hard rule inside 01-remotion-motion-SKILL.md
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const entrance = spring({
frame: frame - 12,
fps,
config: { damping: 18, stiffness: 140, mass: 0.8 }
});
2. Parameterize compositions with Zod inputProps schemas
Define a strict schema for your video composition so every text headline, badge metric, and accent hex can be overridden at render time via CLI flags or a JSON batch queue without touching React code.
export const DemoCardSchema = z.object({
headline: z.string(),
metricValue: z.string(),
subcopy: z.string(),
accentColor: z.string().default("#1B4332")
});
3. Run headless batch rendering across a JSON manifest
Use a lightweight Node runner script that loops over your JSON array and invokes npx remotion render with --props, outputting social-ready 1080x1350 or 1920x1080 H.264 MP4 files with constant rate factor (CRF 18) for zero compression artifacts on X.
npx remotion render src/index.ts ProductLaunchCard out/launch-01.mp4 \
--props='{"headline":"Shipped in 48 hours","metricValue":"+310%","subcopy":"Zero timeline editing"}' \
--codec=h264 --crf=18
4. Verify audio loudness and first-frame thumbnail hook
X auto-plays video muted in the feed. Always render frame 0 with the primary metric card already at 85% opacity so the static feed thumbnail is readable before playback starts.