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 it were being used.
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. Name the sections, and in regulated trades list the forbidden claims.
Prompt
What does Vizard Agent actually do?
It finds the screen's corners programmatically and warps the page onto them in perspective. Then comes the check that decides how hard the job is: a locked-off shot needs one warp for the whole clip, while a moving hand needs the corners tracked across every frame, and Vizard Agent finds out which before building anything. In the session behind this article it:
- Searched for the uploaded recording and, when it could not be found, fell back to stock footage of interiors, laptops and phones.
- Cast a narrator, generated the voiceover, measured its exact duration and transcribed it for precise caption timings.
- Extracted a representative frame from each clip and located the pixel coordinates of the white phone screens with computer vision.
- Checked whether the camera or the hand moved, tested the corner sorting and screen tracking on extracted frames, and analysed the laptop screen separately.
- Generated mockups of the landing page, treatments and booking screen, plus one long vertical page for the scroll.
- Compiled the visual track frame by frame with tracking, perspective warping and the scrolling animation, for a vertical ad of around half a minute.
When does this not work well?
The composite depends entirely on the screen in the footage, and most footage wasn't shot with this in mind. Hands across the screen mean the page has to go behind them, steep angles lose legibility, and glare sits on top of your page. On a small phone screen, text becomes unreadable. Vizard Agent says which clips won't carry it rather than forcing a page onto them.
Common questions
Do I need a screen recording? No. Vizard Agent can generate the page from your site and composite that.
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.