Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

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

CRTOverlay renders an invisible full-screen layer that transforms the RetroWin desktop into a convincing CRT monitor simulation. It applies two CSS classes — .crt-flicker (a subtle brightness animation) and .scanlines (repeating horizontal lines) — at 20 % opacity with mix-blend-mode: overlay, so the effect tints the content beneath it without obscuring readability. The overlay sits above all other UI at z-index: 100 but is completely non-interactive (pointer-events: none). CRTOverlay accepts no props. Mount it once at the application root, alongside Taskbar.

​
Usage

import { CRTOverlay } from './components/y2k/CRTOverlay';
import { Taskbar }    from './components/y2k/Taskbar';

function App() {
  return (
    <>
      <CRTOverlay />
      <Taskbar />
      {/* desktop and route content */}
    </>
  );
}

​
Accessibility — prefers-reduced-motion

CRTOverlay reads the (prefers-reduced-motion: reduce) media query via window.matchMedia and responds to changes in real time using an EventListener on the MediaQueryList. When the user has requested reduced motion:
  • The .crt-flicker class is omitted — the brightness animation stops.
  • The .scanlines class is omitted — the repeating line pattern is removed.
The overlay element itself remains in the DOM so it can still apply the static mix-blend-mode base style, but all animated or visually intense effects are stripped away.

​
Internal State

State variableTypeDescription
sbooleantrue when the OS/browser reports prefers-reduced-motion: reduce. When true, the animation classes are not applied.

​
Notes

The overlay uses aria-hidden="true" so screen readers skip it entirely. It has no semantic role — it is purely decorative.
The .crt-flicker and .scanlines CSS classes must be defined in your global stylesheet (or Tailwind plugin). The component itself only applies the class names; the keyframe definitions live outside the component.
For the most authentic look, pair CRTOverlay with a slightly warm or desaturated desktop background. The mix-blend-overlay at 20 % opacity is intentionally subtle — increasing the opacity value will make the scanlines more pronounced.

Build docs developers (and LLMs) love

Get started for freeTalk to us