Ascii Art
Turn an image into animatable ASCII or pixel art.
Downsamples any image (or text/emoji) in real time into ASCII characters or pixel blocks, revealing it with a scramble, wave, or scan animation. Everything is drawn with canvas 2D, and it respects "reduce motion".
npx shadcn@latest add https://webberui.com/r/ascii-art.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<AsciiArt />
Installation
npx shadcn@latest add https://webberui.com/r/ascii-art.jsonOr, once registries are configured in components.json, install it as @webberui/ascii-art.
Usage
Pass an image through src (a data: URI is recommended to keep the component self-contained), or use text to treat a string or emoji as the source graphic.
import { AsciiArt } from "@/components/ui/ascii-art";
<AsciiArt src="/portrait.png" columns={90} animation="scramble" loop />
<AsciiArt text="★" mode="pixel" animation="reveal" />Tip:
columnsis the number of horizontal character columns — larger is finer but heavier. A cross-origin image without CORS headers taints the canvas and cannot be sampled, so a same-origin resource or adata:URI is the safest choice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | — | Source image URL or data: URI |
text | string | "★" | Without src, this text or emoji is used as the source graphic instead |
alt | string | — | Alternative text for assistive technology |
columns | number | 72 | Horizontal resolution (number of character columns) |
chars | string | " .:-=+*#%@" | Character ramp from dark to light, at least two characters |
color | string | currentColor | Text color in ascii mode |
background | string | "transparent" | Background color |
mode | "ascii" | "pixel" | "ascii" | Output characters or colored pixel blocks |
animation | "scramble" | "wave" | "reveal" | "none" | "scramble" | Animation mode |
speed | number | 1 | Animation speed multiplier |
fontSize | number | 9 | Pixel height of a single cell (the font size in ascii mode) |
invert | boolean | false | Invert the brightness mapping |
loop | boolean | false | Whether to keep looping after the animation finishes |
Accessibility
- When the user has "reduce motion" enabled at the system level, the final static frame is drawn directly with no animation
- The canvas carries
role="img"and anaria-label, so the alternative text is announced rather than the individual cells