ASCII Image Reveal

Zenora UI

Get Started

ASCII Image Reveal·Gallery

npx zenora-ui-registry@latest add ascii-image-reveal

Gallery

394 views•79 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add ascii-image-reveal

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A cyberpunk-inspired image reveal effect that samples image brightness into an ASCII grid, scrambling characters dynamically before settling on the final image.

KEY FEATURES

·Canvas-powered image sampling that maps pixel brightness to a custom character set
·Glitchy text scramble animation where denser characters 'roll' before locking in
·Customizable columns, font sizing, and timing for precise retro aesthetics

Props

7 properties

imagesstring[]5 images

List of images to reveal on the grid.

charactersstring........:::=+xX#0…

Characters mapped from light to dark. Everything after the last '.' is considered dense.

backgroundcolor#111111

Background color of the canvas.

inkColorcolor#c8c8c8

Color of the ASCII text characters.

columnsnumber28

Number of horizontal character columns per image.

fontSizenumber13

Font size of the ASCII characters in pixels.

scrambleCountnumber10

How many random characters to flash before settling on dense pixels.

Zenora UI

Get Started

ASCII Image Reveal·Gallery

npx zenora-ui-registry@latest add ascii-image-reveal