Warm-up

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.

Copy the warm-up folder and the phosphor-scope folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="phosphor-scope/phosphor-scope.css">
<link rel="stylesheet" href="warm-up/warm-up.css">
<div id="warm-up"></div>

<script type="module">
  import PhosphorScope from './phosphor-scope/phosphor-scope.mjs';
  import { mount } from './warm-up/warm-up.mjs';

  const warmUp = mount(document.getElementById('warm-up'), {
    mode: 'auto',
    valves: 5,
    brand: 'Lode',
  }, { PhosphorScope });

  // warmUp.update({ … });   change any option in place
  // warmUp.destroy();        and take it away again
</script>

mount(element, options, { PhosphorScope })

Builds the block inside the element and returns its handle. Hand it the Phosphor Scope it is built with.

handle.scope

handle.progress

handle.phase

handle.levels

handle.setProgress(p)

handle.finish()

handle.replay({ demo = o.mode === 'demo' } = {})

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

Events it fires, which bubble from the element: wu-progress, wu-open.

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.

Made of: 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.

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).

• 11Phosphor ScopeA cathode-ray tube behind smoked glass.