Build a product demo video with Remotion

Create a polished SaaS product demo from editable React and TypeScript components. Combine browser mockups, cursor walkthroughs, feature scenes, onboarding flows, terminal sessions, and 3D product UI without starting every animation from scratch.

Turn a product flow into a video story

A strong product demo introduces the product, guides attention through the interface, explains the value, and finishes with a clear brand moment.

  1. Open with Logo Reveal.
  2. Present the interface with Perspective View.
  3. Frame the product in Browser Spotlight.
  4. Guide the workflow with Cursor Tour.
  5. Explain benefits with Feature List.
  6. Show setup with Onboarding Steps.

Remotion components for product demos

  • Logo Reveal: A geometric brand reveal for intros, outros, sponsorships, and identity transitions.
  • Perspective View: A transparent 3D perspective wrapper with seamless ambient camera motion for React interfaces, screenshots, browser mockups, and product UI.
  • Browser Spotlight: A polished Chrome or Safari frame that accepts any React content as the page body.
  • Cursor Tour: A reusable cursor walkthrough overlay with constant-speed waypoint motion, click pulses, an optional moving spotlight, and content-derived timing.
  • Feature List: A bold split-layout scene for product benefits, capabilities, and numbered talking points.
  • Onboarding Steps: A compact animated stepper with a flexible active-step content slot for onboarding, setup flows, launch checklists, and sequential SaaS stories.
  • Terminal Session: An animated command-line session that types commands and reveals their outputs for developer demos, CLI launches, and SaaS product stories.

Start with a Remotion project

npx create-video --yes --blank my-video

cd my-video

npx @agent-motion/cli add browser-spotlight

npx @agent-motion/cli add cursor-tour

No separate Agent Motion CLI installation or API key is required.

Tested, editable source

Agent Motion components are distributed as TypeScript source under the MIT license. Each registry component is type-checked and rendered at its first, middle, and final frames before publication.

Frequently asked questions

Do I need Remotion installed?

Yes. Agent Motion adds components to an existing Remotion project.

Can I edit the components?

Yes. The CLI copies editable TypeScript source into your project.

Does it work with Codex and Claude Code?

Yes. Any coding agent with terminal access can inspect the registry, preview an installation plan, and add component source.

Are the components free?

Yes. The public registry and CLI require no Agent Motion account, subscription, or API key.