← Home
TOOL

Published · Updated

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 →
See pricing →

How to Record a Website Demo Video

  1. 1
    Open a project and give it the URL
    Start 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".
  2. 2
    Read back what actually happened
    The 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.
  3. 3
    Cut it like a product video
    Say "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".
  4. 4
    Caption, narrate, export
    The 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.

EXAMPLE PROMPTS
  • "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.

How a driven web capture becomes an aimed editThree aligned lanes on one time axis. The top lane is the browser session: load, scroll, click, type, click. The middle lane is the event track returned by the recorder, one entry per action with its time and its position in the frame. The bottom lane is the edit: a single travelling zoom written across the run of clicks, starting before the first click and holding after the last, with its waypoints taken from the reported coordinates.THE BROWSERDRIVES THE PAGEloadscrollclicktypeclickEVENT TRACKRETURNED0.90 nav2.40 scroll4.30 click6.90 type9.20 clickx 0.62 · y 0.38 — where in the frame it happeneda measurement from the driver, not a guess from pixelsTHE EDITIT WRITESone zoom, travelling between the two clickspush-in starts 0.55s early · holds 1.1s after the last clickwaypointwaypoint0s3s6s9s12sONE CLOCK

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

The capture is a CAPTCHA, not your page
Large sites answer a datacenter IP with a bot check, a cookie-consent interstitial or a login wall. The capture succeeds — right length, right resolution, no error anywhere — and what is inside it is a wall. Recording a Google search from a server lands on the "unusual traffic" page. Valmera checks the final URL and page title for those markers and flags the clip as not being the page, because it is IP-based and retrying will not help. Record it on your own machine and upload.
A click could not find its target
Steps address elements by their visible label first ("Start free trial" finds the button that says it, not the paragraph that mentions it) or a CSS selector when you need to be exact. When neither resolves, that step is skipped and named in the reply rather than silently dropped — a demo where two of six clicks missed is still usable, but only if you are told which two. Re-run with the exact label, or a selector.
The click has no visible flash
The overlay does draw an expanding ring on mousedown, and on this deployment's software-composited headless surface it has never survived into a captured frame — through four different implementations. So nothing here promises you a visible click flash. What marks the press instead is the zoom arriving on the button and, if you want it, a sound placed on the exact frame. On footage you upload, the cursor pass can draw a ripple at each click time you supply.
The click sound is no longer automatic
Valmera used to ship a bundled one-shot pack, and it has been withdrawn — so the "cut it like a product video" pass now writes the zooms and no sounds. The timing is not lost: the event track still holds every click to the hundredth of a second, so ask for a generated click sound (described in words, 0.5–22 seconds) or upload one, and it is placed on the same frames.
A consent banner is sitting in the shot
Your own site will often greet an anonymous visitor with a cookie banner, which then appears in every frame of a landing-page pan. Add a first step that clicks Accept, and record the rest afterwards.
Nothing to enlarge
On a phone or tablet capture, or an app that hides the pointer, the cursor pass finds nothing. Below 15% frame coverage it refuses and says so rather than re-encoding your video to change nothing, and points you at what does work on that footage: a zoom that follows the action, or the floating window treatment.

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.

Founders shipping a launch video
The product tour is recorded from the live URL the moment it deploys — and re-recorded in one message when the UI changes.
Course and tutorial makers
Steps that must be shown identically every time, captured identically every time, with the pointer big enough to follow.
Agencies and marketers
Website b-roll for a client's ad without asking the client to screen-record anything.
Developers cutting release notes
The same recorder is drivable over MCP, so the demo can be produced from the editor you already have open.

Give It a URL and See

A pan of your landing page takes one sentence and about twelve seconds of video.

Start free →
See pricing →

Frequently Asked Questions

Yes. Give Valmera the URL and describe the walkthrough — "open the pricing page, click Start free trial, type an email into the signup field, scroll to the FAQ". A headless browser opens the page, glides a visible cursor to each target, clicks it, waits for the page to react, and types at human speed while the session is captured as video. The clip lands in your project as a normal video asset you can cut, caption, and export.
The pan (record_website) loads the page, holds the top, smooth-scrolls to the bottom and holds — the classic landing-page shot, 4 to 30 seconds, 12 by default. The walkthrough (record_website_demo) actually uses the site: it clicks, types, hovers, scrolls between named sections and follows links, from a script of up to 24 steps, capped at about 75 seconds. Ask for a walkthrough when the point is how the product works, and a pan when the point is that the page exists.
No. The browser is a fresh anonymous session with no cookies, no extension and no access to your logged-in browser, so it sees exactly what a first-time visitor sees. It also refuses outright to type into anything that looks like a password or payment field, because the result is a video file you may publish. For a logged-in product tour, use a public demo or sandbox account, or screen-record it yourself and upload the file — every editing tool on this page works on an uploaded recording too.
Headless Chromium does not composite the operating system pointer into its capture, so an overlay draws one. The pointer is not faked: the real browser mouse is what moves, in eased steps, and the drawn arrow is positioned by listening to the real mousemove events. Hover states, :active styles, tooltips and JavaScript handlers fire exactly as they would for a person, and the arrow is where the pointer genuinely is.
The recorder returns an event track: every click, scroll, keystroke run and navigation, timestamped against the delivered MP4 and positioned as 0–1 fractions of the frame. showcase_demo groups nearby clicks into runs and writes one continuous zoom per run that travels between those coordinates, starting about half a second before the first click and holding about a second after the last. Nothing is inferred from the pixels, so the frame lands on the button rather than near it.
Any public page, but big sites answer a datacenter IP with a bot check, a consent wall or a login screen instead of themselves. That capture succeeds — correct length, correct resolution, no error — and what is in it is a CAPTCHA. Valmera detects the wall from the final URL and page title and reports it as a problem rather than handing you clean-looking b-roll, because it is IP-based and retrying will not help. Record those yourself and upload.
No. The capture is always silent — the browser is launched muted and no page audio is recorded. Add a voiceover, music from the built-in library or your own file, and AI-generated sound effects placed at exact times afterwards, in the same chat.
Yes, and on footage you recorded yourself as well. enhance_cursor locates the pointer by template match, smooths its path with a one-euro filter that keeps fast deliberate moves sharp while damping a resting hand, repaints the original pointer out and redraws it up to 4x bigger. It reports what fraction of frames the pointer was actually found in, and refuses on footage with no visible cursor rather than re-encoding your video to change nothing.
Ask for it: "put it in a floating rounded window on a dark gradient". set_screen_frame insets the finished picture, rounds its corners, drops a soft shadow under it and floats it on a solid colour or a two-colour gradient in any of four styles — vertical, horizontal, diagonal or radial. It applies to the whole finished picture — captions and overlays scale with it because they are inside the window — and it changes no timing at all, so you can add or remove it at any point in the edit.

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 →
See pricing →

Related Articles

Add Zoom Effects and Punch-Ins
Aimed zooms and travelling pushes — the move that makes screen text readable.
Blur Part of a Video
Hide a real email or account name that appeared in the capture.
Video Editing in Cursor over MCP
Drive the same recorder from your editor when you cut a release video.
All AI Video Editing Tools
Every tool in the Valmera editor, organized by job.