Skip to content
Home›AI & agents›Workflows›Claude Code + Remotion explainer
Workflow

Make explainer videos with Claude Code and Remotion

Claude Code writes the video as React code in a Remotion project set up with Remotion's Agent Skills; you preview it in Remotion Studio and render it from the command line [1][5][6]. Remotion is free for individuals and organisations of up to 3 people; others need a Company License [3][4]. Claude Code needs a paid Claude plan or Console account [2].

Not yet tested by VloggingPro
Who it's for
Creators who want an AI agent to build animated explainers, title cards or captioned clips as editable code.
You need
A script and assets you have rights to; Node.js 16 or later, or Bun 1.0.3 or later; macOS 15 (Sequoia) or later, or Linux with glibc 2.35 or later [1]; a paid Claude plan or Console account [2].
Skill
Some setup
Cost
Remotion: free for individuals and organisations of up to 3 people, otherwise a Company License [3][4]. Remotion for Creators was $25 per seat per month, as seen on 2 Nov 2026 [3]. Claude Code: a Pro, Max, Ultra, Team, Enterprise or Console account [2].

Tools in this workflow

ToolRole in this workflowCostRuns
RemotionTurns React code into video; Studio previews it and the CLI renders it [10][6].Source available, licence limitsOn your computer, Cloud
Remotion official agent skillsRemotion's own Agent Skills, which give Claude Code best-practice instructions for creating, previewing and rendering Remotion projects [8].Source available, licence limitsOn your computer
whisper.cppLocal transcription for captions, installed through @remotion/install-whisper-cpp [11].Free codeOn your computer

The result

A Remotion project of React compositions written by Claude Code, which you can edit [1][5].

A rendered video in the out folder, H.264 unless you choose another codec [12].

Before you start

  • Alpine Linux and NixOS are not supported [1].
  • The free Claude.ai plan does not include Claude Code [2].
  • The Free License covers individuals (personal or commercial use), organisations of up to 3 people, non-profits and evaluation before commercial use [3]. A 20-person company with one Remotion user still needs a Company License unless an exemption applies [3].
  • Write the script first. Collect logos, fonts and images you have rights to.

Steps

  1. Install Claude Code

    Anthropic's coding agent: it reads your code, edits files, runs commands and works with your development tools [7].

    Run the installer, open a new terminal and run claude --version. A version number means it worked. Log in on first use [7].

    Homebrew and WinGet installs do not update automatically [7].

    Copied from the documentation · macOS, Linux, WSL · source [7]
    curl -fsSL https://claude.ai/install.sh | bash
    Copied from the documentation · Windows PowerShell · source [7]
    irm https://claude.ai/install.ps1 | iex
    Copied from the documentation · macOS · source [7]
    brew install --cask claude-code
    Copied from the documentation · Windows · source [7]
    winget install Anthropic.ClaudeCode

  2. Create a Remotion project

    These commands create a project in my-video from the blank template, add the Agent Skills and start the development server [1].

    Or give a coding agent Remotion's published prompt, which installs the skills with npx -y skills@latest add remotion-dev/skills -g -y and then creates the video [1].

    Copied from the documentation · source [1]
    npx create-video@latest --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

  3. Add Remotion's skills and the Claude Code plugin

    Remotion's Agent Skills are best-practice instruction files for agents such as Claude Code, Codex, Kimi Code and Cursor [8]. Add them with npx remotion skills add [1], npx skills add or the GitHub CLI [8].

    /remotion-create: new project or composition. /remotion-markup: compositions, animation, layout, typography, audio, fonts, timing. /remotion-studio: preview. /remotion-render: video or still. /remotion-captions: captions and subtitles [8].

    Remotion's Claude Code plugin bundles the skills. Install it from the terminal, then restart Claude Code [5].

    The remotion-dev/skills repository had no licence file on 2 Nov 2026 [9].

    Copied from the documentation · source [8]
    npx skills add remotion-dev/skills
    Copied from the documentation · source [8]
    gh skill install remotion-dev/skills
    Copied from the documentation · source [5]
    claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion

  4. Open Remotion Studio

    Studio previews the video, and renders it when a server is connected [10]. Start it with npm run dev in a new project [1] or npx remotion studio [10]. With the plugin, /remotion-studio starts it and opens your browser [10].

    Copied from the documentation · source [10]
    npx remotion studio

  5. Ask Claude Code to build the composition

    Start Claude Code in the project folder and run remotion-create with your request, as in Remotion's example below [5].

    Give the length, aspect ratio, scenes, on-screen text and script file. Claude Code writes files and runs commands [7], so ask for a storyboard (scenes, text, timing) first.

    VloggingPro's own example, not from Remotion's docs: /remotion:remotion-create Build a 90-second 1920x1080 explainer from script.md, one scene per paragraph, with on-screen captions.

    Copied from the documentation · source [5]
    /remotion:remotion-create Make a promo video for a record store
    You approve:Approve the storyboard (scenes, on-screen text, timing) before Claude Code builds the composition.

  6. Add voiceover and captions

    @remotion/install-whisper-cpp installs whisper.cpp and a model for local transcription [11]. The /remotion-captions skill covers captions [8].

    Record your own voiceover, or check the licence of any AI voice first.

    Copied from the documentation · source [11]
    npx remotion add @remotion/install-whisper-cpp

  7. Render the video

    In Studio, click Render, choose settings and confirm with Render video [6]. In the terminal, run npx remotion render with your composition ID (HelloWorld in Remotion's example), or without one to pick from a list [6].

    Copied from the documentation · source [6]
    npx remotion render HelloWorld
    Copied from the documentation · source [6]
    npx remotion render

  8. Review and fix before publishing

    Watch the render at full size. Check claims and figures against your source, generated visuals for errors, and names in the captions.

    Ask Claude Code to fix defects by scene and timecode, then render again.

    You approve:Check every claim, figure and visual, and confirm voice, music, font and image licences, before publishing.

If you don't want to code

  • Claude desktop app: add the Remotion plugin from Code > Customize > Plugins > Discover [5].
  • ChatGPT desktop app: the Remotion plugin creates a full Remotion project that you edit, run and render locally [1].
  • Deploy Remotion Studio to a long-running server so non-technical team members can use it through a URL [6].

Common failures

  • claude not found: the install directory is not on your PATH yet; see Anthropic's troubleshooting page [7].
  • Skills missing after installing the plugin: restart Claude Code [5].
  • Version conflicts after adding @remotion/install-whisper-cpp: put remotion and every @remotion/* package on one version, with no ^ [11].
  • Wrong composition renders: pass its ID, or leave it out and pick from the list [6].
  • Frames time out: each frame has 30,000 ms by default to resolve delayRender() calls; change it with --timeout [12].

Privacy, rights and permissions

  • Claude Code edits files and runs commands [7]. Start it in the project folder only.
  • Client-side rendering has telemetry on by default, and it cannot be turned off; server-side rendering has no automatic telemetry [3].
  • Remotion's FFmpeg binary is GPLv2+. Codec patent licences are separate and not covered by Remotion's licence [13].
  • Agency work: if the client gets only the finished video, only the agency's headcount counts towards the free limit [3].
  • The licence will change slightly in Remotion 5.0 [4].

What we will measure

  • Render time for a 90-second explainer from a 500-word original script.
  • Prompts from first draft to accepted render.
  • Render success: a usable 1080p file with correct dimensions, audio sync and frame rate, across 3 runs.
  • Visual defects found in the final review.
  • Install success on a clean machine within 30 minutes; cost per accepted minute including the Claude plan.

Sources

  1. Creating a new project | Remotion fetched 2 Nov 2026
  2. Advanced setup - Claude Code Docs fetched 2 Nov 2026
  3. License FAQ | Remotion fetched 2 Nov 2026
  4. raw.githubusercontent.com/remotion-dev/remotion/main/LICENSE.md fetched 2 Nov 2026
  5. Claude Code plugin | Remotion fetched 2 Nov 2026
  6. Render your video | Remotion fetched 2 Nov 2026
  7. Overview - Claude Code Docs fetched 2 Nov 2026
  8. raw.githubusercontent.com/remotion-dev/skills/main/README.md fetched 2 Nov 2026
  9. GitHub - remotion-dev/skills: Agent Skills · GitHub fetched 2 Nov 2026
  10. Starting the Studio | Remotion fetched 2 Nov 2026
  11. @remotion/install-whisper-cpp | Remotion fetched 2 Nov 2026
  12. npx remotion render | Remotion fetched 2 Nov 2026
  13. FFmpeg license | Remotion fetched 2 Nov 2026