A demo should show the product at work

Our planner, the model that turns a site into scenes, had a natural bias. The homepage is the richest page of most sites, so it built most scenes there. For a promo that can work. For a demo or a tutorial it does not, because the viewer wants to see the product doing its job.

We saw it most clearly on our own product. The pagetovid.com homepage embeds a demo reel and a gallery of films, so a demo of PageToVid filmed mostly video inside video. Our automatic quality judge scored it around 45 out of 100, and it was right: the film looked busy and explained nothing.

Our first attempt was advice: prefer the working pages of the app. The next render still spent three or four scenes on the homepage. Advice loses when the easy option is right there, so we turned it into rules the planner must follow in demo and tutorial mode:

• at most one homepage scene, and only as the opening establishing shot
• every other screen scene comes from the app itself: create, dashboard, editor, results
• if app pages run out, the film uses a motion graphic, never a second homepage shot
• every scene uses an exact page address, never the bare root of the site

The story to walk is concrete: land on the app, take the key action, show the result. A hard rule with a clear fallback beats any amount of gentle guidance.

The second problem was size. Screen scenes showed the whole page, so the text was too small to read, especially in a vertical film on a phone. Now every scene framed on a section pushes into the exact region the narration is about.

The recorder scrolls that section into view, holds it steady and notes its outline. The camera move itself happens in the video engine, which keeps recording and directing apart. A small button gets a strong push, a whole section a gentle one, and both stay within the page. The zoom eases in and then holds still, so text never shimmers, and it stays crisp because the screen is captured at three times its normal density.

The planner now names, for every screen scene, the section or element being talked about. A full-page shot without one counts as a mistake.

Many products live behind a sign-in, and a film of a login form is no demo at all. Our answer is a small browser extension, the Bridge. It already worked, but only for people who could load it from our source code. On 3 July it became a download on our extension page, pointed at pagetovid.com out of the box.

The person who owns the account signs in as usual in their own browser, and the extension hands that session to our recorder. The recorder then opens every page of that site already signed in, so a how-to film can show the real dashboard and the real editor. With a session, the planner is told to feature those inside screens and never a sign-in page.

Without a session, the opposite holds: a film should stay on public pages. We made that a guarantee with three guards:

• the page reader never offers sign-in, sign-up, account or dashboard paths as pages to film
• while recording, if a page shows a password field or a bare sign-in card, the recorder moves to the site's main page and a different section
• the planner is told to feature public pages only

The same day, captions gained a soft dark backing behind each phrase and stat labels started following the theme's ink colour, so text stays readable over light sites as well as dark ones.

A demo now opens on one establishing shot and then moves into the product: the create form, the editor, the result. The text on screen is readable because the camera goes to it. And when a product sits behind a sign-in, the film can still show its inside, as long as the person who owns the account opens the door.

The principle fits in one line: a demo shows the product working. See how teams use demo and tutorial films on the use cases page, or try it on your own app.