How to Create a Product Demo Video with Codex and Remotion

Codex can help make a video by planning and editing a project’s code. Pair it with Remotion, which turns React components and media into a previewable, renderable video. Codex does not itself replace a video renderer: you create a project, ask Codex to build and revise the composition, inspect the preview, then render an MP4.

This guide focuses on one practical task: turning a screen recording of an app into a polished product walkthrough. It shows how to name the starter project folder clip-lab, prepare a style sheet and shot list, steer focused edits to captions and cursor emphasis, and check the exported file. For a designed animation made directly in Claude Motion, see our Claude video guide. The shared storyboard and shot-plan prompt can help with pre-production.

What Codex does in a product-demo workflow

Codex works with a project directory in its supported desktop, CLI or IDE workflow; it can read and modify project files and run commands within the configured environment. Remotion supplies the composition and rendering workflow. This guide keeps the real application interface in your screen recording instead of asking the model to redraw product screens. Codex can help manage the timeline, captions, cursor emphasis and overlays, while Remotion previews and renders frames. Open the folder you intend to use before asking Codex to make project changes, and review the result before sharing it.

Remotion’s current starter workflow explicitly lists Codex as a supported coding agent. It uses Node.js, a blank Remotion project, the Remotion Agent Skills, and the development preview. That makes this approach more repeatable than asking a chat model for a single finished file.

What you need

• Codex available in the ChatGPT desktop app, CLI or compatible IDE client, signed in to your account.
• A current Node.js installation and a terminal that can run the Remotion project’s setup commands.
• A new or existing Remotion project; this walkthrough creates one named clip-lab.
• Any footage, music, logo, screenshots or fonts you plan to use, with permission for the intended publication.

Create and open the project folder

Open a terminal and create the blank project. The folder name is a normal project choice: replace clip-lab in the commands if you prefer another name, and use the same name in later prompts so Codex is working in the right place.

npx create-video@latest --yes --blank clip-lab
cd clip-lab
npx remotion skills add
npm run dev

The first command creates the blank project. The second moves into that folder. The third adds Remotion’s agent-specific instructions, and the final command starts the interactive development preview. Leave the preview process running.

Now open the same clip-lab directory in Codex. In the desktop app, select the project folder. In the CLI, start Codex from the project directory. In an IDE extension, open the folder as the workspace and start Codex there. Remotion documents this split-terminal workflow for coding agents: keep the dev preview running, then use a separate agent session to edit files while watching the preview update.

Ask for a style sheet and storyboard first

Before editing, record the app workflow using a clean demo account or sample data. Hide notifications, customer names, email addresses, API keys and other private details. Note the recording’s duration and the exact task the video should teach. Ask Codex for a plan before implementation:

We are in the clip-lab Remotion project. Inspect the repository and
Remotion instructions first. Do not edit files yet.

Goal: make a 30-second landscape product walkthrough from
public/footage/taskboard-demo.mp4.
Audience: a new user learning to create and assign a task.
Style: clean, neutral background, dark text, one blue accent.
Show these steps in order: create a project; add one task; choose a due
date; assign it to a teammate; confirm the saved result.
Use the original recording for all app UI. Do not redraw buttons, invent
product behavior or display personal data. Keep the cursor visible.
Use only public/audio/intro.mp3 if it exists and I have approved it.

First return a style sheet and shot list with source timecodes, in/out
points, crop or zoom, cursor emphasis, exact caption text, transition and
required asset. Preserve the order of real actions. Flag any mismatch
between this brief and the recording. Wait for approval before editing.

Check the plan against the actual recording. Confirm each click happens, the workflow ends in the expected state, captions use the app’s real labels, and each source range contains the complete action. The storyboard can also note where a zoom would clarify an interaction and where it would obscure context. Approve or revise the plan before Codex edits the project.

Build the first pass with a narrow assignment

Once the plan is approved, ask Codex to implement only the first pass. Ask it to keep copy and timing in one configuration file if you expect to revise them. Tell it where assets live, what to do when a file is missing, and how you will check success.

Implement the approved edit as a Remotion composition in clip-lab.
Keep source timecodes and caption text in a clearly named data file.
Use the original screen recording for app UI. Add only approved zooms and
cursor emphasis. Do not redraw the interface, invent behavior or add
external assets. Preserve source audio unless the approved plan says
otherwise. Keep captions readable and clear of important controls.
Start or keep the preview running. Tell me which composition is visible,
which files changed and what assets are missing. Do not render the final MP4.

Check the live preview as soon as it appears. Look at the first frame, a representative frame from each cut, cursor position, captions, transitions and the final frame. Fix structural issues before polishing small details. If Codex displays private data, hides an action or changes the recorded interface, correct the source or composition before continuing.

Give feedback that changes one visible thing

Specific edit notes make it easier to preserve what already works. Point to a scene and an observable detail, then state what should remain unchanged. For example:

Keep shot order, source ranges, voice track and caption wording.
In the task-assignment shot only, zoom in 10% after the assignee field opens.
Do not cover the selected teammate or the value in the field.
In the due-date shot, move the caption below the app window so the date
remains visible. Do not change the cursor path or any other cut.
Update the preview and list the files and time ranges you changed.

After each pass, replay the changed scene and the transition on each side. If a change creates a new problem, describe that visible problem and ask Codex to correct just it. Save useful checkpoints in Git or duplicate the project before a larger creative direction change.

Ask Codex to preserve your source recording and document the in/out points it uses. Inspect every final frame for credentials, notifications, names or test data that should not be shared. For a different visual direction, ask it to create a separate composition or project copy rather than overwrite the approved edit.

Render and inspect the MP4

When the preview is approved, ask Codex to inspect the project’s composition and render command, then render the chosen composition to a clearly named file in out/. Remotion’s CLI can show a composition picker if you omit the composition ID:

npx remotion render

Choose the approved composition in the picker and save the result as out/clip-lab-final.mp4. If your project contains several compositions or you are automating repeat renders, use its exact composition ID and output path according to Remotion’s CLI guide. Do not guess the ID from a template; ask Codex to inspect the project or use the picker.

Play the exported MP4 from beginning to end. Confirm the frame size and orientation, scene timing, subtitles, audio start and end, last frame, and that there are no missing images or black gaps. Previewing the composition alone does not prove the MP4 was successfully rendered. Save the final export and its source project separately from temporary renders.

Other tools that can improve the workflow

• Remotion Studio gives you an interactive composition preview and is the render surface for the code-based route.
• DaVinci Resolve or CapCut can be used for manual finishing when your edit depends on a traditional footage timeline, detailed audio work or colour correction. Export a clean render from Remotion, then finish a copy in the editor.
• FFmpeg is useful for media conversion and technical checks once the video already exists; it is not a storyboard or creative editor.

Keep the project folder simple: clip-lab/ for source and configuration, public/ for media used by the composition, and out/ for rendered files. Use file names that identify versions and keep a note of asset licenses. Avoid committing large source footage to a public repository unless that is intentional and permitted.

Common questions

Does Codex generate the video file by itself?

Codex can edit files and run project commands, but a video renderer such as Remotion produces the final MP4. You still need to review the result and confirm that the export exists and plays correctly.

Can I use Codex without writing React myself?

Yes. Start from Remotion’s blank project, let the agent inspect the installed instructions, and describe the result, assets, timing and constraints. You remain responsible for reviewing the code changes and the rendered scenes.

Can I create a realistic video from text?

This Remotion workflow composes code, images and supplied video. It does not itself provide a realistic text-to-video model. Add media from a licensed source or use a dedicated generative video service if generated footage is essential.

AI tools assisted with research, drafting and editorial revision. The cover illustration is an original conceptual SVG, not a Codex screenshot or frame from a produced video. No product testing, sponsorship or affiliate relationship is claimed.