Installation
pnpm dlx shadcn@latest add https://asciicn.dev/r/retro-computer.jsonUsage
import { RetroComputer } from "@/components/asciicn/retro-computer";
const script = [
{ command: "DIR", output: ["README.TXT GAME.EXE"] },
{ command: "RUN GAME.EXE", output: ["LOADING ..."] },
];
export function Hero() {
return <RetroComputer script={script} className="h-[480px] w-full" />;
}The computer is a small 3D model: a desktop unit with two drive bays, vents and a power light, a CRT whose housing tapers back from the bezel, and a keyboard with its keys laid out in rows. It is projected in perspective and rasterised at the charset's sample grid. Each face is flat-shaded from a fixed light, so the top, front and side of the case each get their own glyph density, and a one-sample gap traces every edge where two faces meet.
The glass shows a live session. The computer types each command in script after prompt, prints its output line by line, then moves on, looping forever. The characters are real glyphs placed where their spot on the tube projects, so the text leans with the monitor as it sways, with a slight bulge like curved glass. A key on the keyboard dips each time a character is typed.
It rests in a three-quarter view and sways a little. It does not react to hover. Press and drag to turn it; it coasts and stays where you leave it. With keyboard focus, the arrow keys turn it.
Examples
Your own session
Pass script, prompt and banner to type anything. Lines longer than the screen is wide wrap onto the next row, so short lines read best. Here a green phosphor and a shell prompt.
Classic ASCII in your theme's ink
The standard ramp draws each side of the case with its own glyph, so the faces read as #, + and :. color="--ascii-ink" paints the case in the theme's ink instead of beige, and the ibm phosphor gives the screen white text.
Props
Every ASCII image look prop also applies to the case, with charset defaulting to "braille", plus fx for a CRT finish. The text on the screen is always drawn in real characters, whatever the charset.
| Prop | Type | Default |
|---|---|---|
| script The session the computer types, looping: each command after the prompt, then its output. | Type: { command: string; output: string[] }[] | Default a tour of a disk |
| prompt The prompt before each command. | Type: string | Default "C:\\>" |
| banner Lines printed at power-on, above the session. | Type: string[] | Default a memory check |
| screen The screen's phosphor: green, amber, white or cyan. | Type: "p1" | "p3" | "ibm" | "blueprint" | Default "p3" |
| color Case colour in truecolor, an aged beige by default. | Type: AsciiColor | Default "#d8cdb1" |
| typing Seconds per typed character. | Type: number | Default 0.06 |
| charset Which glyphs draw the case. | Type: CharsetName | Default "braille" |
| colorMode How glyphs are coloured. | Type: "mono" | "truecolor" | "ansi16" | "duotone" | "palette" | Default "truecolor" |
| interactive Drag or use the arrow keys to turn it. | Type: boolean | Default true |
| cell Glyph cell height in CSS pixels. | Type: number | Default 11 |
| speed Multiplies the typing and the sway. | Type: number | Default 1 |
| animate false draws one still frame. | Type: boolean | Default true |
| handle Filled with a handle for export. | Type: RefObject<AsciiHandle | null> | Default – |
Notes
- It is announced as an image. The session on the screen is decoration, so screen readers don't read it; if the text matters, put it on the page as well, and pass
aria-labelto describe the picture. - Under reduced motion it draws one still frame, partway through the session, with no sway. Dragging and the arrow keys still turn it.
- It draws at up to 30 fps on the CPU and pauses offscreen and in hidden tabs. The model has under 40 faces, so the cost is filling the samples they cover.
- The text grid is sized from the monitor's projected size, so a small box fits fewer characters per line and long lines wrap sooner. Lower
cellto fit more.