To make a demo video of your website, use a demo account with realistic data, record one clean browser window at the size of your video, and do each step slowly. In the edit, cut the waiting, zoom in on each click and add a voiceover with captions. Most of the quality comes from preparation, not the recorder.
Step 1: Choose what the video shows
Pick one path through the site: from the starting screen to one result. Write it as a list of steps, for example:
- Open the dashboard.
- Click "New project", type "Spring launch".
- Invite a teammate by email.
- Show the shared project with both names.
Four to six steps fit a 60 second video. Two or three fit a 20 second social cut. A tour of every page is not a demo; it is a manual.
Step 2: Prepare logins and test data
This step decides whether the recording looks real or empty.
| Item | Do | Avoid |
|---|---|---|
| Account | A separate demo account, signed in before you start | Your own admin account, real customer accounts |
| Data | 10 to 30 realistic records: names, dates, amounts that look plausible | Empty states, "test test", "asdf", lorem ipsum |
| Names | Invented names and company names | Real customers or people |
| Two-factor login | A demo account without it, or sign in before recording | Stopping mid-take to find a code |
| Notifications and banners | Off for the demo account: onboarding tours, upgrade prompts, chat widgets | Pop-ups that appear in one take and not the next |
| Reset | A way to return to the starting state, such as a script or a saved copy | Recording a second take over the first take's changes |
Step 3: Set up the browser
- Use a fresh browser profile with no extensions, no bookmarks bar and no saved passwords.
- Turn off autofill, so your email and address do not drop down over the form.
- Accept or close the cookie banner before recording.
- Set the window to the video's size: 1920 x 1080 for 16:9. For a vertical video, open the browser's device mode and choose a phone size.
- Set browser zoom to 110% or 125%. Text that is readable on your monitor is often too small on a phone.
- Turn on Do Not Disturb, so system notifications stay out.
Step 4: Record it yourself
This is the do-it-yourself path with a screen recorder.
| System | Built-in recorder | Free alternative |
|---|---|---|
| macOS | Screenshot toolbar (Shift Command 5): record a window or a selected area | OBS Studio |
| Windows 11 | Snipping Tool, record option | OBS Studio |
| Any, in the browser | Screen recording extensions | Loom, Tella and similar tools |
How to record:
- Record one step per take. A mistake then costs a few seconds, not the whole video.
- Before each click, move the mouse to the target and pause. Click, then pause 1 second on the result.
- Type at a normal speed. You will speed it up in the edit.
- Do not narrate while recording. Record the voice to the finished cut, or use a generated voice.
- Record the screen at the highest resolution you can. You will zoom in, and zooming a 1080p recording 2x makes text soft.
Step 5: Edit for clicks
- Cut the waiting: page loads, typing, mouse searching.
- Speed up what must stay, such as a long form fill, to 2x to 4x.
- Zoom on each click. Push in to the button before the click and hold on the result. Ease the zoom in and out over about half a second, so the motion does not jump.
- Keep the cursor visible. If the cursor is small, enlarge it in the recorder's settings before you record.
- Add the voiceover and captions, one short sentence per step.
- End on the result and the next step: the sign-up page or your URL.
Step 6: Export the formats you need
| Use | Format | Size |
|---|---|---|
| Homepage, YouTube, LinkedIn | 16:9 | 1920 x 1080 |
| TikTok, Reels, Shorts | 9:16 | 1080 x 1920 |
| Square feeds | 1:1 | 1080 x 1080 |
A 16:9 desktop recording cropped to 9:16 shows only a narrow slice of the page. If you need both, record the mobile layout separately for the vertical cut.
Common mistakes
| Mistake | Fix |
|---|---|
| The video starts on a loading screen | Start recording after the page has loaded, or cut it |
| The mouse wanders while you talk | Record without speaking; narrate later |
| Real email addresses in a list | Use invented sample data |
| Text too small on a phone | Browser zoom up, then zoom on clicks in the edit |
| A banner appears halfway through | Turn off prompts and banners for the demo account |
| The demo shows an old interface | Keep the step list and demo account, and record again after each release |
Doing this with distrorig
distrorig makes marketing videos for software: an AI agent uses your product and records it, an AI creator introduces it on camera, and an AI voice narrates. You give it the site's URL, a demo login and the steps in plain words. The agent opens the site in its own clean browser, signs in and does the steps. It records at 2x pixel density, desktop (1280 x 800) or phone layout, and the camera zooms on the clicks. You can watch it live and steer it in the chat. See how it works.
Use a demo account here too: the login is encrypted at rest, but a demo account with sample data is still the safer choice. See security. If your product is not a website, or you want to present it yourself, the screen recorder path above is better.