Hiding Overlays

Use --hide-selector in capture or project defaults to remove cookie banners, sticky headers, and floating UI before recording.

Overview#

Overlay UI is often the difference between a clean demo and an unusable one. Rollberry lets you hide those elements with repeatable CSS selectors before the capture begins.

npx rollberry capture https://example.com \
  --out ./artifacts/clean.mp4 \
  --hide-selector "#cookie-banner" \
  --hide-selector ".sticky-nav"

How it works#

The current implementation injects CSS that applies:

display: none !important;
visibility: hidden !important;

to the matching selectors before the scene is stabilized for capture.

Common selectors#

Typical examples:

#cookie-banner
.sticky-header
.intercom-lightweight-app
.modal-overlay

You can pass --hide-selector more than once:

npx rollberry capture https://example.com \
  --out ./artifacts/clean.mp4 \
  --hide-selector "#cookie-banner" \
  --hide-selector ".intercom-lightweight-app" \
  --hide-selector ".sticky-header"

Using hide selectors in project files#

Put shared selectors in defaults.hideSelectors:

{
  "defaults": {
    "hideSelectors": ["#cookie-banner", ".intercom-lightweight-app"]
  }
}

Add scene-specific selectors with scene.hideSelectors when only one route needs extra cleanup.

Finding the right selector#

Use DevTools on the target page and inspect:

banner roots
sticky nav wrappers
chat widget containers
modal overlays

Good selector sources are id, stable class names, and predictable third-party containers.

Validate with debug frames#

If you are unsure whether the selector matched, export raw frames:

npx rollberry capture https://example.com \
  --out ./artifacts/debug.mp4 \
  --hide-selector "#cookie-banner" \
  --debug-frames-dir ./artifacts/debug-frames

Open the first frame and confirm the overlay is gone before scrolling begins.