Frame

A browser-chrome frame that presents a product screenshot or video as a real UI, traffic-light dots, a URL pill, and a soft elevated shadow.

Examples

app.convert.com/experiments

screenshot / video

<div class="frame" style="max-width:560px">
  <div class="frame__bar">
    <span class="frame__dot"></span><span class="frame__dot"></span><span class="frame__dot"></span>
    <span class="frame__url">app.convert.com/experiments</span>
  </div>
  <div class="frame__body">
    <!-- swap this placeholder for an <img> or <video> in real use -->
    <div style="aspect-ratio:16/10;background:var(--color-surface-cream-hover)"></div>
  </div>
</div>

Usage

Wrap product screenshots and videos so they read as real UI, the chrome sells the asset as a live product.
Keep the URL pill plausible (app.convert.com/…), a believable path reinforces that this is the real app.
Use a 16/10 or 16/9 body so the asset keeps a natural screen aspect ratio.
One frame is a focal point: don't stack many on a single screen, or the emphasis is lost.

States

Static (default), the frame itself does not animate. A <video autoplay muted loop> placed inside .frame__body plays on its own.

Code

Link the component stylesheet, then drop in the frame markup, replace the placeholder body with an <img src> or <video>:

<link rel="stylesheet" href="/_shared/components/frame.css">

<div class="frame" style="max-width:560px">
  <div class="frame__bar">
    <span class="frame__dot"></span><span class="frame__dot"></span><span class="frame__dot"></span>
    <span class="frame__url">app.convert.com/experiments</span>
  </div>
  <div class="frame__body">
    <img src="/path/to/screenshot.png" alt="Convert experiments dashboard">
    <!-- or: <video autoplay muted loop playsinline src="…"></video> -->
  </div>
</div>