Skip to content
StyleDrop 10 · 28 Sept 2026Complete kit · 12 assets

Dither & ASCII

Real-time dithering, halftone and ASCII shaders that make any image look printed on purpose.

Every asset, standalone

Designed together as one site, then cut apart. Take one, or take the whole kit.

Featured
NewPro

A first screen whose picture is computed live: a plane of spheres under a low sun, printed in blue-noise dither, with a loupe under the pointer that shows it as shape-matched ASCII, a halftone screen, Bayer or the source.

herowebgldither
NewPro

ASCII Flow Field

backgrounds

A background of live ASCII: a drifting contour map set glyph by glyph in your mono face, matched to the shape of each cell, that bends round a hill the pointer raises, its upper contours in signal.

backgroundasciiwebgl
New

A button whose fill prints in cell by cell through the 8x8 Bayer order on hover and focus, with its label inverting exactly where each cell lands; press it and the screen halves to a finer grid.

buttonditherbayer
New

A card whose image prints in cell by cell the first time it is seen, ordered-dithered with CSS alone, with a soft light that follows the pointer through the dither.

cardditherbayer
NewPro

One source through every transform, split by a wipe you drag: a raymarched still life on the left, and on the right true Atkinson or Floyd–Steinberg diffusion, blue noise, Bayer, halftone or shape-matched ASCII.

sectionwebgldither
NewPro

A footer whose name is set in live ASCII: the wordmark drawn glyph by glyph in signal, printed in cell by cell as the footer rises, crossed by a slow light, and turned to paper under the pointer.

footerasciiwebgl
New

A heading that resolves from ASCII into type: its own letterforms redrawn in shape-matched glyphs step from coarse to fine as it comes into view, then a lens under the pointer shows the glyphs again.

text effectasciiheading
New

A nav whose active link is marked by a band of ASCII density: characters thicken through a ramp under the active link and flow to the next one on a spring, its peak in signal.

navigationnavbarascii
NewPro

Pricing where volume fills a plane of dots in blue-noise order: drag the images a month and the dots light evenly with no clumps, the newly lit ones flashing signal, while the plan that covers it lights up.

pricingwebglblue noise
New

Bayer Dissolve

animations

An ordered-dither transition: a new state prints in over the old one in 8x8 Bayer order while the screen refines from coarse cells to fine, or prints in from the ground on first view.

animationtransitiondither
New

Drop an image and see it dithered right there, with CSS alone: choose the cell size and the ink, set the exposure, and the request URL for that output builds as you go; submitting copies it.

formfile uploaddropzone

The site they were cut from

Every asset above, composed as one working site. It ships with the kit.

viberdy.dev/library/dither-ascii-site

Dither & ASCII Site

View template

Complete kit · Drop 10

The whole Dither & ASCII kit in one command.

npx shadcn@latest add @viberdy/transform-loupe-hero @viberdy/ascii-flow-field @viberdy/bayer-fill-button @viberdy/dither-develop-card @viberdy/transform-compare-section @viberdy/ascii-wordmark-footer @viberdy/ascii-resolve-heading @viberdy/ascii-density-nav @viberdy/noise-fill-pricing @viberdy/bayer-dissolve @viberdy/dither-drop-input @viberdy/dither-ascii-site

6 Pro and 6 free assets. Pro installs through the @viberdy namespace with your API key, set up once. Set it up

Pro

A rotated print screen that swells into a pool of light under the pointer, with the gamma actually done right.

canvashalftoneprint
Pro

A gradient quantised to a few tones by an 8x8 Bayer matrix — offset then quantised, dithered in linear light, one cell per device pixel.

canvasditherprint