KQ-1468 · RELAY/TERMINAL
Relay Terminal
A background that is a terminal screen of mono glyphs holding real-looking console output, updating in bursts: lines re-roll and settle left to right, value fields tick, and now and then the screen feeds a line, scrolling up a row on the springs.glide constants while the new line types in behind a blinking cursor. Written glyphs flare and decay through the phosphor with a fading ghost of what they replaced, a faint line screen and a slow rolling band sit over the tube, and a line occasionally tears sideways and springs back on springs.snap. The pointer is a lamp whose light follows on glide and arrives on springs.drift; a press pings the screen with a ring that flares every glyph it crosses, and keyboard focus on a control inside lights and pings from that control.
Gaugeworks Relay
Every node, one console
Live status from 214 relays
hex · 1.25 bursts a second · green phosphor
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/relay-terminal
Props
- children
- React.ReactNode
- default —
- The content on top of the screen: a hero line, a heading, a call to action.
- rate
- number
- default 1.25
- How many bursts of output arrive a second, 0 (none) to 4.
- glyphs
- "hex" | "binary" | "ascii" | "blocks" | string
- default "hex"
- The glyph set the output is written in: a named set, or a string of your own characters.
- color
- "green" | "amber" | "ice" | "mono" | string
- default "green"
- The phosphor: a named colour, or any CSS colour.
- fontSize
- number
- default 12
- The glyph size, px; the grid follows it.
- density
- number
- default 0.6
- How full the lines run, 0 (short, sparse output) to 1 (lines to the edge).
- decay
- number
- default 1.4
- How long a written glyph glows before it settles, seconds: the phosphor's persistence.
- glitch
- number
- default 0.4
- How often a line tears sideways and springs back, 0 (never) to 1.
- scanlines
- number
- default 0.5
- The fine line screen and the slow rolling band, 0 (none) to 1.
- glow
- number
- default 0.5
- The halo round lit glyphs, 0 (none) to 1.
- cursor
- boolean
- default true
- A block cursor blinks at the end of the newest line.
- interactive
- boolean
- default true
- The pointer and keyboard focus light the glyphs near them, and a press pings the screen.
- pointerStrength
- number
- default 0.7
- How brightly the hand lights the glyphs, 0 to 1.
- radius
- number
- default 90
- How far the hand's light reaches, px.
- paused
- boolean
- default false
- Stop the output; the screen settles and the hand still lights it.
- seed
- number
- default 1
- Seeds the output, the bursts and the glitches, so two screens never match.
- dpr
- number
- default 2
- Cap on the canvas's device pixel ratio, at most 2.
- onActiveChange
- (active: boolean) => void
- default —
- Fires when the pointer or keyboard focus starts (true) or stops (false) lighting the screen.
- onPing
- () => void
- default —
- Fires when a press or keyboard focus pings the screen.
- className
- string
- default "h-full w-full"
- Sizes and shapes the box.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | The content on top of the screen: a hero line, a heading, a call to action. |
| rate | number | 1.25 | How many bursts of output arrive a second, 0 (none) to 4. |
| glyphs | "hex" | "binary" | "ascii" | "blocks" | string | "hex" | The glyph set the output is written in: a named set, or a string of your own characters. |
| color | "green" | "amber" | "ice" | "mono" | string | "green" | The phosphor: a named colour, or any CSS colour. |
| fontSize | number | 12 | The glyph size, px; the grid follows it. |
| density | number | 0.6 | How full the lines run, 0 (short, sparse output) to 1 (lines to the edge). |
| decay | number | 1.4 | How long a written glyph glows before it settles, seconds: the phosphor's persistence. |
| glitch | number | 0.4 | How often a line tears sideways and springs back, 0 (never) to 1. |
| scanlines | number | 0.5 | The fine line screen and the slow rolling band, 0 (none) to 1. |
| glow | number | 0.5 | The halo round lit glyphs, 0 (none) to 1. |
| cursor | boolean | true | A block cursor blinks at the end of the newest line. |
| interactive | boolean | true | The pointer and keyboard focus light the glyphs near them, and a press pings the screen. |
| pointerStrength | number | 0.7 | How brightly the hand lights the glyphs, 0 to 1. |
| radius | number | 90 | How far the hand's light reaches, px. |
| paused | boolean | false | Stop the output; the screen settles and the hand still lights it. |
| seed | number | 1 | Seeds the output, the bursts and the glitches, so two screens never match. |
| dpr | number | 2 | Cap on the canvas's device pixel ratio, at most 2. |
| onActiveChange | (active: boolean) => void | — | Fires when the pointer or keyboard focus starts (true) or stops (false) lighting the screen. |
| onPing | () => void | — | Fires when a press or keyboard focus pings the screen. |
| className | string | "h-full w-full" | Sizes and shapes the box. |