ScanlineOverlay

Decorative CRT-style scanline overlay effect. Renders as an absolutely positioned layer over its parent container. Uses repeating linear gradients with configurable opacity and animation speed.

Default Scanlines

Preview
Content with scanline overlay

Speed Variants

Preview
Slow (12s)
Normal (8s)
Fast (4s)

Higher Opacity

Preview
Stronger scanlines (opacity 0.15)

Props

PropTypeDefaultDescription
opacitynumber0.05Opacity of the scanline stripes (0 to 1).
speed"slow" | "normal" | "fast""normal"Animation speed of the scrolling scanlines. slow = 12s, normal = 8s, fast = 4s.
classNamestring-Additional CSS classes for the overlay container.

Usage Tips

  • The parent container must have position: relative (use className="relative") for the overlay to position correctly.
  • Content inside the container should use className="relative z-10" to appear above the scanline layer.
  • Recommended opacity range: 0.03–0.1 for subtle ambiance, 0.1–0.2 for a visible CRT effect.
  • Works best as a full-section or full-page overlay. Wrap your page content in a relative container and add the overlay as the first child.
Preview
Full-section patternContent sits above the scanline layer via z-10

Accessibility

  • The overlay has aria-hidden="true" and is invisible to screen readers.
  • Uses pointer-events-none so it does not interfere with user interactions on content beneath it.
  • Ensure content behind the overlay maintains sufficient contrast, especially at higher opacity values.