mischief
exampleascii-image-demosource: ok · hit
ASCII Image Demo
A worked example of ASCII Image: A photograph redrawn as characters. The grid is worked out once and kept, so each frame is a single copy rather than thousands of letters measured again.
npx shadcn add "https://ui.tinkererslabs.com/r/ascii-image-demo.json"free
Interaction
text-animation
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
https://ui.tinkererslabs.com/r/ascii-image.json
Files1 · source cached 10/10/2026, 6:48:01 AM
components/demos/ascii-image-demo.tsx
"use client"
import { AsciiImage } from "@/registry/default/ascii-image/ascii-image"
export function AsciiImageDemo() {
return (
<div className="w-full max-w-sm">
<AsciiImage
src="/demo/gallery/impossible-checkbox.png"
alt="The impossible checkbox experiment, drawn as characters"
className="aspect-square"
cell={7}
/>
</div>
)
}