Record a Website as Video and Edit It Automatically
You do not need a screen recorder to make a demo video of your website. You need a URL and a sentence.
Valmera records a live web page as real video from its address. A headless Chromium browser opens the page at your project's aspect ratio and captures it two ways: a pan that holds the top, smooth-scrolls to the bottom and holds, or a walkthrough in which the browser actually uses the site — a visible cursor glides to a button, clicks it, waits for the page to react, types into a field at human speed, scrolls to the next section — from a short script you describe in plain English. The capture becomes a video asset in your project, and because the recorder knows exactly when and where every click happened, the edit that follows is aimed rather than guessed.
Record Your Site and Cut It in One Chat
Paste the URL, describe the walkthrough, review the preview. No credit card required.
Try it free →How to Record a Website Demo Video
- 1Open a project and give it the URLStart a project — you do not need to upload any footage first, because the recording is the footage. Then type the request, for example: "record a demo of https://example.com — scroll to Pricing, click Start free trial, then type hello@example.com into the signup field".
- 2Read back what actually happenedThe reply names the capture, its length and resolution, how many clicks landed, and the event track: every click, scroll, keystroke run and navigation with its timestamp and its position in the frame. Anything the script asked for that the page could not deliver — a button it could not find, a new tab it refused to follow, a consent wall it landed on — is listed rather than hidden.
- 3Cut it like a product videoSay "cut it like a product demo". The clip is spliced into the edit and one continuous zoom is written across each run of clicks, travelling between the exact coordinates the recorder reported. Follow up with "make the cursor bigger" or "put it in a floating rounded window on a dark gradient".
- 4Caption, narrate, exportThe capture is silent, so add a voiceover, music, or word-accurate captions in the same chat. Export renders an H.264 MP4 you download — and if you also uploaded talking-head footage, the demo is simply an insert inside it.
A pan runs 4–30 seconds (12 by default). A walkthrough is as long as its steps take, up to about 75 seconds, and the whole browse-and-capture is wall-clock bounded so a hung page cannot stall your turn.
- "record my landing page scrolling top to bottom and put it after the intro"
- "record a walkthrough: click Docs, scroll to Quickstart, hover the copy button"
- "cut the demo like a product video and hold on the signup button"
- "the cursor is too small and jittery — fix it"
- "float it in a rounded window on a dark red gradient"
- "record it vertical for a Reel and caption my voiceover over it"
One Capture, Two Outputs
The reason an automated capture edits better than a manual one is not the video. It is the second thing the recorder returns: a track of everything the browser did, timestamped against the delivered file and positioned in the frame. That track is what the edit is built from.
Everything on that axis is the same clock, and that is the part that is easy to get wrong. It is why the capture is not built with a browser's built-in recorder — see below.
What Happens Under the Hood
The viewport matches where the clip is going. Captures run at 1920x1080, 1080x1920 or 1080x1080, defaulting to your project's output frame — so a 9:16 edit gets a phone-shaped capture of your responsive layout rather than a squashed desktop one. Text is the whole point of a website capture, so it records at composite resolution and is never upscaled afterwards.
The cursor is drawn, but the mouse is real. Headless Chromium does not composite the OS pointer into its capture, so driving the real mouse alone would give you a page reacting to an invisible hand — buttons highlighting for no reason. An injected overlay draws an arrow instead, and it is positioned by listening to the browser's own mousemove events. The pointer glides in eased steps because a person's hand does not teleport, and every hover state, :active style, tooltip and JavaScript handler fires exactly as it would for a visitor.
The file's clock is real time, not a frame counter. Playwright's built-in recorder writes frames at a fixed rate in arrival order, which is not a clock at all. Measured here on a real capture: 22.4 seconds of browsing produced a 9.1-second file, and inside it the page's own on-screen stopwatch advanced 0.25s across one 1.7-second stretch and 3.2s across the next. Nothing computed from wall-clock time can be placed on a timeline like that. So frames are pulled off Chromium's screencast with their real timestamps and each is held for exactly as long as it was on screen, then encoded to the same H.264 profile as every other asset. A reported click lands within about 0.2s of the frame it happens on, verified against a page burning its own stopwatch into the picture.
The edit is aimed with mapped coordinates. Clicks are grouped into runs — a gap over 4.5 seconds breaks one, and so does a navigation, because a new page has to be seen whole before it is worth pushing into a corner of it. Each run gets one continuous travelling zoom whose waypoints are the click positions, converted from the capture's frame into the output frame. That conversion matters: if you reframe the project after recording, the renderer crops or pads the insert to fit, and a zoom aimed with unmapped coordinates would miss the button by exactly the width of the bars, in the one shot where precision is the entire point.
The cursor pass is three separate jobs. Locate: normalised-correlation template match against a pointer sprite, searched near the previous hit once the track is established, then refined to subpixel accuracy by fitting a parabola to the correlation peak — without which the redrawn pointer visibly stair-steps. Smooth: a one-euro filter, not a moving average, because an average that removes hand tremor also smears a fast deliberate flick into a lazy drift. Redraw: the original pointer is painted out at its detected position (leaving it would show two cursors) and a scaled sprite is drawn at the smoothed one. The whole pass bakes into a derived copy of the source, so every later cut inherits it and no timestamp moves.
The address policy runs before and during. The URL is checked before a browser exists, and every subresource the page requests is re-checked through the same policy with a per-host cache. A click that opens a new tab does not take the recording somewhere it was never scoped to — pop-ups are closed on sight and reported. And a step that would type into a password or payment field is refused outright: this records to a video file, and a demo never needs a real credential.
When It Goes Wrong, and What to Do
How People Do This Without Valmera
Every established tool in this category is excellent, and every one of them starts the same way: a person performs the demo while software records their screen.
Screen Studio (macOS) is the polish benchmark — automatic cinematic zooms toward your clicks, smoothed cursor motion, beautiful backdrops out of the box. If you are on a Mac and happy to perform the walkthrough, it produces a better-looking file with less thought than anything else. Camtasia is the cross-platform workhorse: recorder plus a full timeline, callouts, annotations and quizzing, and it will do things no agent will, because you are placing every element. Wondershare DemoCreator and Canvid — both desktop recorders for Windows and macOS, both with automatic zoom on clicks — sit lower on the price and learning curve with the same shape of workflow. Loom optimises for the case where the recording is the deliverable and editing barely happens.
Arcade, Supademo and Storylane are the closest relatives. They capture your product through a browser extension or a desktop capture app while you click through it, and turn that into an interactive HTML walkthrough — with video and GIF export alongside. If what you want is a clickable demo embedded on a landing page, that is the right category and this page is not competing with it. The capture is still driven by a human in a logged-in session, which is exactly why they can show your dashboard and Valmera cannot.
Or write it yourself. Playwright or Puppeteer plus ffmpeg is genuinely the same idea, free, and completely under your control — it is what Valmera is doing internally. Budget for the parts that are not obvious from the docs: the built-in video recorder's timing is unusable for syncing anything, so you will end up on the CDP screencast and stamping frames yourself; a headless browser has no pointer to film, so you will inject one; and when the capture is finished you still have a raw MP4 and an editing job. The value here is not that the browser can be scripted. It is that the script's output arrives already attached to an editor that reads it.
Use one of the others when the demo lives behind a login, when you need to narrate live over your own clicks, when the product is a desktop or mobile app, or when the deliverable is an interactive demo rather than a video file.
Honest Limits
- Public pages only. A fresh anonymous browser session — no cookies, no extension, no access to your logged-in tabs. It will not type into password or payment fields.
- Always silent. The browser is launched muted and no page audio is captured, ever. Narration, music and sound effects are added afterwards.
- Bounded length. A pan is 4–30 seconds. A walkthrough is at most 24 steps and roughly 75 seconds, with a hard wall-clock ceiling on the whole browse. At most 3 pages are recorded per message.
- It is a desktop browser at a portrait size, not a phone. A 1080x1920 capture shows your responsive layout — not iOS Safari's chrome, not a device frame, not a real touch device.
- No guaranteed click flash in the picture, for the compositing reason above.
- Clicks cannot be seen in pixels. On a recording you made yourself, nothing distinguishes a press from a hover, so click times have to be supplied — and then the zooms are eased centre punches rather than a travel between coordinates nobody measured.
- Not a generator. This records a page that really exists at an address you own or can reach. It does not invent a product interface; Valmera is not a text-to-video tool.
- No desktop or native-app capture, and no webcam. Record those yourself and upload — files up to 14 GB or 3 hours, MP4, MOV, MKV or WebM.
What You Can Do With It Once It Is Recorded
The capture is an ordinary video asset from the moment it exists, which means the whole editor applies to it. Splice it into a talking-head video as a cutaway while your voice keeps running, or build the entire video around it. Then, in the same chat: aimed zooms and travelling pushes so small UI text reads on a phone; the floating rounded window on a gradient, which changes no timing and can be added or dropped at any point; a blur over a real email or account name that follows the footage through later cuts and reframes; a voiceover and music that ducks under it; word-accurate captions; and a 9:16 version for Shorts and Reels.
None of it is destructive. The recording is never modified — the edit is a versioned list of instructions on top of it — and every reply the agent sends is checked server-side against the edits actually recorded, so it cannot tell you it zoomed on a click it never touched.
Give It a URL and See
A pan of your landing page takes one sentence and about twelve seconds of video.
Start free →Frequently Asked Questions
Related Tools and Reading
Browse every job the editor can do in the AI video editing tools hub, read how motion is written in the speed & motion docs, see what else can be generated inside an edit in the AI generation docs, or connect the same 108-tool registry to your assistant through the Valmera MCP server. Pricing, including the free 50 credits with no card, is on the plans page.
Record Your Website as Video
The agentic AI video editor — give it a URL, describe the walkthrough, download the export. Free to start.
Start your free trial →