Skip to content
Recaply.
Sign inSubmit a tool

LearnTutorials

Claude CodeTutorialsOpen Claude Code

Make a promo video with Claude Code and Remotion

Make a 20-second promo video for your app with Claude Code and Remotion: describe the scenes, preview in Studio and render an MP4 in under 30 minutes.

By Recaply EditorsIntermediate27 min6 stepsUpdated

A hand holds a blank clapperboard beside a short strip of blank film frames and 2 small paper stars

What you need

Remotion is free for individuals and for teams of up to 3 people. Larger companies need a Company License.

  1. Step 1: Install Claude Code

    3 min

    Claude Code writes and edits the video's code for you, right in your project folder.

    1. Open a terminal. On a Mac or Linux, run the command below.
    2. On Windows, run irm https://claude.ai/install.ps1 | iex in PowerShell instead.
    3. Open a new terminal window and run claude --version.
    Mac or Linux: run this
    curl -fsSL https://claude.ai/install.sh | bash

    You should see a version number, and no error.

    The terminal says it can't find claude?

    Close the terminal and open a new window, so it picks up the new install. Then run claude --version again.

  2. Step 2: Create a blank Remotion project

    4 min

    A blank project gives Claude a clean start, so every scene comes from your brief.

    1. In the terminal, go to the folder where you keep projects.
    2. Run the commands below to create the project and move into it.
    Run this
    npx create-video@latest --yes --blank my-video
cd my-video

    You should see a new my-video folder with a package.json file and a src folder inside.

    The terminal says npx isn't found?

    Node.js is missing. Install the LTS version from nodejs.org, open a new terminal and run the commands again.

  3. Step 3: Add the skills and open Studio

    3 min

    Remotion's agent skills teach Claude how to write good Remotion code, and Studio shows each change live.

    1. Inside my-video, run the commands below.
    2. Leave this terminal running, and open the Studio address it prints in your browser.
    Run this
    npx remotion skills add
npm run dev

    You should see Remotion Studio open in your browser, with an empty project.

    Studio isn't on localhost:3000?

    Port 3000 was busy, so Remotion picked a higher free port. Use the address the terminal prints.

  4. Step 4: Add your brand files

    3 min

    Claude can only use the logo and screenshots it can find in your project.

    1. Inside my-video, next to package.json, create a folder named public if there isn't one.
    2. Copy your logo and screenshots into public.
    3. Give them short names with no spaces, such as logo.png and screen-1.png.

    You should see your logo and screenshots inside my-video/public.

    A picture doesn't show up in the video later?

    Check that it sits in public next to package.json. Then ask Claude to load it with staticFile(), Remotion's way of reading that folder.

  5. Step 5: Describe your video to Claude

    8 min

    A clear brief with scenes, timing and brand details gets you a usable first cut.

    1. Open a second terminal window, go into my-video and run claude.
    2. Paste the prompt below, with your details in the brackets.
    3. Approve the file changes Claude asks about, and watch Studio update as it works.
    Your prompt
    /remotion-create Make a 20-second promo video for [YOUR PRODUCT], 1920x1080 at 30 fps.

Brand: logo at public/logo.png, main color [#HEX], font Inter.
Scenes:
1. Logo reveal, 2 seconds.
2. The problem in 1 line: [PROBLEM].
3. 3 features, 1 per scene, each with a screenshot from public/: [FEATURE 1], [FEATURE 2], [FEATURE 3].
4. Call to action: [CTA] and [YOUR URL].

Keep every line of text on screen for at least 2 seconds. Use simple transitions between scenes.

    You should see a new video in Studio's sidebar that plays your scenes in order.

    Claude doesn't seem to use the Remotion skills?

    Quit Claude Code and run npx remotion skills add inside my-video again. Then start claude there, since skills load when a session starts.

  6. Step 6: Polish and render the MP4

    6 min

    Small, specific requests fix timing and text faster than starting over.

    1. Play the video in Studio and note what to change.
    2. Ask Claude for 1 change at a time, such as "Hold scene 3 for 1 more second."
    3. When it looks right, click the Render button in Studio and confirm with Render video. Or run the command below in a free terminal.
    Or run this
    npx remotion render

    You should see an MP4 of your promo in the out folder inside my-video.

    Without a video name, the render command asks you which one to render.

You get

A 20-second promo video for your app, built from your own brand files and rendered as an MP4

Try next

Make an AI news video with Claude Code and HyperFrames5 steps · 23 minMake a branded launch video with OpenClaw and Remotion6 steps · 50 minInstall agent skills in Claude Code6 steps · 5 min

Did this guide work for you?

Sources

0 of 6Next: Install Claude Code