Skip to the object
Tactile UI

Phosphor Scope

A cathode-ray tube behind smoked glass. The beam leaves light behind it: a radar sweep lights your contacts and they fade, a trace glows where the signal lingers. Real afterglow, not a blur.

What it is for

A live display for software that watches something.

Installnpx shadcn add https://tactileui.dev/r/phosphor-scope.jsonWith a Pass: how

Controls

Job

A radar that lights its contacts, a scope trace, a Lissajous figure, or words drawn by the beam.

Phosphor

P1 green, P3 amber, or P7: a blue-white flash that leaves a yellow-green glow.

How long the light stays after the beam has gone.

Soft to sharp: the width of the beam.

Radar only.

Radar only: sample services, each labelled by the beam as it is painted.

Scope only: a health-check pulse, a service load, or a test waveform. In code, push() draws your own.

Scope only.

Lissajous only.

Text only. A new line with /.

Finish

Auto draws the plate and ring in the page’s finish (its surface and object tokens); without them, graphite on a dark page and aluminium on a light one. The tube stays black glass.

Everything you set here is what the Code and Prompt tabs give you.

Seats open in 11 days. Want one email that morning?

Datasheet

Mechanism
Phosphor persistence buffer, Two decay phosphor, Gaussian beam segments, Dwell weighted energy, Radar sweep fan, Ground clutter speckle, Vector stroke font, Mip chain halo, Barrel curve, Room fixed glass, Sleeping loop, Long exposure still
Stack
Vanilla ES modules, WebGL2, Canvas 2D, CSS, SVG
Needs
Nothing, no dependencies
States
11 documented
Version
0.1.0
Licence
With a Pass

States

  1. RadarThe sweep turns at the set rate; its painting edge flashes and leaves the slow afterglow behind it over ground clutter; each contact flares when the sweep crosses its bearing, its label written beside it by the beam, and fades until the next pass.
  2. ScopeThe trace runs across the graticule over the timebase; it glows brighter where the signal is slow and fainter where it races; the retrace is dark. With signal 'stream', push() draws your samples as they arrive.
  3. LissajousA figure of the set ratio, its phase drifting so it slowly turns; the moving spot is the brightest point.
  4. TextThe words are redrawn by the beam every frame with a hair of jitter; a new line with a newline.
  5. PhosphorsP1 green; P3 amber; P7 flashes blue-white and leaves a yellow-green glow that lasts seconds. Persistence scales every decay.
  6. AluminiumA bead-blasted aluminium plate with a machined ring and four slotted screws; the glass stays smoked.
  7. GraphiteA soft-touch black plate, the ring and screws in dark steel; the tube is the same.
  8. Offpower(false): the screen goes dark, the plate's lamp goes out, no frame is requested.
  9. Off screen or hiddenNo frame runs; a returning tab advances one clamped step, so nothing flashes.
  10. Reduced motionOne still frame, a long exposure of the scene (a full radar turn, a timebase of trace), and no frames after it.
  11. No WebGL2The same scene drawn once on a 2D canvas with a soft glow.

Notes

A radar of services, regions or agents in the field (each contact painted and labelled as the sweep passes); an oscilloscope for a health check's pulse, a service's load, or any stream you push to it; a Lissajous figure for a hero or a loading screen; a status or a 404 written by the beam: SIGNAL LOST, NO CARRIER, DEPLOYING.

Original. Three WebGL2 passes on a texture capped at 768 px: decay (per-channel exp(-dt/τ)), beam (additive gaussian quads), show (barrel, tone map, mip-chain halo, vignette). The plate, ring, graticule and glass are CSS and SVG, lit by the room's lamp, never by the beam.

Anatomy

Phosphor persistence buffer, Two decay phosphor, Gaussian beam segments, Dwell weighted energy, Radar sweep fan, Ground clutter speckle, Vector stroke font, Mip chain halo, Barrel curve, Room fixed glass, Sleeping loop, Long exposure still

Usage notes

A live display for software that watches something. A radar of services, regions or agents in the field (each contact painted and labelled as the sweep passes); an oscilloscope for a health check's pulse, a service's load, or any stream you push to it; a Lissajous figure for a hero or a loading screen; a status or a 404 written by the beam: SIGNAL LOST, NO CARRIER, DEPLOYING.

Options

OptionTypeDescription
modeenumA radar that lights its contacts, a scope trace, a Lissajous figure, or words drawn by the beam.
phosphorenumP1 green, P3 amber, or P7: a blue-white flash that leaves a yellow-green glow.
persistencenumberHow long the light stays after the beam has gone.
intensitynumberIntensity
focusnumberSoft to sharp: the width of the beam.
sweepnumberRadar only.
contactsnumberRadar only: sample services, each labelled by the beam as it is painted.
signalenumScope only: a health-check pulse, a service load, or a test waveform. In code, push() draws your own.
timebasenumberScope only.
ratioenumLissajous only.
texttextText only. A new line with /.
onbooleanPower
finishenumAuto draws the plate and ring in the page’s finish (its surface and object tokens); without them, graphite on a dark page and aluminium on a light one. The tube stays black glass.

Methods

  • update
  • setTargets
  • push
  • setText
  • power
  • destroy

How it works

Original. The plate, ring, graticule and glass are CSS and SVG, lit by the room's lamp, never by the beam.