Mobile app demos · portrait 9:16
How to make an app demo video
An app demo video should follow one user through one feature flow, shot in portrait inside a phone frame, with the interactions animated rather than filmed. Show the tap, show the state change, show the result. With baz, the iOS App Walkthrough skill builds this from your screenshots and feature descriptions: animated UI interactions, typing simulation, and a branded outro dissolve, sized natively for the App Store and social feeds.
The shortcut: run a skill instead of starting from scratch
A skill is a context file that teaches an AI agent one specific video style — its structure, pacing, typography, motion grammar and sound design. Hand an agent the skill plus your product, and it rebuilds that video for you. The steps below are what the iOS App Walkthrough skill already encodes, so you can follow them by hand or let the skill carry them.
baz is a library of video skills: context files that teach an AI agent a specific motion-graphics style, so it can rebuild that video for your product, with your brand, from your inputs. Run a skill inside your own coding agent — Claude Code, Codex — or directly in the baz editor.
What you need before you start
Required
- A description of the feature flow you want to show, step by step
Makes it materially better
- Screenshots of each screen in the flow — the primary surface, a settings screen, a feature detail, and the confirmation state
- Your App Store listing or website copy, for accurate product claims
- Your app icon and brand colours for the outro lockup
How to make an app demo video: step by step
Write the flow as a sequence of taps
Before any video work, write the literal steps: open the app, tap this, type that, see this result. If the written sequence is longer than about six steps, the flow is too long for a demo video — split it.
Choose the flow that produces a visible result
Settings changes and configuration screens make poor demos because nothing visibly happens. Pick the flow that ends in something satisfying: a booking confirmed, a message sent, a chart appearing.
Animate the interactions, do not film them
Filmed screen captures of a phone are shaky, low-resolution, and show your notification bar. Animated interactions let you place the tap exactly on the beat, at any resolution, with a clean status bar.
Simulate typing at readable speed
Real typing is either too fast to read or too slow to watch. Typing simulation lets you hit a legible pace and land the final character exactly where you want the cut. Type something a real user would type, not "test123".
Hold on the payoff frame
The most common mistake is cutting away the instant the result appears. Give the confirmation state an extra beat — that is the frame the viewer is meant to remember.
Close on the icon and the store CTA
End with a branded dissolve to your app icon and one instruction. For App Store preview videos, check the current length and format requirements before you export.
What the finished video actually contains
Approximate timings for a 20–35 seconds cut. Treat them as a shape to hit, not a spec — the exact durations shift with your script and your music.
| Time | Beat | What is on screen |
|---|---|---|
| 0:00–0:03 | Phone enters | The device frame establishes with the app already open on its primary surface. |
| 0:03–0:12 | First interaction | An animated tap, then the screen transition. One action, clearly legible. |
| 0:12–0:22 | Input beat | Typing simulation at readable speed, ending on a deliberate final keystroke. |
| 0:22–0:30 | Payoff | The confirmation or result state, held long enough to register. |
| 0:30–0:35 | Branded outro | Dissolve to app icon, name and call to action. |
Mistakes that cost you the view
Showing five features in one video
Do this instead: One flow per video. Make five short videos instead — they perform better individually and you can test which feature actually converts.
Filming a real phone
Do this instead: Animate the UI. Camera glare, moiré on the screen, and a visible battery indicator all cost you credibility for no benefit.
Instant transitions between screens
Do this instead: Let each state hold for a beat. If the viewer cannot see what changed, the demo has not demonstrated anything.
Demo content that is obviously placeholder
Do this instead: Use realistic names, amounts and messages. Placeholder text is the fastest way to make a real app look unfinished.
Building it landscape and cropping
Do this instead: Author in portrait. A phone demo that has been cropped from 16:9 always has the wrong composition for the frame it ends up in.
Run it from your own agent
Skills are designed to run inside a terminal agent like Claude Code or Codex, against a project you control. The same skill produces the same style whether it runs in your agent or in the baz editor.
npm install -g bazaar.it@latest
# Install this skill into your agent (Claude Code, Codex or Cursor)
baz skill add ios-app-feature-walkthrough
baz project create --name "iOS App Walkthrough for my product"
baz prompt "make an app demo video" --stream-json
baz review --summary --json
baz export start --wait --format mp4 --jsonOperations draw from a prepaid balance. See the CLI reference for the full command set.
Common questions
Can I use this for an App Store preview video?
The output is portrait and built from your real screens, which is the right starting point. Check Apple's current App Store preview specifications for length, resolution and content rules before submitting, since those requirements change.
Does it work for Android apps?
The skill is authored around an iOS phone frame, but the pattern — one flow, animated taps, typing simulation, payoff hold — applies unchanged. Supply Android screenshots and ask the agent to adjust the device frame.
What if my app is not built yet?
You can demo from designs. The skill works from screenshots, and it does not care whether those came from a shipped build or from Figma — though be careful about implying a feature exists when it does not.
Do I need video editing experience?
No. The skill carries the editing decisions — shot order, pacing, type treatment, transitions, sound design. You supply the raw material and the facts about your product; the agent assembles the cut. You review it and ask for changes in plain language.
Can I run this in my own coding agent instead of the baz editor?
Yes. Skills are designed to be run from a terminal agent like Claude Code, Codex or Cursor. Install the CLI with `npm install -g bazaar.it@latest`, then `baz skill add <slug>` to pull the skill into your agent. The same skill produces the same style whether it runs in your agent or in the baz editor.
What does it cost?
baz bills against a prepaid dollar balance rather than a seat subscription — you top the balance up and each operation (generation, voiceover, render, export) draws a listed amount from it. There is no per-seat fee to make a video, and the price of each operation is published.
Can I change the video after it renders?
Yes, and this is the point of doing it as code rather than as a flat render. Every scene is a real component you can edit — ask the agent to re-time a beat, swap a screenshot, rewrite a line, or change the accent colour, and only that part rebuilds. You are not re-rendering from scratch each time.
Will every video from this skill look the same?
The grammar is the same — that is what makes it a skill and not a template. The content is not: your brand colours, typography, screenshots, copy and data all come from your inputs. Reusing one skill across a series is a feature, because episode three lands in the same visual language as episode one instead of being rebuilt from scratch.
Related guides
Pick a skill. Get the video.
Run the iOS App Walkthrough skill in your own coding agent, or in the baz editor. Usage comes out of a balance you top up, with a listed price per operation — no seat subscription to make a video.