ASCII image

Installation

Usage

Copyimport { AsciiImage } from "@/components/asciicn/ascii-image";
 
export function Cover() {
  return (
    <AsciiImage
      src="/photos/launch.jpg"
      alt="The launch pad at dawn"
      charset="dense"
      reveal="spotlight"
      className="aspect-video w-full"
    />
  );
}

The image is sampled on the CPU. Each glyph takes the area average of the pixels under its cell, so fine detail averages out instead of flickering into noise. Braille samples 2×4 dots per cell and quadrants 2×2, which gives those charsets four to eight times the detail of a ramp at the same cell size.

Switching charset or colorMode redraws from the samples already taken. Resizing, a new fit or a new src samples the image again, once.

On a dark page, bright pixels draw dense glyphs. On a light page it flips, so dark pixels draw dense glyphs and the photo still reads the right way round. Set invert to pick one yourself. Phosphor and duotone looks bring their own dark glass and never flip.

autoLevels stretches the image so its darkest and brightest 1% of pixels reach the ends of the ramp. Flat, foggy photos gain the most. Turn it off to keep a photo's own exposure, then use grade to adjust it.

Examples

Amber phosphor in Braille

Two by four dots per cell in one ink, with the P3 amber glass behind it.

See the photo under the pointer

reveal="photo" opens a soft window onto the original file around the pointer.

Edges and blocks

charset="edge" draws strong contours as - / | \ strokes across the gradient and fills the rest from a ramp. Next to it, ANSI blocks through the sodium ramp.

Props

Notes

• The wrapper is announced as an image labelled with alt. The canvas inside is hidden from assistive technology. With alt="" the whole thing is decorative.
• While the file loads, a faint sweep of glyphs and a spinner hold its place. If it fails to load, the box says so in glyphs.
• With reduced motion, the image appears without the intro. The spotlight still follows the pointer.
• A still image draws once and then stops. Only the intro, the loading sweep and reveal="spotlight" keep a frame loop running, and that loop pauses offscreen and in hidden tabs.
• Give the box a size, such as aspect-video w-full. The image fills it and never sets its own height.