Product demos

What is a product demo?

A product demo shows how someone uses your app to do a task. For example, it can show a person entering a website address, choosing an idea and saving a draft. Start with the task, then show the steps and the result.

You can rebuild the app’s screens with s.ui, use screenshots, or show a screen recording with s.clip. Keep the narration about what the viewer can see.

How do I capture a live website?

node bin/explainroo.js capture videos/my-demo https://example.com --mobile

capture opens the page in a fresh browser with no cookies or logins. It saves these files in assets/capture/<hostname>/:

• page.png for the first screen and full.png for the whole page, up to 8000 pixels tall. They use twice the pixel density for clearer zooms.
• mobile.png and mobile-full.png when you add --mobile.
• capture.json with colors, fonts, logo candidates, headings, navigation, buttons and form labels.
• Up to three logos and font files from Google Fonts in the weights the page uses.

It prints brand and fonts settings you can paste into video.json. Compare them with the screenshots before using them. Check font licenses and keep the license files beside the fonts. Capturing the same site again replaces its folder.

Cookie banners and chat widgets may appear, as they do for a new visitor. Pick a screenshot or part of one without them. For screens behind a login, supply your own screenshots or recording.

How do I draw the app’s screens?

Use the clean look and set brand to the app’s colors, fonts and logo. See settings for the fields.

s.ui has cards, browser frames, buttons, fields, dropdowns, toggles and status labels. A cursor can move, click and type on script cues. The scene reference lists every part and option.

Build one scene in this order: background, camera, headline, screens, cursor. Put the cursor last so it stays on top. Time clicks to [#markers] in the script. Start each cursor move early enough to arrive before the click. Leave the first 0.7 seconds of a scene free of clicks while its transition finishes.

Zoom into the part the voice mentions. Keep the headline fully in view, or zoom far enough that it leaves the frame. Check stills at those moments for cut-off text and a cursor covering words. Keep long typing quiet and give each moment one sound. Too many sounds make the voice hard to follow.

The Unspar example shows a complete demo made with s.ui.

How do I use a screen recording?

Put the recording in assets/ and show it with s.clip. A browser frame can give it an address bar. Use s.camera to zoom into the detail the narration mentions. See the clip reference for trimming, speed, looping and sound options.

Trim footage to the part you show before adding it. Long clips fill build/clips/ with extracted frames. Record at a fixed frame rate when the motion matters. Use example data and make the text large enough to read in the player’s final size.

How do I keep the demo true?

A demo makes claims about your product. Check every one:

• Copy labels, buttons and status names from the app or captured page. Use the app’s templates, language files or components when you have its code.
• Show features customers can use. Leave out admin screens, debug views and plans that are not built yet.
• Make example data look like example data. Use example.com, a made up project or a made up article title. Do not invent customers, numbers or results.
• Take narration claims from the live product website. Show prices only when that website shows them.
• Resolve differences between the website and app with the person who owns the product before making the claim.

Put the product’s name in plain text in the first frame. Then check the video and choose its publishing size.