ComponentsPixel
ASCII text
The title rendered in ASCII glyphs that ripple.
Installation
$ npx shadcn@latest add @textlab/ascii-textNeeds @textlab in your components.json. Setup takes a minute.
Usage
usage.tsx
import { AsciiText } from "@/components/textlab/ascii-text/ascii-text";
<AsciiText as="h1" text="TERMINAL" className="font-black text-8xl" />Variants
classicblocksbrailleProps
| Prop | Type | Default | Description |
|---|---|---|---|
| text* | string | – | The copy. |
| variant | "classic" | "blocks" | "braille" | "classic" | Character ramp: .:-=+*#%@, shade blocks, or braille dots for fine detail. |
| density | number | 0.1 | Cell size as a share of the font size. |
| as | ElementType | "span" | Rendered element. |
| reducedMotion | "user" | "always" | "never" | "user" | user follows the OS setting; always shows the still version. |
| className | string | – | Merged onto the root. |
When to use it
Reach for it
- Developer tools, retro computing and terminal aesthetics.
- Large, heavy display words; thin type has too little to sample.
Skip it
- Small text; cells need room.
- When the word must be crisp; it is deliberately coarse.
Accessibility and motion
Accessibility
- The canvas is decorative; screen readers read the hidden text.
- A hidden copy sizes the box, so layout matches the real text.
Motion
- Glyphs resolve in a scattered order over 0.9 s when the title scrolls in.
- The pointer sends a decaying ripple through the character ramp.
Reduced motion. Shows the plain text instead of the canvas.
Performance
- Rasterises once per resize; draws only while revealing or while the pointer is over it.
- Device pixel ratio capped at 2.