--- title: "Remotion + Claude Code: Edit Videos by Describing Them" description: "Code-based video editing. Describe the video you want, Claude writes Remotion code, video renders. Faster than timeline editing for structured content." pillar: "Claude Code" level: "intermediate" date: "2026-01-27" url: "https://theglitch.ai/academy/claude-code/remotion-video-editing" --- # Remotion + Claude Code: Edit Videos by Describing Them Code-based video editing. Describe the video you want, Claude writes Remotion code, video renders. Faster than timeline editing for structured content. # Remotion + Claude Code: Edit Videos by Describing Them Timeline-based video editing (Premiere, Final Cut, DaVinci) is powerful but slow. Every cut, transition, and text overlay is manual. Repetitive content takes repetitive effort. [Remotion](https://remotion.dev) flips this. Videos become React code. Describe what you want, Claude writes the code, video renders. For structured content—product demos, social clips, explainers—this is faster than dragging clips on a timeline. Not for every use case. But for content that follows patterns, it removes the editing bottleneck entirely. > **The Glitch's Take:** "Remotion isn't better than traditional editing. It's different. For one-off creative work, use Premiere. For scaled content that follows templates, Remotion saves hours." --- ## Who This Is For - You create repetitive video content (product updates, social clips, tutorials) - You're comfortable with Claude Code - You want to scale content production without scaling editing time - You're willing to set up a Remotion project (one-time) ## Who This Is NOT For - Cinematic/creative work needing frame-by-frame polish - One-off videos that don't repeat patterns - People who enjoy manual editing - Anyone not comfortable with some technical setup --- ## TL;DR - **Remotion** = Videos as React code - **Claude Code** = Write that code by describing what you want - **Result:** Describe video → Claude writes Remotion code → Render - **Best for:** Product demos, social clips, recurring content formats - **Setup time:** 1-2 hours (once) - **Video creation time:** Minutes instead of hours --- ## How Remotion Works Traditional editing: Import footage → Drag to timeline → Cut → Add effects → Export. Remotion: Write code that describes video → Run → Export. ```tsx // A simple Remotion video export const MyVideo = () => { return ( ); }; const MainVideo = () => { return ( ); }; ``` The code IS the video. Change the code, video changes. Copy the code with different content, new video. ### Why This Matters Every component is reusable. Build `` once, use it in every video. Build ``, change the product image, get a new demo. For repetitive content, this compounds. The 50th video takes minutes because you've built all the components. --- ## The Claude Code + Remotion Workflow ### Step 1: Set Up Remotion Project (Once) Start a Remotion project: ```bash npx create-video@latest my-videos cd my-videos npm start ``` This gives you a working Remotion environment with preview in browser. ### Step 2: Dump Assets Put everything Claude needs in the project: - Logo files (PNG, SVG) - Brand colors (define in a theme file) - Fonts (download and add) - Stock footage/images (in public folder) - Audio tracks if any Create a `theme.ts`: ```typescript export const theme = { colors: { primary: '#3B82F6', secondary: '#10B981', background: '#0F172A', text: '#FFFFFF', }, fonts: { heading: 'Inter', body: 'Inter', }, }; ``` Claude reads this and uses consistent styling. ### Step 3: Describe the Video to Claude Open Claude Code in your Remotion project. Describe: ``` Create a 30-second product demo video. Structure: - 0-5 seconds: Title card with product name "ExpenseLog" and tagline "Track spending in seconds" - 5-20 seconds: Screen recording demo (use placeholder) - 20-25 seconds: Three feature highlights (icons + text) - 25-30 seconds: CTA with website URL Style: - Use theme.ts for colors - Modern, clean transitions (subtle fades) - Bold text, centered - 30fps, 1080p ``` Claude writes the Remotion components. You preview in browser. Iterate. ### Step 4: Iterate with Natural Language ``` The title card is good but: - Make the tagline smaller (50% of title size) - Add a fade-in animation (0.5 seconds) - Move the logo to top-left corner ``` Claude adjusts the code. Preview updates. Continue until it looks right. ### Step 5: Render ```bash npx remotion render src/index.tsx main out/demo.mp4 ``` Video exports. Done. --- ## What Remotion Does Well ### Repetitive Content **Social clips:** Build template once. Swap headline text for each post. Render 10 variations in minutes. **Product updates:** Same structure every release. Change feature list, screenshots. New video. **Tutorials:** Consistent intro, outro, chapter structure. Change middle content per topic. ### Data-Driven Videos Remotion can read data files. Generate videos from CSV or JSON: ```tsx // Video that reads product data const products = [ { name: "Product A", price: "$99", image: "/a.png" }, { name: "Product B", price: "$149", image: "/b.png" }, ]; // Generate video showing each product products.map(product => ( )); ``` Build one template, generate 100 product videos from a spreadsheet. ### Consistent Branding Every video uses the same components. Same fonts, colors, transitions, timing. Brand consistency without manual checking. --- ## What Remotion Does Poorly ### Creative Editing Complex cuts, frame-by-frame adjustments, creative effects—traditional editors are better. Remotion is programmatic. It follows rules. Creativity often means breaking rules. ### Mixed Media Heavy footage editing (syncing interviews, B-roll, audio mixing) is painful in code. Timeline-based editors show everything visually. ### One-Off Videos If you're making one video, the setup time isn't worth it. Remotion shines at scale. --- ## Real Example: Weekly Update Video **The task:** Create a weekly product update video. Same format every week. New content. **Traditional editing time:** 2-3 hours per week **Remotion time:** 15 minutes per week (after initial setup) ### The Template ```tsx const WeeklyUpdate = ({ weekNumber, updates }: Props) => { return ( {/* Intro - 3 seconds */} {/* Updates - variable length */} {updates.map((update, i) => ( ))} {/* Outro - 3 seconds */} ); }; ``` ### Weekly Process 1. Write updates in a JSON file 2. Tell Claude to regenerate video data 3. Preview → adjust if needed 4. Render → upload The video structure never changes. Only content does. --- ## Claude Code Prompts That Work ### Starting a New Video Type ``` I want to create a template for Instagram Reels promoting blog posts. Requirements: - 9:16 aspect ratio (1080x1920) - 15-30 seconds - Hook text at start (large, bold) - Blog title in middle - Author headshot in bottom corner - CTA at end ("Link in bio") Use my theme.ts for colors. The template should accept: - hookText: string - blogTitle: string - authorImage: string path - duration: number (in seconds) ``` ### Iterating on Style ``` The transitions feel abrupt. Add these changes: - Fade-in for all text (0.3 second duration) - Slide-up animation for the CTA - Add subtle zoom to the background during hook text Use Remotion's useCurrentFrame() and interpolate() for animations. ``` ### Adding Motion ``` The blog title is static. Make it: - Start off-screen (below) - Slide up into center over 0.5 seconds - Stay for 3 seconds - Fade out over 0.3 seconds Use spring animation for the slide (spring config: mass 0.5, stiffness 100). ``` ### Generating Multiple Versions ``` I have 10 blog posts in /data/posts.json. Generate a video for each one: - Read the JSON file - Create a numbered output for each post (reel-1.mp4, reel-2.mp4, etc.) - Use the InstagramReel template we built - Each video should be 20 seconds ``` --- ## Common Issues | Issue | Why It Happens | Fix | |-------|----------------|-----| | Preview not loading | Remotion dev server not running | Run `npm start` | | Fonts not showing | Custom fonts not loaded | Add fonts to public folder, import in CSS | | Animation jittery | Frame rate issues | Use `useCurrentFrame()` properly, check fps | | Video too long/short | Duration math wrong | Check durationInFrames = seconds × fps | | Export fails | Codec issues | Install FFmpeg, check Remotion docs | | Assets not loading | Wrong paths | Use `staticFile()` for assets in public folder | --- ## What's Next **Ready to try it?** 1. Set up a Remotion project (1-2 hours first time) 2. Create your theme file (colors, fonts) 3. Build one template with Claude Code 4. Iterate until it looks right 5. Render your first video **Want to go deeper?** - [Remotion documentation](https://remotion.dev/docs) — Full API reference - [Claude Code Complete Guide](/academy/claude-code/claude-code-complete-guide) — Advanced Claude techniques - [Business Automation](/academy/claude-code/business-automation-guide) — More automation patterns **Example projects:** - Product demo template - Social clip generator - Podcast audiogram creator - Weekly update format --- ## FAQ ### Do I need to know React? Basic familiarity helps. But Claude writes the code—you describe what you want. Most people learn enough React through iteration. ### How does render time compare to traditional editing? Render time is comparable (video encoding is video encoding). The time saved is in editing, not rendering. ### Can Remotion handle complex animations? Yes. It supports CSS animations, spring physics, keyframes. Claude can write these from descriptions. Complex != impossible. ### What about audio? Remotion supports audio. Add audio files, use `