Skip to the object
TACTILE UI

Warm-up

A page preloader made as a row of valves warming up. The filaments come up one after another, cold wire to amber to a white-hot core, as the page really loads; an anode meter swings up and the Phosphor Scope draws a clean sine. Then the row dims and the panel lifts off the page.

Built with Phosphor Scope

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

Datasheet

Mechanism
Filament heat layers, Css var driven glow, Staggered load windows, Thermal lag approach, Damped spring needle, Scope gain from heat, Real progress milestones, Set progress api, Floor not a delay, Stall timeout, Aria busy until open, Inert page while shut, Status in words, Sleeping frame loop, Cover lift, Reduced motion no lift, Finish following
Stack
Vanilla ES modules, CSS, SVG, WebGL, Container queries
Needs
Phosphor Scope
States
13 documented
Version
0.1.0
Licence
With a Pass

States

  1. ColdThe unit stands over the page with every filament a dark wire, the needle at zero, the figure at 000% and the Scope a flat line. The page under it is real DOM and inert; the section is aria-busy.
  2. WarmingAs the load arrives the filaments come up one after another, each with a thermal lag: a dull orange, then amber, then a white-hot core, with its light in the glass and on the chassis under it. The figure counts, the needle swings up and a little past, and the Scope’s trace grows from a flat line to a sine. The status says “Warming up. 3 of 5 valves lit.”
  3. WarmThe load is at 1 and every filament is at full heat; the status says “Warm. Opening the page.”
  4. LiftingThe row dims as the whole panel lifts up and off the page over 560 ms, its lip along the lower edge.
  5. OpenThe cover is gone, the page is live, aria-busy is false, the Scope is powered off and nothing runs. wu-open fires with the milliseconds it took.
  6. Fast loadWith every milestone already past it opens in about a second: the 300 ms floor, the filaments’ own lag, the lift; there is no other wait.
  7. StalledIf the load has not finished after the timeout (8 s by default) the page opens anyway and the status says “Taking longer than usual. Opening the page anyway.”
  8. ReplayThe Replay key puts the cover back and runs the timed demonstration again.
  9. TabletThe same unit, centred; the bench keeps three columns until the section is narrower than 620px.
  10. PhoneUnder 620px the bench is two columns (the Scope and the meter) with the words under them, the figure is smaller and the demonstration page’s links fold away; under 430px the valve types are set smaller; no sideways scroll.
  11. Reduced motionNo lift and no glide: the filaments, needle and figure show where the load is, the cover is simply removed when the page is ready, the Scope draws one still frame, and the Replay key is not offered.
  12. Off screenOff screen or in a hidden tab the frame loop stops; it wakes when seen.
  13. FinishesAluminium and graphite by data-finish; the Scope follows it, and the meter’s face stays paper in both.

What it is for

A loading state that is honest about time. The load comes from the page itself (parsed, interactive, loaded, fonts ready), from your own setProgress(0 to 1) as your work finishes, or from a timed demonstration; nothing is held for show beyond a 300 ms floor so the panel never flashes, and a stalled load opens the page after a timeout and says so. Only the filaments carry colour, in the amber of the lit wire, its light in the glass and on the chassis, and the same amber on the scope’s P3 phosphor. The section is aria-busy until the panel has gone, the page under it is inert until then, and a status line says in words how many valves are lit.

Original composition; Lode and its page copy are invented. The Phosphor Scope arrives in deps and is never imported by the block; it is the bench’s display, in P3 amber, its gain following the mean filament heat. The tubes are SVG drawn in warm-up.mjs, their glow driven by one custom property each; the meter, the unit and the keys are CSS in the kit’s tokens; no image. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1).