ditherfx

[][]

image reveals from ink dithers · halftone, bayer, noise and ascii · from the deniz lab

pattern

speed

the other patterns

02bayerordered dither. the woven, screen-printed retro grid.
ordered dither. the woven, screen-printed retro grid.
03noiserandom grain. softer, film-like, no visible order.
random grain. softer, film-like, no visible order.
04asciiglyphs by luminance. a computer drawn in type.
glyphs by luminance. a computer drawn in type.

usage

install

npm install @denizeffects/ditherfx

react

import { DitherReveal } from "@denizeffects/ditherfx";

<DitherReveal src="/cover.jpg" mode="halftone" speed="normal" />
<DitherReveal src="/cover.jpg" trigger="hover" />
<DitherReveal src="/cover.jpg" still />  // dither art, never resolves

zero dependenciescanvas 2d, no webgla real img underneathrespects reduced motionmit license

[→]