Skip to content
Browse themes
Added 2 Sept 2026
Back to library
screen-share-overlay-15727
Screen Share Overlay
Modals & Overlays

Screen Share Overlay

Shared window ringed in pulsing green with a floating status pill that counts the elapsed time and widens on hover to reveal its microphone and camera toggles.

Modals & Overlaysscreen-sharerecordingpilloverlaycontrols
lines of CSS
118lines of CSS
dependencies
0dependencies
browser, for years
Everybrowser, for years
stops under reduced motion
Guardedstops under reduced motion
Backdrop
Sharing04:12
Open a live copy in

Vue, Svelte, styled-components and Tailwind exports are part of Pro. HTML, CSS and React are free forever.

screen-share-overlay-15727.css
.fx-v14-mo-screenshare-15726 {
  position: relative;
  width: 252px;
  height: 142px;
  padding: 14px;
  background: #0d1424;
  border: 1px solid #22304b;
  border-radius: 0.75rem;
  overflow: hidden;
}
.fx-v14-mo-screenshare-15726 .l { display: block; height: 8px; margin: 34px 0 10px; border-radius: 4px; background: #18213a; }
.fx-v14-mo-screenshare-15726 .l:nth-child(1) { width: 56%; }
.fx-v14-mo-screenshare-15726 .l:nth-child(2) { width: 40%; margin-top: 0; }
.fx-v14-mo-screenshare-15726 .ch {
  height: 42px;
  border-radius: 4px;
  background:
    linear-gradient(90deg, #1e293b 0 16px, transparent 16px 26px, #334155 26px 42px, transparent 42px 52px, #1e40af 52px 68px, transparent 68px 78px, #0e7490 78px 94px, transparent 94px);
  background-size: 104px 100%;
}
.fx-v14-mo-screenshare-15726::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(52,211,153,0.55);
  border-radius: 0.75rem;
  pointer-events: none;
  animation: fx-v14-mo-screenshare-15726-edge 2.4s ease-in-out infinite;
}
.fx-v14-mo-screenshare-15726 .pill {
  position: absolute;
  top: 10px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.26rem 0.22rem 0.45rem;
  font-size: 0.6rem;
  color: #a7f3d0;
  background: #0b2b22;
  border: 1px solid #17614c;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.6);
  transform: translateX(-50%);
}
.fx-v14-mo-screenshare-15726 .dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f43f5e;
}
.fx-v14-mo-screenshare-15726 .dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid rgba(244,63,94,0.6);
  border-radius: 50%;
  animation: fx-v14-mo-screenshare-15726-ping 1.8s ease-out infinite;
}
.fx-v14-mo-screenshare-15726 .pill b { font-weight: 500; white-space: nowrap; }
.fx-v14-mo-screenshare-15726 .pill em { font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.56rem; color: #6ee7b7; }
.fx-v14-mo-screenshare-15726 .ex {
  display: flex;
  gap: 3px;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.fx-v14-mo-screenshare-15726 .ex u {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: #6ee7b7;
  text-decoration: none;
  background: #123c30;
  border-radius: 50%;
}
.fx-v14-mo-screenshare-15726 .pill button {
  padding: 0.14rem 0.45rem;
  font: inherit;
  font-size: 0.58rem;
  font-weight: 600;
  color: #fff1f2;
  background: #be123c;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}
.fx-v14-mo-screenshare-15726 .pill button:hover { background: #e11d48; }
.fx-v14-mo-screenshare-15726:hover .ex { max-width: 42px; opacity: 1; }
@keyframes fx-v14-mo-screenshare-15726-edge {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
@keyframes fx-v14-mo-screenshare-15726-ping {
  0%       { transform: scale(0.7); opacity: 0.85; }
  70%,100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-v14-mo-screenshare-15726,
  .fx-v14-mo-screenshare-15726::before,
  .fx-v14-mo-screenshare-15726::after,
  .fx-v14-mo-screenshare-15726 *,
  .fx-v14-mo-screenshare-15726 *::before,
  .fx-v14-mo-screenshare-15726 *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}
screen-share-overlay-15727.html
<div class="fx-v14-mo-screenshare-15726">
  <i class="l"></i>
  <i class="l"></i>
  <div class="ch"></div>
  <div class="pill">
    <span class="dot"></span>
    <b>Sharing</b>
    <em>04:12</em>
    <div class="ex">
      <u>
        <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
          <rect x="9" y="2" width="6" height="11" rx="3"></rect>
          <path d="M5 11a7 7 0 0014 0"></path>
          <path d="M12 18v3"></path>
        </svg>
      </u>
      <u>
        <svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linejoin="round">
          <rect x="2" y="6" width="13" height="12" rx="2"></rect>
          <path d="M15 11l7-4v10l-7-4z"></path>
        </svg>
      </u>
    </div>
    <button>Stop</button>
  </div>
</div>

What do I do with this?

  1. Put screen-share-overlay-15727.css anywhere your page already loads CSS from — in Next.js that is app/globals.css, or any stylesheet with a <link> in your HTML.
  2. Then put the class on the element you want it on: <button class="fx-v14-mo-screenshare-15726">. The CSS does nothing until a class name in it matches something on the page.
  • Link the stylesheet, then paste the markup wherever you need it.
npx hoverlab add screen-share-overlay-15727

What's included

  • The markup and the stylesheet, in whichever framework you pick
  • No runtime dependencies

Works with

  • React
  • Vue
  • Svelte
  • Tailwind
  • styled-components
  • Plain CSS

npx hoverlab add screen-share-overlay-15727

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Motion safety

Static estimate, read from the CSS

Reduced motion
Guarded

Ships a prefers-reduced-motion block, so the loop settles into its end state for visitors who ask for less motion.

What it animates
Reflows

Animates max-width (and background). The browser re-lays-out the page on every frame; prefer transform if you can.

Flashing (WCAG 2.3.1)
Under 3 flashes/s

Its brightest loop is about 0.6 a second. Estimated from duration, iterations and keyframes, not from rendered frames.

Layout shift (CLS)
May shift layout

Animates max-width on a box in flow, so content beside or after it can move. A category from the CSS, not a measurement for this effect.

Every row is read from the shipped CSS. Only a figure marked measured came from a browser. Customizing the speed changes the timing, so recheck a customized copy. How it is computed

30 more effects in Modals & Overlays

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Modals & Overlays

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

  • A commercial licence for everything in the catalog
  • Unlimited bundle exports, in Vue, Svelte and Tailwind
  • One payment — no subscription, nothing to renew
Pro — $79 once

7 variations of Screen Share Overlay

Finished looks, each one a position in the customizer above. Copy any of them, or open it and keep moving the sliders.