PRO

ASCII Image Reveal

A gallery of photos that decode from canvas glyphs. Each tile samples its image into a luminance grid, reveals cells in a shuffled order, scrambles dense shadow characters, then fades the original photograph through the ASCII plate.

Component
ASCII reveal image 1
ASCII reveal image 2
ASCII reveal image 3
ASCII reveal image 4
ASCII reveal image 5
ASCII reveal image 6
ASCII reveal image 7
ASCII reveal image 8
ASCII reveal image 9
ASCII reveal image 10
ASCII reveal image 11
ASCII reveal image 12
ASCII reveal image 13
ASCII reveal image 14
ASCII reveal image 15
Install
npx shadcn@latest add https://ui.aryank.space/r/ascii-image-reveal.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API
PropTypeDefaultDescription
imagesstring[]15 Compronents-hosted JPGsImages sampled into the ASCII reveal tiles.
charsstring"........:::=+xX#0369"Dark-to-bright glyph ramp.
columns / fontSizenumber25 / 14ASCII sampling grid and canvas font size.
scrambleCount / scrambleSpeedMsnumber10 / 100How long dark cells keep cycling random dense glyphs.
gap / backgroundstring"2rem" / "#111111"Gallery spacing and page background.
Customize
imagesasset-url

Fifteen images hosted through https://ui.aryank.space/assets/ascii-image-reveal/img1.jpg and the numbered set.

chars / columnstext

Glyph ramp and sampling density.

glyphColor / canvasBackgroundcolor

ASCII plate colors before the image reveal.

Dependencies
None.