Package Exports

crt-fx

Readme

CRT-FX

WebGL shader-based CRT monitor effect library. Applies retro phosphor masks, scanlines, chromatic aberration, bloom, barrel distortion, noise, and more to any image — all running in real-time on the GPU.

Install

bun add crt-fx
# or
npm install crt-fx

Quick Start

import { CRTEffect, presets } from 'crt-fx';

const canvas = document.querySelector('canvas');
const crt = new CRTEffect(canvas, presets.trinitron);

await crt.loadImage('photo.jpg');
crt.start(); // animated loop (noise/flicker)

API

`new CRTEffect(canvas, options?)`

Create a CRT effect processor attached to a canvas element.

const crt = new CRTEffect(canvas, {
  scanlines: { intensity: 0.7, count: 800, sharpness: 0.5 },
  chromatic: { offset: 2.5 },
  bloom: { radius: 4, strength: 0.3, threshold: 0.7 },
  phosphor: { style: 'aperture-grille', scale: 1.0, intensity: 0.5 },
  noise: { intensity: 0.05, flickerIntensity: 0.03 },
  vignette: { strength: 0.3, radius: 0.8 },
  curvature: { amount: 0.02 },
  colorBleed: { amount: 0.003 },
});

`crt.loadImage(source)`

Load an image. Accepts: HTMLImageElement, URL string, File, ImageBitmap, ImageData, or HTMLCanvasElement.

`crt.start()` / `crt.stop()`

Start/stop the animation loop (for time-varying effects like noise and flicker).

`crt.update(options)`

Deep-merge update specific effect parameters in real time.

`crt.exportBlob(mimeType?)` / `crt.exportDataURL(mimeType?)`

Export the current rendered frame.

`crt.dispose()`

Clean up all WebGL resources.

Effects

Effect	Key	Description
Barrel Distortion	`curvature`	CRT screen curve
Color Bleed	`colorBleed`	Horizontal color smearing
Chromatic Aberration	`chromatic`	RGB channel offset
Phosphor Mask	`phosphor`	10 phosphor patterns
Scanlines	`scanlines`	Horizontal scanline overlay
Noise	`noise`	Static grain + flicker
Bloom	`bloom`	Glow on bright areas
Vignette	`vignette`	Edge darkening

Phosphor Styles

shadow-mask · aperture-grille · slot-mask · cromaclear · pvm · arcade · vga · composite · mono-green · mono-amber

Presets

trinitron · arcade · pvm · vhs · terminal · amberTerminal · consumer90s · pcMonitor · retrogaming · cinematic

Preview App

cd preview
bun install
bun run dev

Build

bun install
bun run build

Tech

WebGL 1 / GLSL ES 1.0
Zero dependencies
Multi-pass framebuffer pipeline
Handles canvas resize and WebGL context loss

crt-fx