How to put your website on the phone someone is holding
Give Vizard Agent your page and footage of someone holding a phone or laptop. It locates the blank screen's exact corners with computer vision, checks whether the hand or camera moves, and warps your page onto that screen in perspective — scrolling, as if being used.
What is the short version?
Stock footage of people holding phones always comes with a blank or generic screen in their hand. Putting your actual product onto that screen is what turns a stock clip into an advertisement for your thing, rather than a rather expensive advertisement for phones in general.
- Go to Vizard Agent and give it your page or a screen recording.
- Give it footage of someone holding a phone or laptop.
- Say which sections of the page should be shown, and in what order.
What do you need before you start?
A page and a shot with a usable screen in it. Vizard Agent locates the screen's corners itself, so what matters is that the screen is reasonably flat to camera and not obscured by a hand across the middle of it.
- The page. A URL, a recording, or mockup images.
- The footage. Someone holding a device.
- A clear screen. Blank or plain works best.
- The sections. Homepage, pricing, the booking button.
- The claims. What you may and may not say.
What do you type into Vizard Agent?
Say what the page should show and what to avoid. Vizard Agent handles the tracking and the warp, so the useful part of the brief is editorial — which sections prove the point, and which claims are off limits.
Prompt
Variants worth knowing:
- "Keep it readable." The site is the point, not the motion.
- Name the sections. Not "show the website".
- List the forbidden claims. Especially in regulated trades.
What does Vizard Agent actually do?
Here is the order Vizard Agent worked in on a real vertical advertisement built exactly this way. Two steps near the end are the technical heart of the whole job: finding the exact corners of the screen in the frame, and then checking whether those corners stay put or move.
- Searches for the uploaded recording across the workspace and storage.
- Falls back to stock footage when the upload cannot be found, searching for interiors, laptops and phone mockups.
- Casts a narrator voice and generates the voiceover, then measures its exact duration.
- Searches for and downloads a music bed and the chosen vertical stock clips.
- Transcribes the voiceover to get precise word timings for the captions.
- Lists the installed fonts and locates the specific families it wants.
- Extracts a representative frame from each clip and reviews the composition of every one.
- Locates the precise pixel coordinates of the white phone screens using computer vision.
- Checks whether the camera or the hand moves in the clips that will carry the composite.
- Generates the landing page, treatments and booking screen mockups.
- Reviews the generated homepage mockup at full size.
- Tests the corner-sorting and screen-tracking algorithms on the extracted frames.
- Analyses the laptop screen separately for automated tracking.
- Generates a long vertical page containing the hero, treatments and reviews for the scroll.
- Compiles the visual track frame by frame, applying tracking, perspective warping and the scrolling animation.
Step nine is the check that decides how hard the job is. A locked-off shot needs one warp for the whole clip; a moving hand needs the corners tracked across every frame, and Vizard Agent finds out which it is dealing with before building anything.
What does the result look like?
The advertisement this page is written from is a vertical film of around half a minute: a hook line, the page appearing on a phone held in shot, the same page scrolling on a laptop, and a closing card — with captions timed from the narration.
The page on the screen scrolls. That is what sells it: a still image pasted onto a phone reads as a mockup, and a page moving under a thumb reads as somebody using your product.
When does this not work well?
The composite depends entirely on the screen in the footage, and most footage was not shot with this in mind. Vizard Agent tells you which clips will not carry it rather than warping a page onto a screen that is half hidden.
- Hands across the screen. The page has to go behind them.
- Steep angles. Extreme perspective loses legibility.
- Reflections and glare. They sit on top of your page.
- Small phone screens. Text becomes unreadable at that size.
- Regulated claims. The page's own wording carries into the ad.
How do you fix a result that came back wrong?
Say which clip is wrong, or which section of the page. Vizard Agent keeps the detected screen corners, the generated page and all the tracking data, so a different section or a longer scroll re-composites without any of the tracking work being done again.
- "The site is unreadable." Larger sections, or a longer hold.
- "It drifts off the screen." Corners re-tracked across the clip.
- "Show the pricing instead." Page regenerated, same composite.
How does Vizard Agent compare to doing it yourself?
By hand this is corner-pin tracking in a compositing tool — genuinely a specialist skill — or it is a static screenshot pasted on, which everyone recognises. Vizard Agent finds the corners programmatically and warps the page in perspective.
| By hand | Vizard Agent | |
|---|---|---|
| Finding the screen | Corner-pinned by hand | Located by computer vision |
| Movement | Tracked frame by frame | Checked first, then tracked if needed |
| The page | A flat screenshot | A scrolling page in perspective |
| Which clips work | Found out during the edit | Assessed before building |
Common questions
Do I need a screen recording? No. Vizard Agent can generate the page from your site and composite that.
What footage works best? A steady shot with a plain, unobstructed screen. Vizard Agent will tell you which of your clips qualify.
Will the page scroll? Yes, and it should. Vizard Agent animates the scroll rather than pasting a still.
Can it do laptops too? Yes. Vizard Agent tracks a laptop screen the same way, and they are usually easier.
What if the hand moves? It tracks across frames. Vizard Agent checks for motion before deciding the approach.
Will my text be readable? On a phone screen, only large elements. Vizard Agent shows sections rather than whole pages.
Can it use my own footage? Yes, and it is better. Vizard Agent works from your shot of your own device.
What about glare on the screen? It sits over your page. Vizard Agent flags clips where the reflection is too strong.
Can it show several pages? Yes. Vizard Agent composites a different section into each shot.
Does it write the script? It can, or use yours. Vizard Agent times the captions from the recorded narration.
Why not just film my own screen? You should if you can — a real recording of your product beats any composite. This exists for when you need a person and a device in the same shot and cannot stage one.
Can it match my brand fonts? Yes. Vizard Agent locates the installed families and uses them for the captions and cards.
Does it check the result? Yes. Vizard Agent analyses the finished cut for pacing, transitions, caption formatting and sync.