ASCII reveal

Installation

Usage

Copyimport { AsciiReveal } from "@/components/asciicn/ascii-reveal";
 
export function Hero() {
  return (
    <AsciiReveal
      src="/photos/launch.jpg"
      alt="The rocket on the pad at dawn"
      direction="down"
      className="w-full max-w-xl"
    />
  );
}

AsciiReveal starts as the picture drawn in glyphs. It samples the photo with the same area-averaging sampler as AsciiImage, so every glyph is the average of the pixels under its cell.

When the reveal runs, an edge sweeps across the picture. Cells at the edge flicker through glyphs in the accent colour, then lock in as the photo. Behind the edge the real photo shows. Ahead of it the glyphs hold. The edge bends a little and has some grain, so cells hand over one by one instead of in straight lines.

trigger sets what starts it:

• view reveals once, when the image scrolls into view.
• hover reveals on hover or keyboard focus, and goes back to glyphs on leave. On a touch screen a tap toggles it.
• manual follows the revealed prop, so you can tie it to your own state.

The box keeps the image's aspect ratio. Pass ratio to reserve the space before the image loads, or set your own aspect-* class.

Examples

Hover cards

Each card reveals on hover or focus and sweeps back on leave. A short duration keeps them quick under the pointer.

Full-width radial reveal

direction="radial" opens the photo from the centre out. This one is Braille in truecolor and reveals once, when it scrolls into view. Press Replay to see it again.

Props

Notes

• The real <img> is always in the page and carries alt, so screen readers read the image in either state. The glyph layers are aria-hidden.
• The image loads lazily. The glyphs sample it once the box comes within about 300 px of the viewport, and the <img> uses loading="lazy".
• With reduced motion, or animate={false}, there is no sweep. A view reveal shows the photo straight away. A hover reveal shows the glyphs until you hover or focus it, then swaps to the photo. A manual reveal shows whatever revealed says.
• The sweep is the only motion. Before it starts and after it ends the component draws nothing new until a prop or the box size changes. Offscreen and in a hidden tab the sweep pauses where it is.
• During the sweep the photo is drawn through a mask of one pixel per cell, so the handover lines up with the glyph grid. At rest the <img> itself shows.
• With trigger="hover" the box is focusable. If it sits inside a link or a button, use trigger="manual" and drive revealed from that element's hover and focus instead.
• The sample photos are public domain, from NASA, the Hubble Heritage Team and Ansel Adams for the US National Park Service, all from Wikimedia Commons.