ASCII imagePro

An image as ASCII in Geist Mono: a selectable pre for small grids, a glyph atlas canvas for large ones, and shape aware matching that follows edges instead of stepping.

Markdown

On this page

ProA portrait as selectable ASCII, shape aware or on a luminance ramp, at 56 or 80 columns.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/ascii-image

Usage

tsx

import { AsciiImage } from "@/components/ui/chatcn/pro/ascii-image"

<AsciiImage src={image.url} alt={image.prompt} columns={80} mode="shape" />

Shape mode samples six regions in every cell and picks the glyph whose own ink falls in the same places, so a diagonal edge becomes / and a horizon becomes _. The luminance mode maps tone onto a ramp you can replace. Up to 3,200 cells render as text you can select and copy; past that the grid draws to a canvas from a glyph atlas built once per font size.

Examples

Large grid on canvas

Pro200 columns drawn from a Geist Mono glyph atlas onto a canvas.

States

ProA block ramp, a negative, a muted ink on a surface, loading and a missing file.

Props

Prop	Type	Notes
`src`, `alt`	`string`	`alt` is the accessible name of the whole grid
`columns`	`number`	Characters across. The font size follows the width. Default 80
`mode`	`"shape" \| "luminance"`	Default `shape`
`ramp`	`string`	Light to dense, for the luminance mode
`renderer`	`"auto" \| "dom" \| "canvas"`	`auto` switches to canvas past 3,200 cells
`contrast`, `brightness`, `invert`		Defaults 1.1, 0 and false
`ink`, `paper`	`string`	Glyph color and ground. `paper` defaults to `transparent`
`aspectRatio`		The grid's shape. Defaults to the image's

Accessibility

The grid is one role="img" with your alt as its name. Screen readers never read the characters one by one.
Under forced colors the characters hide and the plain image shows.

Motion

The grid fades in over 200 ms once it is ready. Nothing else moves.