mockvid
Why designers make scrolling mockups
A website is an experience, not an image. A static screenshot flattens months of work into one frame: no motion, no flow, no sense of how the page unfolds. That is why web designers turn finished sites into scrolling mockups, short videos of the site scrolling inside a device frame, before posting them on Instagram, adding them to a portfolio or dropping them into a client proposal.
The problem is how they are usually made.
The manual way vs the generated way
| Canva / Photoshop | Mockvid | |
|---|---|---|
| Input | Full-page screenshot you capture yourself | Just the URL |
| Scroll animation | Keyframed by hand | Recorded from the real, live site |
| Mobile version | Start over with a phone frame | Captured together with desktop |
| Result | Flat image sliding under a PNG frame | Real 3D device, lighting, camera moves |
| Animations on the site | Lost (frozen screenshot) | Preserved (it is a real recording) |
| Time per site | 30 to 60 minutes | About 30 seconds |
The manual workflow also breaks on anything dynamic: parallax sections, scroll-triggered animations, video backgrounds. A screenshot freezes all of it. Mockvid records the live page in a real browser, so everything that moves on your site moves in the mockup.
How it works
- Paste the URL of the finished site, yours or a client's. Mockvid opens it in a real browser and records a smooth scroll on desktop and mobile viewports, handling lazy-loading and cookie banners.
- Direct the shot. Pick one of nine cinematic motion presets, choose the device finish, light the scene, add a background, a title and music.
- Export. MP4, WebM, animated GIF or WebP, transparent video or PNG still, up to 4K. Or publish a live 3D link you can embed anywhere.
Try it on the last site you shipped.Free 720p export, no account, about 30 seconds.
Paste a URL →Not just scrolling: an actual 3D scene
Most scrolling mockup tools slide a flat screenshot under a device PNG. Mockvid renders a real 3D scene in your browser: a laptop and a phone with physical materials (matte, glossy or glass), studio lighting presets, floor reflections, tilt-shift and directed camera moves. The scroll is one ingredient; the cinematic staging is what makes people stop on the video.
If you are comparing approaches, see how Mockvid stacks up against ScrollingMockup.io (flat scroll videos) and Rotato (manual 3D mockups), or read the step-by-step Canva tutorial comparison.
Who uses it
Web designers showcase client sites on Instagram and in portfolios. Agencies and studios produce case-study and proposal videos for every project they deliver. Founders turn their landing page into a launch video for Product Hunt and social. Same tool, same 30 seconds.
FAQ
What is a scrolling website mockup?
A short video of a website scrolling inside a device frame, used to present a finished site where a static screenshot falls flat: social feeds, portfolios, proposals and decks.
Do I need Photoshop, After Effects or Canva?
No. The capture, the scroll and the 3D staging are all automatic. You only make creative choices: motion, lighting, background, text.
Is it free?
Yes, 720p WebM exports with a small watermark are free and require no account. A one-time $9 unlock per domain enables HD to 4K, 60fps, MP4, GIF, WebP, transparent video and removes the watermark.
Does it work on sites with animations?
Yes. Mockvid records the real page in a real browser, so scroll-triggered animations, parallax and video backgrounds appear in the mockup exactly as they do live.