Product tours · narrated · landscape 16:9
How to make a video like the Ramp ad
The Ramp ad is a full narrated product tour, and its structure is what makes two and a half minutes watchable: a black ident with a scrolling word ticker, then chapters, each opened by a title card and filled with recreated product UI driven by simulated cursor clicks, before closing on a customer logo wall and a wordmark. baz ships this as the Ramp Ad skill, portable to any B2B platform — you supply screenshots and a feature list, and the chapter structure adapts to how many capabilities you have.
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 Ramp Ad 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
- Screenshots of each product surface you want to demo
- Your product feature list
Makes it materially better
- Customer logos for the social-proof wall
- Integration logos
- Your website copy and claims, so the narration uses your own language
- Brand assets — the source brand's accent must be replaced, not reused
How to make a video like the Ramp ad: step by step
Group your features into three or four chapters
This is the decision the whole video rests on. A flat list of eight features is exhausting; three chapters of two or three related capabilities each gives the viewer somewhere to rest and a sense of progress. The chapter count drives the runtime.
Open on an ident with motion, and cut while it is still moving
The film opens black with a word ticker scrolling. The cut out of it happens at peak scroll velocity — not after the ticker settles. Letting it come to rest before cutting drains the energy you just built.
Give every chapter a silent title card
Black title cards separate the chapters and let the viewer reset. Keep them silent or ambient — narration over a title card muddies both. The narration resumes when the product comes back on screen.
Recreate the UI so the cursor can actually use it
The demo beats are recreated interfaces, not screenshots, because a cursor has to click things and the state has to change in response. Build the surfaces as real components and the interaction beats become straightforward.
Hand off state verbatim between related demos
When two consecutive beats show the same table or panel, do not re-animate it at the cut — carry it across identically. That verbatim handoff is what makes two scenes feel like one continuous session rather than two takes.
Close on proof, then the wordmark
A customer logo wall does the credibility work that no amount of feature demonstration can, then the wordmark resolves. Cut to the outro while the logo wall is still drifting.
What the finished video actually contains
Approximate timings for a ~2 min 30 s 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 |
|---|---|---|
| Open | Ident ticker | Black canvas, scrolling word ticker. Cut at peak velocity. |
| Overview | Hero devices | The product across devices, establishing scale before any detail. |
| Per chapter | Title card → demo beats | A silent black card names the chapter, then recreated UI demos with cursor clicks. |
| Texture | Phone live action | A live-action phone beat breaking up the screen-recording rhythm. |
| Proof | Logo wall | Customer logos drifting — the credibility beat. |
| Close | Wordmark outro | Hard cut from the drifting wall to the brand wordmark. |
Mistakes that cost you the view
Letting the ident ticker settle before cutting
Do this instead: Cut at peak scroll velocity. A ticker that eases to a stop before the cut makes the opening feel tentative.
Re-animating a table that carries between two beats
Do this instead: Hand it off verbatim at the cut. Re-entry animation on a surface the viewer is already looking at reads as a glitch.
Narrating over the black title cards
Do this instead: Keep them silent. The card is a breath — filling it with voice removes the only pause in a two-and-a-half-minute video.
Linear easing on a product surface entry
Do this instead: Let surfaces settle. Linear entry makes an interface look like it is sliding on a rail rather than arriving.
Keeping the source brand's accent colour
Do this instead: Replace it with yours. The structure is portable; the palette is not, and shipping someone else's accent is the fastest way to look like a copy.
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 ramp-ad
baz project create --name "Ramp Ad for my product"
baz prompt "make a video like the Ramp ad" --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
Is two and a half minutes too long?
For a product tour on a pricing or product page, no — the audience there is already evaluating. It is too long for a feed. The chapter structure makes it easy to cut a single chapter out as a standalone short.
Do I need customer logos?
Not to build the video, but the logo wall is the beat that does the most persuading. If you cannot show customer logos yet, replace it with a metric you can defend or an integrations wall.
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 Ramp Ad 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.