claude-remotion-kickstart

Claude Remotion Kickstart is a starter kit for generating videos programmatically with Claude Code and Remotion. It includes pre-built slide and overlay components, AI-powered asset generation (images, videos, voiceovers via Replicate, Deepgram, and ElevenLabs), configurable rendering presets, and transcript-based timing to sync visuals with voiceovers. The kit provides slash commands for creating new compositions, generating assets, and transcribing audio. It's designed for operations teams and developers who want to automate video content creation with familiar tools like Tailwind CSS for styling and Node.js for scripting.

[{"step":"Set up the claude-remotion-kickstart environment. Clone the starter kit repository and install dependencies using `npm install` in the project directory. Ensure you have Node.js (v16+) and Remotion CLI installed.","tip":"Run `npx remotion init` to scaffold a new project if you’re starting from scratch. Use the starter kit’s pre-built components to save time on animations and transitions."},{"step":"Customize the video script. Replace [VIDEO_TOPIC], [TONE], [STYLE], and other placeholders in the prompt template with your specific requirements. For example, use `[VIDEO_TOPIC: 'Product Launch for EcoClean Detergents']` or `[TONE: 'Energetic and youthful']`.","tip":"Use the starter kit’s `script-generator.js` script to auto-populate common video structures (e.g., intro, feature highlights, testimonials, CTA). This ensures a professional flow without manual scripting."},{"step":"Generate the video components. Use the prompt template in Claude Code to create the video scenes, animations, and transitions. For complex scenes, break them into smaller prompts (e.g., one for the intro, one for the feature demo).","tip":"Leverage Remotion’s `useVideoConfig` hook to dynamically adjust durations, resolutions, or framerates based on your target platform (e.g., Instagram Reels vs. YouTube)."},{"step":"Render the final video. Run `npx remotion render` with your output settings (e.g., `npx remotion render src/index.tsx out.mp4 --props='{\"videoTopic\":\"Product Launch\"}'`). For batch rendering, use the starter kit’s `batch-render.js` script.","tip":"Optimize render settings for your use case. For social media, use 1080p at 30fps. For internal training, 720p may suffice. Use the `ffmpeg` integration in the starter kit to add background music or voiceovers post-render."},{"step":"Review and iterate. Play the rendered video in Remotion’s preview mode (`npx remotion preview`) to check for inconsistencies. Adjust animations, timing, or branding elements as needed, then re-render.","tip":"Use the starter kit’s `quality-check.js` script to validate video specs (e.g., aspect ratio, color accuracy, audio levels) before finalizing. For client approvals, generate a shareable link via `npx remotion upload`."}]