CRT Effects

Scanlines, vignette, chromatic aberration, screen shake and more — src/lib/crt-effects.js

SYSTEM ACTIVE

CRT overlays are appended inside this container.
Toggle effects below to see scanlines, vignette and flicker.

Effect Controls

Scanlines Vignette Flicker

Vignette intensity 0.30

Flicker intensity 0.05

Usage

import { CRTEffects } from 'src/lib/crt-effects.js';

const crt = new CRTEffects(containerEl, {
  scanlines:         true,
  vignette:          true,
  vignetteIntensity: 0.3,
  flicker:           false,
  flickerIntensity:  0.05,
  flickerFrequency:  100,  // ms base interval
});

crt.start();                        // inject overlays
crt.screenShake(containerEl, 300);  // 300 ms shake
crt.animateRGBSplit(containerEl);   // 200 ms RGB split
crt.stop();                         // pause flicker only
crt.destroy();                      // full teardown