Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/developer-exe/llms.txt

Use this file to discover all available pages before exploring further.

CRTOverlay is a purely decorative component that recreates the visual character of a cathode-ray tube monitor on top of all page content. It renders two fixed <div> elements — one for the horizontal scanline and faint RGB column pattern, one for a radial corner vignette — and a Framer Motion AnimatePresence-driven random glitch flash that fires roughly every 10 seconds. None of the layers intercept pointer events, so the effect is entirely cosmetic.

​
Props

CRTOverlay accepts no props and exposes no configuration. Its visual parameters (scanline height, vignette radius, glitch frequency) are defined in the global stylesheet and the component’s internal constants.

​
Usage

Mount CRTOverlay once at the application root, outside of any route-specific layout, so it spans the full viewport on every page: 
// Place once at the app root
import { CRTOverlay } from './components/CRTOverlay';

function App() {
  return (
    <>
      <CRTOverlay />
      {/* page content */}
    </>
  );
}

​
Layer breakdown

CRTOverlay renders three layers in total: 1. .crt-overlay (z-index 50) — scanlines A repeating-linear-gradient pair creates a 4 px-tall horizontal scanline pattern across the full viewport, combined with a faint 6 px-wide vertical RGB column separation to mimic individual phosphor triads:
  • Horizontal bands: alternating fully transparent and 25% black at 100% 4px background-size.
  • Vertical columns: very faint red / green / blue channels at 6px 100% background-size.
2. .crt-vignette (z-index 51) — corner darkening A radial-gradient centred on the viewport darkens from a fully transparent 60% core to a near-opaque navy-black at the edges, simulating the characteristic brightness falloff of a curved CRT screen. 3. Glitch flash (z-index 60) — random interference burst Managed by a useState timer, the component randomly triggers a 150 ms Framer Motion opacity animation (0 → 0.8 → 0.2 → 0.9 → 0) roughly once every 10 seconds. The flash is a cyan mix-blend-difference div with a diagonal stripe pattern — it looks like a brief signal corruption artefact.

​
CSS definitions

.crt-overlay {
  background:
    linear-gradient(#12101000 50%, #00000040 50%),
    linear-gradient(90deg, #ff00000f, #00ff0005, #0000ff0f);
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
  z-index: 50;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}

.crt-vignette {
  background: radial-gradient(circle, #0000 60%, #06070dcc);
  pointer-events: none;
  z-index: 51;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
}
Both .crt-overlay and .crt-vignette use pointer-events: none, so every mouse click, touch event, and keyboard interaction passes straight through to the page content beneath them. They are purely cosmetic and have zero effect on interactivity.

​
z-index note

The CRT layers occupy z-50 and z-51. Any interactive UI that must visually appear above the overlay — such as modals, dropdown menus, tooltips, or notification toasts — should use z-[60] or higher to clear both layers. The random glitch flash itself already uses z-[60], so interactive elements at z-[70] or above are safe.

Build docs developers (and LLMs) love

Get started for freeTalk to us