video-dither

Real-time video dithering effects for React.

Install

npm install video-dither

<Dither />

import { Dither } from "video-dither";

<Dither src="/video.mp4" />

| Prop | Type | Default | |------|------|---------| | src | string | required | | algorithm? | "bayer" \| "floyd-steinberg" \| "atkinson" | "bayer" | | levels? | number | 5 | | bayerSize? | 4 \| 8 | 4 | | resolution? | number | 240 | | colorMode? | "mono" \| "color" | "mono" | | fgColor? | string \| [r, g, b] | [255, 255, 255] | | bgColor? | string \| [r, g, b] | [0, 0, 0] | | gamma? | number | 1 | | contrast? | number | 0 | | style? | CSSProperties | none |

useDither()

import { useRef } from "react";
import { useDither } from "video-dither";

const videoRef = useRef<HTMLVideoElement>(null);
const canvasRef = useDither(videoRef);

Returns a canvasRef to mount in your JSX. Handles the render loop, letterboxing, and resize.

ditherImageData()

Framework-agnostic. Works outside React.

import { ditherImageData } from "video-dither";

const imageData = ctx.getImageData(0, 0, width, height);
ditherImageData(imageData);
ctx.putImageData(imageData, 0, 0);

Types

type DitherAlgorithm = "bayer" | "floyd-steinberg" | "atkinson";

interface DitherOptions {
  algorithm: DitherAlgorithm;
  levels: number;
  bayerSize: 4 | 8;
  colorMode: "mono" | "color";
  fgColor: [number, number, number];
  bgColor: [number, number, number];
  gamma: number;
  contrast: number;
}

License

MIT