# Make SaaS product demo videos from real screen recordings

A product demo earns its running time by showing a real task getting easier. Choose one task, capture the actual interface and let the viewer see the result. Framefields adds framing, callouts, titles and timing around that evidence.

For a team already editing demos in CapCut or Adobe Premiere Pro, the useful difference is repeatability. A feature name, screenshot or callout can live in a data file while the composition stays consistent across releases.

## Capture a complete task

Use a fictional scheduling app as your example: create a booking link and share it. Record a clean walkthrough with example data. Keep a note of the source timestamps where each action starts and ends.

| Time | Edit | Purpose |
| --- | --- | --- |
| 0–4 s | Booking page already working | Establish the outcome |
| 4–12 s | Set availability | Show the first action |
| 12–23 s | Configure the link | Explain the main feature |
| 23–33 s | Open the recipient view | Prove it works |
| 33–40 s | One next step | Tell viewers where to try it |

Choose a 1920×1080 master for a desktop product tour. Create a separate 1080×1920 layout for social feeds, with close crops and larger callouts.

## Build a reusable composition

Use `Layer.video` with `trimStartSec` to start at each recorded action. Set a scene or layer duration to end that excerpt. Add callouts as text and shape layers, anchored to the visible feature rather than floating over unrelated controls.

Keep the product recording recognizable. An animated pointer can help explain a click, but it should follow the recorded action. Drawn interface mockups are useful for an overview; label them as illustrations if you use them instead of real product footage.

Separate a shot list from the theme: source path, in-point, duration, crop and callout text belong in the shot list. Font, color and spacing belong in the theme. See [media layers](/docs/guides/charts-and-media/) and [text layout](/docs/guides/layout-and-text/) for the building blocks.

## Use Codex, ChatGPT, Claude, Cursor or Grok Bot

You can use **Codex, ChatGPT, Claude, Cursor, or Grok Bot** to plan the edit and write Framefields TypeScript. In a coding environment with project and terminal access, ask the assistant to implement the brief and run the checks. In a chat-only environment, ask for the source files, save them locally and run them in your Framefields project. Rendering needs Node.js 22+ and a supported WebGPU environment; see [getting started](/docs/getting-started/).

For Codex or Cursor, install the [Framefields skills](/docs/agents/install/):

```bash
npx skills add gatewai-dev/framefields -a codex -a cursor
```

For Claude Code, use `/plugin install framefields`. With ChatGPT or Grok Bot, supply the [agent reference](https://framefields.dev/docs/llms.txt), your brief and asset list; available execution tools depend on your environment. The workflow does not require a native integration in every assistant.

Create a project with `npx framefields init my-video --install --pm npm`, then work inside `my-video`. Use the generated font setup and put your source media under `assets/`. Run `npm run typecheck`, inspect `comp.lint()` findings, render selected frames and a grid, then run `npm run preview` before `npm run render`. The [agent workflow](/docs/agents/workflow/) covers inspection and QA. Check portrait layouts against the destination app's current controls before uploading.

## Ask an assistant to assemble it

```text
Create a 40-second Framefields product demo at 1920x1080, 30 fps.
Use assets/footage/booking-demo.mp4 and assets/shots.json for approved
in-points, durations, crops and callouts. Open with the completed
booking page. Show availability, link setup and the recipient view.
Do not invent product features. Preserve source action order.
Add a single CTA from assets/copy.md. Export buildFilm(), inspect
frames at every callout, and provide a preview with source audio.
After review, create a separate portrait layout with readable crops.
```

## Check for a usable demonstration

Watch for tiny interface text, a callout hiding the control, a cut that removes a required action, or a CTA with an outdated URL. Keep the product version with the source assets so you know when a recording needs replacing.

Measure whether viewers reach the demonstrated result and take the intended next step. A view count alone cannot tell you whether the demo explained the product.

For a physical item, follow the [product review and unboxing workflow](/blog/product-review-unboxing-videos/).