Create a Voice-Synced Reel with Claude

Use Claude Code and Remotion to build a voice-synced vertical reel locally.

Introduction

30 Second Summary

Short videos often look polished until the narration lands too early or too late. Even a small timing gap can make every scene feel disconnected from the voice.

In this project, you will prompt Claude Code to create a silent 10.5-second vertical reel with Remotion. You will then turn it into a voice-synchronized MP4 that renders on your Mac.

What You'll Build

You will press play in Remotion Studio and watch each full-screen scene change as its matching spoken line begins.

By the end of this project, you'll have:

A playable three-scene vertical reel that animates each message in sequence from a project created entirely through prompts.
A voice-synchronized story where each recorded line begins with its matching animated scene.
A reusable local render workflow that produces out/prompt-reel.mp4 and accepts new art direction through another prompt.
Secret Mission: Convert the reel into a bedtime-story visual style while preserving every timing decision and audio cue.

Are there any prerequisites?

You need a Mac with Claude Code installed. You also need Node.js and access to a paid Claude plan.

Before We Start

Before the hands-on work begins, lock in the small idea your reel will communicate. Connecting that idea to voice-synchronized animation gives every scene a clear purpose.

Set Up the Prompt-Only Video Workspace

You have a clear idea for your reel. Now it needs a dependable local home before Claude can turn that idea into motion.

A minimal, version-pinned Remotion workspace prevents mismatched packages from breaking the render. Claude Code first checks your macOS and Node.js versions before it installs anything.

In this step, get ready to:

Create the local prompt-reel workspace in macOS Terminal.
Delegate the compatibility-checked setup to Claude Code.
Verify the pinned packages with the official version report.

Create the workspace and open Claude Code

The prompt-reel folder keeps this project's files together. Starting Claude Code inside that folder gives the agent the correct project context.

Press Cmd+Space to open your Mac search bar.
Type Terminal into the search bar.
Press Enter to open macOS Terminal.
Create the workspace and start Claude Code by running this command:

mkdir -p prompt-reel && cd prompt-reel && claude

What does this command do?

The mkdir -p prompt-reel command creates the local project folder.
The cd prompt-reel command moves your Terminal session into that folder.
The claude command starts Claude Code with the workspace as its project context.

Claude Code opens inside prompt-reel. Your Terminal session now has the correct boundary for every file Claude creates.

Claude Code did not start?

Confirm that Claude Code is installed on your Mac. Confirm that your paid Claude plan is active.

If the command still does not start the agent, help me troubleshoot Claude Code on my Mac.

Build a version-pinned foundation

The setup prompt gives Claude an exact contract for the workspace. It also installs the official Remotion Agent Skills that guide later video prompts.

Ask Claude to prepare the complete workspace by sending this prompt:

Set up a minimal Remotion project in this folder without using a scaffold.

Before changing files, inspect the installed macOS and Node.js versions. If this environment does not satisfy the current official Remotion requirements, stop and explain the official upgrade path instead of guessing.

Create package.json with these exact dependencies:
- @remotion/cli 4.0.540
- @remotion/media 4.0.540
- react 19.3.1
- react-dom 19.3.1
- remotion 4.0.540

Use exact versions with no ranges. Add these scripts:
- dev: remotion studio src/index.jsx
- render: remotion render src/index.jsx PromptReel out/prompt-reel.mp4
- versions: remotion versions

Create empty src and public directories. Install dependencies with npm install --no-package-lock. Then run npx remotion skills add and install the official Remotion Agent Skills for Claude Code. Do not create the reel components yet.

What does this setup prompt do?

The environment check makes Claude confirm compatibility before changing the workspace.
The exact dependency list prevents package version drift.
The scripts prepare commands for Remotion Studio, local rendering, and version checks.
The empty src and public directories reserve clear locations for code and local assets.

A permission prompt can feel risky even in a local project. Claude Code may pause before it creates files or runs package commands.

Review each permission request before approving it.
Approve only the actions described in the setup prompt.
Follow the on-screen prompts if the skills installer becomes interactive.
Select Claude Code when the installer asks which agent to configure.
Decline every unrelated agent option.

That is the setup foundation in place. Claude's completion summary confirms each requested setup task.

You should see compatibility confirmed before the file summary. Claude should also report the empty folders, dependency installation, and Agent Skills installation.

Did the setup stop early?

Follow the official upgrade path Claude reports if your macOS or Node.js version is incompatible.
Review the latest permission request if the installation paused.
Ask Claude to resume only the setup actions described in the prompt.

For environment-specific help, help me finish the Remotion workspace setup.

Prove the packages are aligned

Every installed Remotion package must use the same version. The version report exposes any mismatch before it can reach your reel.

Before you send this prompt, ask yourself whether all three packages will report the same version.

Verify package alignment by sending this prompt to Claude Code:

Run npx remotion versions. Report any version mismatch and fix it by aligning every Remotion package to 4.0.540. Do not continue until the versions are aligned.

What does this verification do?

The version command reports the installed Remotion packages in one place.
The alignment instruction makes Claude correct a mismatch before proceeding.
The final constraint prevents an unverified workspace from reaching the next step.

The final report should show 4.0.540 beside each of the three Remotion packages. Those packages are remotion, @remotion/cli, and @remotion/media.

✔️ All three versions match

You have all three Remotion packages aligned at 4.0.540. That removes package drift from the rest of the project.

ⓧ A package shows another version

Ask Claude to complete the alignment requested in the verification prompt.
Wait for Claude to finish updating the affected package.
Send the same verification prompt again.

Versions still do not match?

Use the package report to identify which entry differs. Then help me align my Remotion package versions.

ⓧ The version check does not run

Return to the setup message in your current Claude Code session.
Ask Claude to finish the dependency installation requested there.
Send the verification prompt again after the installation completes.

Version report still unavailable?

The dependency installation may have stopped before the local command became available. Help me restore the Remotion version check.

✔️ Awesome, I've got everything!

Your package.json now matches the verified package versions. It also defines the development, rendering, and version scripts.

ⓧ I'd like to double check the full code

Compare the generated package.json with this exact file:

{
  "name": "prompt-reel",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "remotion studio src/index.jsx",
    "render": "remotion render src/index.jsx PromptReel out/prompt-reel.mp4",
    "versions": "remotion versions"
  },
  "dependencies": {
    "@remotion/cli": "4.0.540",
    "@remotion/media": "4.0.540",
    "react": "19.3.1",
    "react-dom": "19.3.1",
    "remotion": "4.0.540"
  }
}

Your prompt-only workspace is ready for motion. Next up, you will ask Claude to create the first silent rough cut in Remotion Studio.

Prompt the Silent Rough Cut

Your workspace now has aligned Remotion packages. The official Remotion Agent Skills are ready inside Claude Code.

A first rough cut tests whether equal visual timing can carry the whole message by itself. You will experience the result before deciding what the reel still needs.

In this step, get ready to:

Prompt Claude Code to create a three-scene vertical reel.
Play the reel from the beginning in Remotion Studio.
Identify the limitation of visual-only pacing.

Prompt the first visible reel

A detailed creative brief gives Claude the reel's dimensions, duration, scene boundaries, text, and visual constraints. The skill commands at the top provide Remotion-specific guidance for creating the files.

In the Claude Code session from earlier, start a new message.
Create the silent rough cut by pasting this brief into the message:

/remotion-best-practices /remotion-create /remotion-markup /remotion-studio

Create a silent first draft of a vertical motion-graphics reel.

Requirements:
- Entry file: src/index.jsx
- Root file: src/Root.jsx
- Reel file: src/PromptReel.jsx
- Composition ID: PromptReel
- 1080 by 1920 pixels
- 30 frames per second
- 315 total frames
- Three equal scenes, starting at frames 0, 105, and 210
- Scene text:
  1. One idea. / Give Claude a simple concept.
  2. Every frame becomes code. / No video generation credits.
  3. Rendered on your Mac. / A reusable reel, ready to share.
- Use deterministic CSS shapes, gradients, opacity, and vertical movement.
- Use only the installed dependencies.
- Do not add audio yet.

Create the files, run the project, and fix any runtime error you encounter. Do not ask me to edit code manually.

What does this prompt control?

The four skill commands give Claude maintained guidance for project creation, visual markup, and Studio preview.
The file names define the exact structure Claude creates inside the existing workspace.
The frame count fixes the reel at 10.5 seconds when played at 30 frames per second.
The deterministic animation requirement keeps every rendered frame repeatable.

Claude may request permission before it creates files or runs package commands. You stay in control because each request shows the action awaiting approval.

Submit the message to Claude.
Review each permission request before responding.
Approve only the file changes described in the brief.
Approve the command that starts the existing development script.
Wait for Claude to create the files and resolve any runtime errors.
Confirm Claude starts Remotion Studio with the `PromptReel` composition available.

Your first prompt-driven reel is now running locally. That is the core workflow working from brief to preview.

Studio did not open?

Check whether a permission request is still waiting in Claude Code. An unapproved command can prevent the development process from starting.

If Claude reports a runtime problem, ask it to inspect the current terminal output and fix the error without changing the reel requirements.

Help me diagnose why Claude Code did not launch my PromptReel composition in Remotion Studio.

✔️ Awesome, I've got everything!

Your generated files are ready for the visual check.

ⓧ I'd like to double check the full code

Your existing `package.json` should remain unchanged:

{
  "name": "prompt-reel",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "remotion studio src/index.jsx",
    "render": "remotion render src/index.jsx PromptReel out/prompt-reel.mp4",
    "versions": "remotion versions"
  },
  "dependencies": {
    "@remotion/cli": "4.0.540",
    "@remotion/media": "4.0.540",
    "react": "19.3.1",
    "react-dom": "19.3.1",
    "remotion": "4.0.540"
  }
}

This file keeps the development command and dependency versions established in the previous step.

The generated `src/PromptReel.jsx` file should match this reference:

import {
  AbsoluteFill,
  interpolate,
  useCurrentFrame,
} from 'remotion';

const scenes = [
  {
    title: 'One idea.',
    subtitle: 'Give Claude a simple concept.',
    background: 'linear-gradient(160deg, #160b33 0%, #5b21b6 100%)',
    accent: '#f9a8d4',
  },
  {
    title: 'Every frame becomes code.',
    subtitle: 'No video generation credits.',
    background: 'linear-gradient(160deg, #071a2f 0%, #0369a1 100%)',
    accent: '#67e8f9',
  },
  {
    title: 'Rendered on your Mac.',
    subtitle: 'A reusable reel, ready to share.',
    background: 'linear-gradient(160deg, #052e2b 0%, #047857 100%)',
    accent: '#fde68a',
  },
];

const SceneContent = ({title, subtitle, accent, duration}) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(
    frame,
    [0, 12, duration - 12, duration - 1],
    [0, 1, 1, 0],
    {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
  );
  const rise = interpolate(frame, [0, 18], [80, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const orbSize = interpolate(frame, [0, duration - 1], [220, 480], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        alignItems: 'center',
        justifyContent: 'center',
        padding: 110,
        opacity,
      }}
    >
      <div
        style={{
          position: 'absolute',
          width: orbSize,
          height: orbSize,
          borderRadius: '50%',
          backgroundColor: accent,
          opacity: 0.2,
          filter: 'blur(8px)',
        }}
      />
      <div
        style={{
          transform: `translateY(${rise}px)`,
          color: '#ffffff',
          textAlign: 'center',
          fontFamily: 'system-ui, sans-serif',
        }}
      >
        <div
          style={{
            fontSize: 116,
            fontWeight: 800,
            lineHeight: 1.02,
            letterSpacing: -5,
          }}
        >
          {title}
        </div>
        <div
          style={{
            marginTop: 42,
            color: accent,
            fontSize: 48,
            fontWeight: 600,
            lineHeight: 1.25,
          }}
        >
          {subtitle}
        </div>
      </div>
    </AbsoluteFill>
  );
};

const Scene = ({from, duration, scene}) => {
  return (
    <AbsoluteFill
      from={from}
      durationInFrames={duration}
      style={{background: scene.background}}
    >
      <SceneContent {...scene} duration={duration} />
    </AbsoluteFill>
  );
};

export const PromptReel = () => {
  return (
    <AbsoluteFill style={{backgroundColor: '#050505'}}>
      {scenes.map((scene, index) => (
        <Scene
          key={scene.title}
          from={index * 105}
          duration={105}
          scene={scene}
        />
      ))}
    </AbsoluteFill>
  );
};

This file defines the three visual scenes and their deterministic frame-based animation.

The generated `src/Root.jsx` file should match this reference:

import {Composition} from 'remotion';
import {PromptReel} from './PromptReel';

export const RemotionRoot = () => {
  return (
    <Composition
      id="PromptReel"
      component={PromptReel}
      durationInFrames={315}
      fps={30}
      width={1080}
      height={1920}
    />
  );
};

This file registers the portrait composition with its frame rate and total duration.

The generated `src/index.jsx` file should match this reference:

import {registerRoot} from 'remotion';
import {RemotionRoot} from './Root';

registerRoot(RemotionRoot);

This entry file connects Remotion Studio to `RemotionRoot`.

Inspect the visible result

Remotion Studio gives you a frame-by-frame preview of the composition. Playing the whole timeline reveals whether the three scenes form a complete viewing experience.

Switch back to the browser tab showing Remotion Studio.
Select the `PromptReel` composition if another view is active.
Move the playhead to the beginning of the timeline.

Before you press Play, do you think three equal scene lengths will make the message feel fully paced?

Press the **Play** control in Remotion Studio.
Confirm each scene fills the portrait canvas.
Read the two required text lines in each scene.
Watch for the two scene changes at equal intervals.

You will see three full-screen scenes animate in sequence. You will hear no voiceover.

You have your first visible win: Claude turned one creative brief into a working animated reel.

Missing a scene or text line?

Return to Claude Code and describe the specific missing scene or text line. Ask Claude to preserve every requirement that already works while it fixes the mismatch.

If the preview stops on a runtime problem, share the current terminal output with Claude and ask it to repair the generated files.

Help me compare my PromptReel preview with the required three scenes and identify what Claude needs to fix.

Name the designed obstacle

The preview proves that the visual sequence runs. Its silence leaves the scene boundaries disconnected from spoken delivery.

Ask Claude to summarize the limitation by pasting this message:

The animation works, but it is silent and the equal scene timing is not grounded in narration. Summarize that limitation in one sentence. Do not change the files yet.

Why pause before changing the reel?

This prompt keeps the working rough cut intact while Claude names the problem you just observed. The unchanged version gives you a clear baseline for the synchronized reel.

Submit the message to Claude.
Read Claude's one-sentence summary.
Check Claude's response for confirmation that no files changed.

Before your final playback, where do you expect the two scene changes to land on the timeline?

Return to the running Remotion Studio preview.
Move the playhead back to the beginning.
Press the **Play** control.
Listen through the entire reel.

You will see scene changes at frames `105` and `210`. You will hear no narration during the 315-frame composition.

Your visual draft works, and you have identified the timing gap it cannot solve alone. Next, you will record a voiceover and synchronize each scene with an explicit cue sheet.

Add and Sync Your Voiceover

Your silent reel now plays across three scenes in Remotion Studio. However, its equal scene changes have no relationship to spoken delivery.

A recorded voiceover gives each scene a spoken anchor. A frame-based cue sheet tells Claude Code where each matching line begins.

In this step, get ready to:

Record a three-line voiceover as public/voiceover.m4a.
Synchronize the narration with the existing three-scene cue sheet.
Render an audible MP4 at out/prompt-reel.mp4.

Record the three-line voiceover

Apple Voice Memos captures the narration as one local recording. Brief pauses give each scene a distinct spoken starting point.

Press Cmd+Space to open Spotlight on your Mac.
Type Voice Memos into Spotlight.
Press Enter to open Apple Voice Memos.
Click the recording control to begin recording.
Read the three-line script aloud from the text below:

Start with one simple idea.
Claude writes every frame as code.
Then your Mac renders the finished reel.

Why Do the Pauses Matter?

Each scene lasts 3.5 seconds at 30 fps. The pauses help your spoken starts match the existing scene boundaries.

Start line 1 at 0.0 seconds to match frame 0.
Start line 2 near 3.5 seconds to match frame 105.
Start line 3 near 7.0 seconds to match frame 210.

Click Done to save the recording.
Press Cmd+Space to return to Spotlight.
Type Finder into Spotlight.
Press Enter to open Finder.
Use Finder search to locate the prompt-reel folder.
Open the public folder inside prompt-reel.

Finder now points to the folder Remotion uses for local media assets.

Switch back to Apple Voice Memos.
Drag the saved recording into the open public folder in Finder.
Rename the copied recording to voiceover.m4a.
Double-click voiceover.m4a in Finder to play it once.

You should hear all three lines with a brief pause at each line break. That is the recording done: your reel now has a local narration asset.

Recording Missing or Silent?

Confirm that the copied recording sits inside the public folder.
Check that the file is named exactly voiceover.m4a.
Replay the original memo in Apple Voice Memos to confirm that your Mac captured the narration.

Help me troubleshoot why my recording is missing or silent.

Synchronize and render with Claude

The cue sheet maps each spoken line to one existing 105-frame scene. Claude adds the audio while preserving the reel's text, animation, duration, and scene boundaries.

Switch back to the Claude Code session from earlier.
Paste this synchronization prompt as a new message:

/remotion-best-practices /remotion-markup /remotion-render

Add public/voiceover.m4a to the existing PromptReel composition using Audio from @remotion/media and staticFile from remotion.

Use this cue sheet:
- Scene 1 and line 1: frames 0 through 104
- Scene 2 and line 2: frames 105 through 209
- Scene 3 and line 3: frames 210 through 314

Preserve the composition ID PromptReel, 30 fps, 315 total frames, and the existing visible text. Keep all animation deterministic. Run the project, verify that the audio loads, then render the composition with the existing npm render script. Fix any runtime or render error without asking me to edit code manually.

What Does This Prompt Change?

The Audio component places your narration on the composition timeline.
The staticFile('voiceover.m4a') call resolves the recording from the public folder.
The three frame ranges preserve the scene starts at frames 0, 105, and 210.
The existing render script writes the finished reel to out/prompt-reel.mp4.

Permission requests can feel risky because Claude is changing files and running local commands. Each request shows the proposed action before anything happens.

Review every permission request against the synchronization prompt.
Approve only the file changes described in the prompt.
Approve only the project commands described in the prompt.

Claude should report that the audio loads successfully. It should also report a successful render at out/prompt-reel.mp4.

Switch back to Remotion Studio from earlier.
Move the PromptReel playhead to the beginning.
Play the composition.

You should hear the first spoken line during the first scene. The next two lines should begin with their matching scene changes.

Give Claude the three actual start times if any line begins noticeably away from its matching scene.
Ask Claude to convert those seconds to frames at 30 fps before rendering again.

Studio Still Silent?

Confirm that Finder shows public/voiceover.m4a inside the prompt-reel workspace.
Ask Claude to verify the Audio import from @remotion/media.
Ask Claude to verify the staticFile('voiceover.m4a') source inside PromptReel.

Help me diagnose why the voiceover is silent in Remotion Studio.

✔️ Awesome, I've got everything!

Great. Claude preserved the existing visuals while adding the local narration asset. Confirm that your project files are saved.

ⓧ I'd like to double check the full code

import {Audio} from '@remotion/media';
import {
  AbsoluteFill,
  interpolate,
  staticFile,
  useCurrentFrame,
} from 'remotion';

const scenes = [
  {
    title: 'One idea.',
    subtitle: 'Give Claude a simple concept.',
    background: 'linear-gradient(160deg, #160b33 0%, #5b21b6 100%)',
    accent: '#f9a8d4',
  },
  {
    title: 'Every frame becomes code.',
    subtitle: 'No video generation credits.',
    background: 'linear-gradient(160deg, #071a2f 0%, #0369a1 100%)',
    accent: '#67e8f9',
  },
  {
    title: 'Rendered on your Mac.',
    subtitle: 'A reusable reel, ready to share.',
    background: 'linear-gradient(160deg, #052e2b 0%, #047857 100%)',
    accent: '#fde68a',
  },
];

const SceneContent = ({title, subtitle, accent, duration}) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(
    frame,
    [0, 12, duration - 12, duration - 1],
    [0, 1, 1, 0],
    {extrapolateLeft: 'clamp', extrapolateRight: 'clamp'},
  );
  const rise = interpolate(frame, [0, 18], [80, 0], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });
  const orbSize = interpolate(frame, [0, duration - 1], [220, 480], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        alignItems: 'center',
        justifyContent: 'center',
        padding: 110,
        opacity,
      }}
    >
      <div
        style={{
          position: 'absolute',
          width: orbSize,
          height: orbSize,
          borderRadius: '50%',
          backgroundColor: accent,
          opacity: 0.2,
          filter: 'blur(8px)',
        }}
      />
      <div
        style={{
          transform: `translateY(${rise}px)`,
          color: '#ffffff',
          textAlign: 'center',
          fontFamily: 'system-ui, sans-serif',
        }}
      >
        <div
          style={{
            fontSize: 116,
            fontWeight: 800,
            lineHeight: 1.02,
            letterSpacing: -5,
          }}
        >
          {title}
        </div>
        <div
          style={{
            marginTop: 42,
            color: accent,
            fontSize: 48,
            fontWeight: 600,
            lineHeight: 1.25,
          }}
        >
          {subtitle}
        </div>
      </div>
    </AbsoluteFill>
  );
};

const Scene = ({from, duration, scene}) => {
  return (
    <AbsoluteFill
      from={from}
      durationInFrames={duration}
      style={{background: scene.background}}
    >
      <SceneContent {...scene} duration={duration} />
    </AbsoluteFill>
  );
};

export const PromptReel = () => {
  return (
    <AbsoluteFill style={{backgroundColor: '#050505'}}>
      <Audio src={staticFile('voiceover.m4a')} />
      {scenes.map((scene, index) => (
        <Scene
          key={scene.title}
          from={index * 105}
          duration={105}
          scene={scene}
        />
      ))}
    </AbsoluteFill>
  );
};

Watch the rendered artifact

The local render proves that the narration survives outside Remotion Studio. The finished file should preserve the timing you heard in the preview.

Before you press play, which scene do you expect to see when each spoken line begins?

Switch back to the Finder window from earlier.
Return to the prompt-reel folder.
Open the out folder.
Double-click prompt-reel.mp4 to play the rendered reel from the beginning.

You should hear “Start with one simple idea” while the first scene is visible. You should hear “Claude writes every frame as code” when the second scene begins.

You should hear “Then your Mac renders the finished reel” when the final scene begins. The narration should remain audible throughout the rendered file.

Rendered File Missing or Silent?

Ask Claude to rerun the existing render script if out/prompt-reel.mp4 is missing.
Confirm that public/voiceover.m4a still plays in Finder if the rendered file is silent.
Ask Claude to inspect the render output for an audio-loading failure.

Help me troubleshoot why the rendered MP4 is missing or has no audible narration.

You have closed the gap from the silent rough cut. Your reel now carries synchronized narration through preview and local rendering.

Secret mission

Restyle the Reel Without Breaking Timing

Give the synchronized reel a calm bedtime-story art direction without changing its narration contract. Preserve every scene cue plus the original voiceover. Render a second MP4 while keeping the first file intact.

Clean Up Your Resources

Choose whether to keep your local workspace active, pause the preview process, or remove the project completely. This project runs on your Mac, so retaining its files creates no ongoing cloud or metered video-generation charges beyond your existing Claude subscription.

Cost warning

Remotion is free for individuals. The Free License also covers teams of up to three people.

Organizations with four or more people should review the current Remotion Company License before using this workflow in production.

Resources you used:

A running Remotion Studio process if you kept the preview open.
The source files inside your local prompt-reel folder.
The installed packages inside your local prompt-reel folder.
Your local public/voiceover.m4a recording copy.
The original MP4 render at out/prompt-reel.mp4.
The bedtime-story render at out/prompt-reel-bedtime.mp4.

Keep everything running

No action needed. Choose this if you are still actively prompting visual changes or testing new art directions.

Keep the prompt-reel folder on your Mac.
Leave Remotion Studio running while you continue refining the reel.
Play out/prompt-reel.mp4 whenever you want to review the original version.
Play out/prompt-reel-bedtime.mp4 whenever you want to review the alternate art direction.

Pause - I'll come back to this later

Shut down the preview process to free up memory. Your project files remain ready for your next session.

Return to the Terminal session running Remotion Studio.
Press Control+C to stop the Studio process.

The Studio preview closes while both rendered videos remain playable from the out folder.

Keep the prompt-reel folder on your Mac.
Restart Remotion Studio when you return by running this command from the prompt-reel folder:

npm run dev

What Does This Command Do?

The npm command runs the dev script from package.json. Remotion Studio starts with your existing PromptReel composition.

Delete - I don't want to use this again

Remove the local project if you do not plan to reuse this prompt-driven video workflow.

Save What You Need

Removing the folder is a big step because emptying the Trash makes the deletion permanent.

The first two actions preserve any render or voiceover copy you still want.

Copy each video you want to keep from the out folder into a folder outside prompt-reel.
Copy public/voiceover.m4a into a folder outside prompt-reel if you want to reuse the recording.
Return to the Terminal session running Remotion Studio.
Press Control+C to stop the Studio process.
Locate the local prompt-reel folder in Finder.
Drag the prompt-reel folder to the Trash.

You should see prompt-reel in the Trash. This confirms that the source files, installed packages, recording copy, and rendered videos moved together.

Empty the Trash using Finder when you are ready to remove the folder permanently.
Use Finder search to look for prompt-reel after the deletion.

You should see no local prompt-reel project folder. Cleanup complete. Your local workspace is now removed from your Mac.

Nice Work!

You did it! Your Mac now holds two voice-synchronized vertical reels built with Claude Code prompts in Remotion.

You've learned how to:

Guide Claude Code with official Remotion Agent Skills to create a silent three-scene rough cut through prompts.
Use a frame cue sheet to align three recorded voiceover lines with scene starts at frames 0, 105, and 210.
Render a voice-synchronized reel locally as out/prompt-reel.mp4 without video-generation credits.
Secret Mission: Restyle the same timed story with bedtime-story visuals in out/prompt-reel-bedtime.mp4 without changing its narration contract.

Ready to quiz yourself?