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.
Transform Loupe Hero
heroesA 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.
ASCII Flow Field
backgroundsA 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.
Bayer Fill Button
componentsA 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.
Dither Develop Card
componentsA 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.
Transform Compare Section
sectionsOne 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.
ASCII Wordmark Footer
sectionsA 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.
ASCII Resolve Heading
text effectsA 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.
ASCII Density Nav
componentsA 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.
Noise Fill Pricing
sectionsPricing 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.
Bayer Dissolve
animationsAn 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.
Dither Drop Input
patternsDrop 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.
The site they were cut from
Every asset above, composed as one working site. It ships with the kit.
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-site6 Pro and 6 free assets. Pro installs through the @viberdy namespace with your API key, set up once. Set it up
More Dither & ASCII in the library
Halftone Depth Field
backgroundsA rotated print screen that swells into a pool of light under the pointer, with the gamma actually done right.
Ordered Dither Plate
backgroundsA gradient quantised to a few tones by an 8x8 Bayer matrix — offset then quantised, dithered in linear light, one cell per device pixel.