Put a raw screenshot on a landing page and it floats — no edges, no context, bleeding into the background. Put the same screenshot inside a browser chrome or a phone bezel and it suddenly reads as a product someone can use. The framing is doing real persuasion work, which is why every SaaS hero has one.
The usual implementation is a 4MB PNG of a MacBook with your screenshot composited in — unresponsive, retina-blurry, and a new export every time the UI changes. Velocity X's hero-device-frame and device-frame-carousel draw the device in CSS and slot your actual screenshot in.
The Money Pattern
A browser frame is three dots and a URL bar; a phone is a radius and a notch — all markup, all themeable:
<figure class="overflow-hidden rounded-xl border border-neutral-200
bg-white shadow-2xl">
<div class="flex items-center gap-1.5 border-b bg-neutral-50 px-4 py-2.5">
<span class="h-2.5 w-2.5 rounded-full bg-red-400" />
<span class="h-2.5 w-2.5 rounded-full bg-orange-400" />
<span class="h-2.5 w-2.5 rounded-full bg-green-400" />
<span class="ml-3 flex-1 rounded bg-white px-3 py-0.5 text-xs
text-neutral-400">app.yourproduct.com</span>
</div>
<img src={shot.src} alt={shot.alt} class="block w-full"
width={shot.w} height={shot.h} loading="lazy" />
</figure>Because the frame is DOM, it's responsive for free, crisp at every density, dark-modes with your theme tokens, and swapping the screenshot is swapping one src. The URL bar is a bonus trust signal — put your real app domain in it.
The Catch
The screenshot itself still needs discipline: width/height attributes (CLS — the frame reserves the bar, the image must reserve the rest), realistic data in the shot (lorem ipsum in a device frame is a tell), and a capture at exactly 2× the display size so retina stays sharp without a 6000px original.
Angled 3D perspective frames look great in Dribbble shots and cost legibility on real pages — the content you're selling becomes a parallelogram. Flat-on with a strong shadow is the boring correct answer; save the tilt for decorative secondary shots.
The Verdict
Device frames are persuasion infrastructure, and CSS ones cost nothing to maintain. Three dots, a URL bar, your real screenshot, flat-on. Both variants live in Velocity X's Heroes & Sections and Carousels & Tickers — source you own, restyled by your tokens.