Servers

A small rack room runs in the dark. LEDs blink on their own phases, packets travel between machines, and a ping sends a request to a rack and raises a short alert.

SERVERS / RACK 04LIVE

Click to ping a rack.

Seed 29, columns 110, and speed 1 are fixed in this demo. The palette and calm controls update the running engine without rebuilding the world.

Behavior

Racks — a fixed 4×2 layout of server racks.
LEDs — each rack has independently phased activity lights.
Packets — requests travel between racks and the ping target.
Ping — a click sends a packet and briefly raises the alert state.
Calm — removes the fastest LED blink and alert flash.

Interaction

Click the canvas to ping a rack. From code:

import { createServers } from "ascii-things/servers";

const room = createServers(canvas, { seed: 29, count: 8 });
room.ping(canvas.clientWidth * 0.5, canvas.clientHeight * 0.5);
// Equivalent: room.trigger("ping", x, y);

ping() is disabled under reduced motion.

Options

Option	Type	Default
`count`	`number`	`8`	Rack count hint
`scale`	`number`	`1`	Scene scale hint, clamped 0.5–2
`seed`	`number`	random	Reproducible room
`palette`	name \| `Palette` \| `"auto"`	`"abyss"`	Theme
`columns`	`number`	`124`	Art-direction target
`speed`	`number`	`1`	Time scale; `0` freezes
`interactive`	`boolean`	`true`	Pointer input
`maxDpr`	`number`	`2`	Backing-store cap
`maxCells`	`number`	`16000`	Grid cap
`adaptiveQuality`	`boolean`	`true`	Reduce DPR when frames run slow
`calm`	`boolean`	`false`	Remove fast blink and alert flash
`paused`	`boolean`	`false`	Start with the clock stopped
`fontFamily`	`string`	canvas CSS font	Drawing font
`label`	`string`	—	Accessible name
`onEvent`	`(event) => void`	—	Ping moments

Stats

ServerStats adds servers, packets, and alerts:

type ServerStats = {
  fps: number;
  frameMs: number;
  cells: number;
  columns: number;
  rows: number;
  servers: number;
  packets: number;
  alerts: number;
};

React

import { AsciiServers } from "ascii-things/react";

<AsciiServers
  seed={29}
  count={8}
  palette="neon"
  aspectRatio="16 / 9"
  label="A live ASCII server rack"
/>;

Plain HTML

<ascii-servers
  seed="29"
  count="8"
  palette="neon"
  label="A live ASCII server rack"
  style="display: block; width: 100%; height: 420px"
></ascii-servers>