ASCII portrait

Installation

Usage

Copyimport { AsciiPortrait } from "@/components/asciicn/ascii-portrait";
 
export function TeamCard() {
  return (
    <AsciiPortrait
      src="/team/ada.jpg"
      alt="Ada, our head of research, smiling at the camera"
      className="aspect-[4/5] w-72"
    />
  );
}

AsciiPortrait is AsciiImage set up for faces. It samples the photo the same way, then shapes the tones before glyphs are chosen:

1. A grade of contrast: 1.2 and gamma: 0.9 separates skin from shadow without crushing either.
2. detail sharpens each sample against the cell around it, so eyes, lips and the line of the nose survive the cell grid.
3. With edges on, a Sobel filter finds the strongest contours and thins them to one sample wide. In Braille and quadrants they light dots on top of the tones. In a ramp charset such as standard they become - / | \ strokes.

Braille is the default because it draws 2×4 dots per cell. That is eight times the detail of a ramp at the same cell size, which matters most on a face.

On mount the portrait develops: the contours come in first, like a sketch, and the tones rise through them over developDuration. Hover the portrait to see the photo left of the pointer. With compare="drag" the split stays where it is dropped, which suits touch screens.

Examples

Colour, with a split you drag

colorMode="truecolor" takes each cell's colour from the photo. compare="drag" starts the split at the middle.

Strokes and phosphor

On the left, the classic ramp with contour strokes drawn as - / | \ glyphs. On the right, Braille on the P3 amber phosphor.

Props

Notes

• The portrait is announced as an image labelled with alt. The split handle is a slider: focus it with Tab, then move it with the arrow keys, or Home and End. Shift moves it in bigger steps.
• With reduced motion, or animate={false}, the portrait appears fully developed. The split still works.
• The develop reveal is the only motion. Once it ends the portrait draws nothing until a prop or the box size changes.
• Sharpening and contour finding run on the CPU once per frame, over the sample grid. A 420 px portrait in Braille at cell={8} is about 100,000 samples, which takes a few milliseconds.
• Give the box a size, such as aspect-[4/5] w-72. The photo fills it and never sets its own height.
• The sample photos are public domain: Abraham Lincoln by Alexander Gardner (1863) and Sally Ride's 1984 NASA portrait, both from Wikimedia Commons.