ASCII Image Reveal Effect

How it works

An editorial photo grid where every frame develops in front of you. When a frame scrolls into view it first appears as ASCII art: characters pop in across the tile in random order, the shadows snap straight to their final glyph, and the lit parts of the picture, usually the face, flicker through dense random characters for a moment before they lock. Once the whole picture has formed in text, it holds for a beat and then dissolves into the real photograph. Frames that enter together cascade one after another, and tapping or clicking a frame scans it again.

There is no library behind it, not even GSAP. It is the Canvas 2D API, one small animation loop per tile and an IntersectionObserver.

Turning a photo into characters

Each image is cropped to its tile, shrunk down to one pixel per character cell, and read back pixel by pixel. Every cell's brightness picks a character from a ramp that goes from empty to dense. Because the canvas draws light glyphs on a dark ground, more ink means more light, so bright areas must get the dense characters.

A short ramp is a coarse instrument, and a set of photographs never shares one exposure. So every frame is levelled on its own before it is mapped: the ends of its brightness range are stretched across the ramp, and very bright, high-key images are pulled down so their midtones land in the middle of the ramp instead of piling up as solid blocks.

The grid is measured, never assumed. The number of columns comes from the tile's real width, the font size from the measured width of one character of the monospace face, and the canvas is sized to the tile's actual pixels.

The flicker and the trigger

The animation is a small state machine per cell. Cells come in at a steady rate in shuffled order; dark ones settle at once, brighter ones flip through random dense glyphs a few times before showing their real character. That split is why the face resolves last.

The scan starts when a tile enters the viewport, never on page load, otherwise most frames would finish before anyone scrolls to them.

Robustness, performance and mobile

Much of the craft is in failing well. With JavaScript off the page is a normal photo gallery. A photo that fails to load, a cross-origin image that cannot be read, or an observer that never fires all fall back to the photograph instead of leaving a dark box. Tiles waiting below the fold show a faint scatter of glyphs rather than a black rectangle. The scan waits for the web font, because measuring the fallback font would build every grid to the wrong size, and it rebuilds on resize and rotation. Reduced motion paints the finished ASCII without the flicker. On phones the grid drops to fewer columns so each tile stays wide enough to hold a likeness.