Installation
pnpm dlx shadcn@latest add https://asciicn.dev/r/server-rack.jsonUsage
import { ServerRack } from "@/components/asciicn/server-rack";
export function StatusHero() {
return (
<section className="relative isolate min-h-[520px]">
<ServerRack intensity={0.5} className="absolute inset-0 -z-10" />
<h1>All systems nominal</h1>
</section>
);
}The rack is seen from the front. A fibre patch panel and a 48-port core switch sit at the top, a UPS at the bottom, and between them a mix of 1U web servers, 2U GPU nodes with fans turning behind the grille, 2U storage shelves and blanking plates. Rack numbers run up the left rail and a power strip with one outlet per unit runs beside it.
Every light keeps its own rhythm. Drive LEDs go quiet, then blink a couple of times a second for a few seconds, the way real disk I/O comes in spells. Fewer than half are busy at once, so the rack hums rather than strobes. Each machine's health LED beats twice and rests. Switch ports stay green while their link is up and blink dark with traffic. The locator LED turns blue now and then. Each machine's uplink fibre runs out to the cable channel on the right and climbs out through the roof, and slow pulses of light travel along it both ways.
activity sets how busy it all looks. At 0 the drives sit still and only the heartbeats and steady links remain. At 1 more drives blink and the fibres carry two streams each. alert blinks one unit amber, about every two seconds: its bezel, name and status LED. Pass true to flag the first storage shelf, or a rack position counted from the bottom, like the numbers on the rail.
It draws in cp437 by default: box drawing for the cabinet and bezels, shades for the drive sleds, ≡ for vents, and doubled lines where a pulse passes. standard swaps every glyph for plain ASCII, for fonts and terminals without box drawing. When the box is wider than one rack, neighbouring racks fill the aisle on both sides, dimmer the further out they stand.
Examples
Incident card
alert={5} flags the storage shelf at U05 on a status card, while activity={0.85} keeps the rest of the rack busy.
Plain ASCII on a phosphor
charset="standard" and phosphor="p1" draw the rack in green ASCII on dark glass, with a CRT finish from fx. intensity={0.5} keeps the headline on top easy to read.
Props
| Prop | Type | Default |
|---|---|---|
| units Height of the rack in rack units, 1 to 48. Each unit is two rows of glyphs. A rack taller than the box is cropped top and bottom. | Type: number | Default 18 |
| activity How busy the machines are, from 0 (idle) to 1. Drives the drive LEDs, port lights and fibre pulses. | Type: number | Default 0.6 |
| alert true blinks the first storage shelf amber. A number flags the unit at that rack position, counted from the bottom. | Type: boolean | number | Default false |
| intensity How much of the scene shows, from 0 (empty paper) to 1. Lower it under text. | Type: number | Default 1 |
| charset cp437 draws box drawing, shades and bullets. standard uses plain ASCII only. | Type: "cp437" | "standard" | Default "cp437" |
| colorMode truecolor lights LEDs and fibres in colour. mono draws every glyph in the ink, so lit LEDs stand out by glyph and brightness. | Type: "truecolor" | "mono" | Default "truecolor", or "mono" with a phosphor |
| phosphor A CRT ink and glass that replace the ink and paper. | Type: "p1" | "p3" | "ibm" | "blueprint" | Default – |
| background "transparent" draws the glyphs only, over your own surface. | Type: "paper" | "transparent" | Default "paper" |
| fx CRT finish: scanlines, bloom, curvature, glitch, flicker and vignette, each 0 to 1. | Type: PostFx | Default – |
| cell Height of one glyph cell in CSS pixels. | Type: number | Default 12 |
| speed How fast the lights and pulses move. | Type: number | Default 1 |
| animate false holds one still frame. | Type: boolean | Default true |
| stillTime The moment drawn when motion is off or reduced, in seconds. | Type: number | Default 4.2 |
| handle Filled with a handle that reads back the current frame, for export to text, ANSI, SVG or PNG. | Type: RefObject<AsciiHandle | null> | Default – |
| className Size and position. The scene fills this box. | Type: string | Default – |
Notes
- It is decorative and hidden from assistive technology. Put real status text next to it or on top of it, not inside it.
- It ignores the pointer, so moving the mouse over it changes nothing.
- With reduced motion turned on, it draws one still frame at
stillTime, with some LEDs lit and a few pulses mid-fibre. - It draws on the CPU at up to 30 fps and pauses when scrolled out of view or when the tab is hidden. Every frame is a few thousand cell writes, so it costs little even full-screen.
- The unit names and readouts are glyphs on a canvas, not text. Copy or export them with
handle.