Showcase your Webflow site properly

The problem with screenshotting a Webflow build

Webflow projects usually earn their polish through motion: scroll-triggered reveals, hover interactions, smooth parallax. A screenshot freezes all of that at the one moment a static image can capture, which is often the least interesting one. If the project is the centerpiece of a portfolio case study, it deserves to be seen moving, the way a client or visitor actually experiences it.

Three ways designers currently handle this, and where they fall short

• Static screenshot: fast, but shows nothing about the interactions that make the site worth showing off.
• Screen recording: captures the motion, but also your cursor, your browser chrome, and whatever tab or notification happens to be visible. Usually needs an edit pass before it's presentable.
• Embedding the live site in an iframe: works, but on a portfolio page you don't control performance, and a slow-loading embed undercuts the exact impression you're trying to make.

The one-paste version

1. Publish your Webflow project as you normally would, on your Webflow subdomain or a custom domain.
2. Paste that URL into Mockvid. It opens the live page in a real browser and records the scroll behavior, so scroll-triggered animations and interactions play out as designed, not sped up or skipped.
3. Pick desktop, mobile, or both. Responsive Webflow builds usually look meaningfully different at each breakpoint, worth showing side by side.
4. Export. The capture is staged as a 3D website mockup video: MP4 or WebM free in 720p, or GIF and a live embeddable 3D link for the case study page itself with the one-time unlock for your domain.

What this looks like on a case study page

Instead of a hero screenshot at the top of a Webflow case study, embed the live 3D mockup: it autoplays the scroll, shows both breakpoints, and reads as considerably more finished than a static image or an awkwardly cropped screen recording sitting between two paragraphs of writing about the project. For what else belongs on that page, whatever the site was built with, see how to showcase a website in your portfolio.

Frequently asked

Does this work with Webflow's built-in interactions and Lottie animations?

Yes. Since the capture opens the actual published page in a browser, anything that runs there, including Webflow interactions, Lottie files and custom code embeds, plays out naturally during the recording.

What about password-protected or staging sites?

Pages behind a login or Webflow's staging password can't be captured automatically. Publish to a public URL first, even a temporary one, then capture.

Can I show more than one page of the same project?

Yes, on the Studio plan. Tours (in beta) capture several pages of the same site, whole or section by section, in one continuous video with smooth transitions between them, useful for showing a homepage and a key inner page in a single case study clip.

Freelancers billing this per client project should also see the per-site pricing on the web designers page; agencies capturing many Webflow builds a year may prefer the agencies plan.