Usage
import { AsciiArt } from "@/registry/components/ascii-art/ascii-art";
<AsciiArt piece={/* … */} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
piece | AsciiPieceName | Piece | A bundled piece by name ("donut", "spinners", "pipeline"…) or any ascii.rest piece module. | |
options? | MountOptions | The piece's own options (e.g. { phrases: [...] } for typewriter, { code, title, message } for not-found) and fps. | |
tone? | AsciiArtTone | "default" | Ink colour from my tokens. Default default (the foreground). |
size? | number | 12 | Font size of one cell in px. Ignored when fit is set. Default 12. |
fit? | boolean | false | Scale the cells so the piece fills its container's width (between 6px and maxSize). |
maxSize? | number | 18 | Upper bound for the cell size with fit. Default 18. |
paused? | boolean | false | Hold the first frame (or the piece's chosen still frame). Reduced motion does this on its own. |
framed? | boolean | false | Put it on a muted, bordered panel. |
center? | boolean | false | Center the art in its box. |
label? | string | What the picture shows, for screen readers. Default the piece's own note. |
When to use
A bit of quiet motion on a minimal, monospace or developer-facing page: a hero or empty state (`donut`, `plasma`), a 404 page (`not-found`), a loading or install screen (`spinners`, `progress-bar`, `boot-log`, `skeleton`), a status or CI page (`pipeline`, `uptime-bar`, `sparkline`), or a typed tagline (`typewriter`).
When not to use
Real data or real progress (bar-chart, line-chart, progress-tracker: the pieces animate made-up values); a small inline spinner beside text (bars-spinner, dot-matrix-loader); highlighted source code (code-block); colourful illustration (hairline-figure, the card illustrations).
Related
Dot matrix loader · Scramble text · Code block · Hairline figure · Empty state