The default SaaS demo video is a screen recording with someone narrating over it. It is cheap to make, and it is usually abandoned around the 20 second mark. The reason is not production value. It is that a raw screen recording gives the viewer no idea where to look. Your interface has a navigation bar, a sidebar, a table, and a modal, and the narrator says "and then you just click here" while the cursor moves somewhere in that field of grey. The viewer's eye arrives after the click has already happened. Animated callouts fix the attention problem. Data visuals fix the credibility problem. Together they turn a walkthrough into something a prospect will actually sit through. ## The two jobs a demo video has to do A demo has to show the mechanics of the product and make a case for why the mechanics matter. Most demos only do the first. Showing mechanics is screen recording work. Making the case is where you need numbers: how much time this saves, how many sources it pulls from, what the error rate was before and after. Those claims cannot be screen recorded, because they are not on the screen. If you only narrate them, they pass without landing. A demo that alternates between the two holds attention much better than one that does either alone. Show the feature, then cut to a graphic that says what the feature is worth, then go back. ## Animated callouts, specifically "Callout" covers several different things, and they are not interchangeable. | Type | Use it when | | ----------------------- | --------------------------------------------------------------------------------------------------- | | Spotlight or dim | The relevant region is small and the rest of the UI is noisy. Darken everything else for 2 seconds. | | Arrow or pointer | You need the eye to move to a specific control before the click happens. | | Label with leader line | The thing on screen needs a name the viewer does not have yet. | | Zoom or scale up | Text in the UI is too small to read at the video's output size. | | Progress or step marker | The workflow has stages and the viewer needs to know where they are. | | Text highlight | You are reading a line of output and want one phrase in it to register. | The rule that matters most: the callout has to appear _before_ the action, not with it. Give the viewer roughly half a second to move their eye, then click. Callouts that appear simultaneously with the click are decoration, because the viewer sees them after the thing they were meant to prepare for. Second rule: one callout at a time. Two arrows on screen means neither works. A label with a transparent background, so it composites straight over the screen recording without a matte. ## Data highlights, specifically These are the cutaways. A stat that counts up, a bar chart comparing before and after, a line showing a trend, a map showing coverage. Each one is two to four seconds and replaces a sentence of narration that would otherwise be unsupported. Some that work well in B2B demos: * **Time comparison.** Two bars, manual process versus your product. This is the single most convertible graphic in most SaaS demos because it is the claim the buyer is actually evaluating. * **Count up on a headline metric.** Documents processed, integrations supported, queries per second. Short, and it gives the eye a rest between UI segments. * **Before and after on an error or cost metric.** Works when you have real numbers from a customer or from your own usage. * **An integration or architecture diagram that builds up.** Nodes appearing one at a time as the narration names them, rather than a static diagram the viewer has to parse all at once. * **A coverage map.** Only if geography is genuinely part of your value. Otherwise it is filler. A side by side comparison with the ratio called out. This is the shape of the "3x faster than the manual process" claim. Use real numbers. If you do not have real numbers yet, use fewer graphics rather than invented ones. A prospect who checks a claim and finds it hollow is worse off than one who never saw the claim. [Moshion](/create) generates animated content from a text description: charts, maps, timelines, text animations, text highlights, and complex animated concepts. Export as MP4 and drop into any editor. ## Structuring the demo A structure that works for a 2 to 3 minute demo: 1. **The problem, in one sentence, over a graphic.** Not over your UI. Ten seconds. If the viewer does not have the problem, they should be able to leave here. 2. **The end result, before the process.** Show the finished output first. People need to know what they are working towards before they will watch you work towards it. 3. **The workflow, in three or four segments.** Each segment is a screen recording with one callout, followed by a beat. Speed the recordings up. Nobody needs to watch a page load. 4. **The proof.** Your data highlights, grouped. This is where the time comparison goes. 5. **What to do next.** Five seconds, one instruction. The common mistake is spending 90 seconds on step 3 and 10 seconds on step 4\. Buyers already assume the software works. What they are uncertain about is whether it is worth switching to. ## Production notes that save time **Record at higher resolution than you publish.** Recording a 1440p display and publishing at 1080p gives you room to zoom into a region without softening it. Zooming into a 1080p capture published at 1080p looks bad immediately. **Use seeded demo data, not real customer data and not obvious placeholder junk.** "asdf asdf" in a text field undermines the whole video. Set up a clean account with plausible names and numbers once, then reuse it for every demo you record. **Speed up the recordings, then place callouts.** If you place callouts first and then change the speed, every timing decision breaks. **Export callout graphics with a transparent background.** That way they composite over the screen recording without you having to key or mask anything. Full frame data highlights can be standard MP4. **Caption everything.** A large share of B2B demo views happen muted, on a laptop, with a prospect half paying attention in a browser tab. ## Where this approach falls short Animated callouts do not rescue a confusing product. If the workflow genuinely takes eleven steps and four of them are non obvious, the demo will show that, and no amount of graphic polish hides it. Several teams have discovered a UX problem by trying to record a demo of it, which is uncomfortable but useful. This format also does not suit products where the value is invisible. Infrastructure, security, and developer tools often have very little to show on screen. For those, lean much harder on the data visuals and much less on the screen recording, or accept that a written explanation may serve the buyer better than a video. When there is nothing to record, the diagram is the demo. Build it node by node as the narration names each one. And you still need someone to assemble the timeline. Generating graphics removes the motion design work, not the editing work, though the editing involved is arranging clips rather than keyframing. ## Refreshing the demo Demo videos rot faster than any other marketing asset because the UI in them keeps changing. A demo showing an interface you shipped past is actively harmful: prospects notice, and it suggests the video is old enough that the numbers in it might be too. Build the demo so the parts most likely to change are separable. Screen recordings will need re shooting after a redesign. Graphics usually will not, since a time comparison chart survives a UI refresh. Keeping those as separate clips rather than baked into one export means a refresh is a half day rather than a rebuild. Animated visuals for your videos. In seconds. Moshion generates the animated visual you need. Describe it, export as MP4, drop it in your editor. [Try Moshion](/create)