Pro

Ascii image

A photograph typed out in characters. It resolves left to right out of flickering glyphs the first time it scrolls into view, and the type under the pointer churns like static, then settles once the pointer moves on.

Pro

pnpm dlx shadcn@latest add @caliper/ascii-image

Field notes, issue 14

Move across the picture to stir the type.

Above the cloud line, 06:40

Installs components/ui/ascii-image.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

Editorial and developer-facing pages where a photo should carry the voice of a terminal or a zine.
Covers, issue headers and 404s that want a picture without a polished photo's weight.

Skip it when

Photos people need to see in detail, such as products or faces in a directory.
Small sizes; under about 40 columns the picture is lost.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Static, not strobe: Churned glyphs change about fourteen times a second rather than every frame, and the loop sleeps once the reveal is done and the pointer is gone.
Read as a picture: The frame is an image named by alt; the characters are never read.

Styling

Ink follows the theme: Dark marks stand for shadows on a light ground and light marks for highlights on a dark one, so the picture reads the right way round in both.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/ascii-image

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

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

The worked example comes with Pro

The 29-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

AsciiImage

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

src *string—

alt *string—What the picture shows; read instead of the characters.

cellnumber7Character width in px. Smaller is finer and costs more.

charsetstring" .,:;-=+*#%@"Glyphs from no ink to most ink.

It exposes img semantics, with aria-label and aria-hidden kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.