Summarize with AI
The best SaaS demo video for a website opens on the finished result, then works backwards to show how the product got there. Keep it close to seventy-five seconds, caption every line so it works with the sound off, and never leave an AI wait on screen as a spinner: cut it, or show it as visible progress.
That order matters because a stranger on your homepage gives the video a few seconds to prove the product is real. If the first output appears two minutes in, most of them never see it. Whether you need a video at all, or a clickable demo, is a separate call, covered in our guide to interactive demos for AI products. This post assumes you chose the video and want it to work.
The product tour where the rent roll appears at 2:15
Picture an AI tool for property managers. You drop in a folder of lease PDFs and it returns a rent roll: one table with every unit, tenant, monthly rent, lease end date and rent increase, read straight from the documents. It is genuinely hard work. Leases are scanned, amended by hand and written by different lawyers.
The homepage has a button that says Watch the product tour. It opens a video that runs three minutes and forty seconds. Here is the order. The logo animates in over music for six seconds. The founder stands at a whiteboard and introduces his cofounder and the team until 0:50. A slide titled How it works shows three boxes, OCR, Extraction and Validation, until 1:30. Then the upload screen appears, and a cursor drags forty-two PDFs onto a panel reading Drop leases here.
At 1:50 a spinner appears with the words Processing leases under it. It turns for twenty-five seconds. At 2:15 the rent roll finally arrives: forty-two rows, with three of them tagged in amber, Renews in 60 days. The last eighty-five seconds cover the CSV export, a settings page and an end card with a Book a demo button.
Every part of that video is true. The problem is the order. The one thing a property manager wants to see, the table that saves them a week of data entry, sits behind two minutes of things only the founder cares about.
Most viewers leave before the output arrives
Wistia studied more than 13 million videos on business websites. For videos between one and five minutes, it reports that most viewers drop off around the midpoint. The midpoint of a video that runs three minutes forty is 1:50. That is the exact second the spinner starts. A typical viewer sees the logo, the team, the diagram and the upload, and leaves before the product does anything.
The founder's own behaviour gives this away. On sales calls he never plays the tour. He shares his screen, opens a finished rent roll he saved earlier, and points at the amber rows first. Those calls go well. He has re-recorded the whiteboard intro three times this quarter, each version shorter, and each one still opens on him. The video gets edited at the front, where it was never the problem.
The cost is not only a lower play rate. Before a partner meeting, an investor opens the homepage and clicks the tour. If what they see is a logo, a team photo and a spinner, the product reads as early, whatever the engineering behind it. For AI companies the Series A bar now sits around 3.5 million in ARR (Carta, Q1 2026), up from roughly one million three years earlier. A website that undersells a hard product makes that climb steeper, one skipped meeting at a time.
Start at the result, then rewind
Most advice on demo videos says to tell a story: the problem, the solution, then the product. That works in a pitch, where people agreed to sit for twenty minutes. On a website it is backwards. Nobody chose to watch your video. They clicked it to check one thing, which is whether the product does what the headline claims. So answer that first and explain after.
Here is the same tour recut, as an example, at about seventy-five seconds. At 0:00 the finished rent roll is already on screen, with a caption that reads 42 leases in. One rent roll out. At 0:04 the cursor hovers an amber row and a small panel opens showing the source: page seven of that lease, with the renewal clause highlighted. At 0:10 the caption reads Here is how it got there, and the video cuts back to the folder of PDFs being dropped in.
From 0:15 the leases are read one at a time, and the table fills in row by row as each one finishes. From 0:30 the video shows one hard case: a scanned lease with a handwritten rent change, which the tool flags as Rent amount unclear, check page 4 instead of guessing. At 0:55 the rent roll exports to a spreadsheet. At 1:05 the end card reads Try it on five of your own leases, with one button.
The whiteboard, the team and the architecture slide are gone. They belong on the about page and in the deck. Nothing true was removed from the product story. It was put in the order a buyer checks things.
The twenty-five seconds of Processing leases
A spinner on a website video is a choice nobody made on purpose. Someone screen-recorded a real run, trimmed it a little, and left the wait in because it felt honest. It is the worst footage in the video. Nothing moves, nothing is learned, and it lands right where attention is thinnest.
You have two good options. The first is to cut the wait entirely: one frame the PDFs drop in, the next frame the table is full. Viewers accept a hard cut without a second thought. The second is to show the wait as progress. Replace the spinner with a counter reading Reading lease 17 of 42, and let rows appear in the table as each lease finishes. Speed it up, and say so on screen with a small caption: Sped up. The real run took about two minutes. That one line keeps the edit honest, and it tells a buyer something useful about the product.
Progress beats a cut when the steps themselves are the argument. If your product checks clauses, compares figures and flags conflicts, watching it do that is the proof. On Chariot, a speech AI lab, we designed a separate illustration and animation for each section of the site, so a visitor sees what the model does before the text explains it. The same rule holds inside a video: let the motion show the work, never a wheel that hides it.
Captions, sound and the first frame
Assume every visitor watches with the sound off. Most are at a desk in an open office or on a phone in public, and browsers make that the default anyway. Chrome's autoplay policy allows a video to play by itself only when it is muted, unless the visitor has already interacted with the site. So a tour that depends on narration says nothing to the person who never unmutes it.
Burn the captions into the video, short and large, one line at a time. Write them as claims, not narration. 42 leases in. One rent roll out. beats a full sentence about saving property managers time. If the video autoplays inline, loop it silently and keep the controls visible, so anyone who wants sound can turn it on.
The first frame does more work than any other, because it is also the thumbnail. Many visitors see only that still image and decide from it whether to press play. Set the poster frame to the finished output, the rent roll with its amber rows, never the logo or the founder's face. A thumbnail of a result invites a click. A thumbnail of a logo invites a scroll.
Where the video sits on the homepage
A button that says Watch the product tour and opens a modal is the weakest placement. It asks for a click before showing anything, and most visitors will not give one. Put the video inline instead, in the hero or straight under it, already playing silently and already showing the result.
The headline and the video should make one claim together. If the headline says the product turns leases into a rent roll, the first frame shows a rent roll. Our post on SaaS hero section design covers the words around it. On a phone, keep the video full width and check that the captions stay readable at that size. If a caption needs pinching to read, it is too small.
Keep one longer walkthrough if your buyers want it, but put it lower on the page or on its own page, labelled with its real length. A visitor who has already seen the result will happily give it five minutes. A visitor who has not will not give it fifty seconds.
Recut your demo video this week
- Play your current video and write down the timestamp where the first real output appears. If it is after ten seconds, that is the first fix.
- Pick the single output a buyer cares most about. Make it the first frame and the poster image.
- Write a caption of eight words or fewer that states the result as a claim.
- Find every wait on screen. Cut it, or replace it with a progress counter and a caption that states the real time.
- Show one hard case where the product flags a problem instead of guessing.
- Move the logo, the team and the architecture to the about page or the pitch deck.
- End on one button that matches your homepage's main call to action.
- Watch the recut on a phone with the sound off. If the story still makes sense, ship it.
If you would rather compare studios that build pages like this for your market, our ranking of landing page design agencies for AI proptech startups sets ten side by side on public criteria.
Studio Maydit is a web and product design studio for AI founders in the US, UK and Europe. We design and build sites in Framer, Webflow and custom code, and the part we care most about is the one in this post: making a hard product legible to a stranger in the first few seconds, through the hero, the motion and the order things appear in. Our website design service runs as a fixed scope over three to four weeks. If your product tour is hiding the best thing your product does, book a 30 minute call and show us the video.
