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

Block · With a Pass · https://tactileui.dev/blocks/warm-up

> The code and styling for this block come with the Pass. Sign in if you have one. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

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

## Usage notes

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

## Options

| Option | Type | Description |
| - | - | - |
| mode | enum | Auto follows the page: parsed, interactive, loaded, fonts ready. Manual: you call setProgress(0 to 1). Demo: a timed run, for showing the block. |
| valves | number | How many tubes stand in the row. They come up one after another. |
| brand | text | Engraved as “… is warming up”. |
| headline | text | Headline of the page under it |
| lead | text | Lead of the page under it |
| duration | number | Only for demo mode and the Replay key: how long the timed run takes. |
| timeout | number | A load that stalls does not trap the visitor: after this long the page opens anyway and the status says why. |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. The Scope follows it too. |

## Methods

- scope
- progress
- phase
- levels
- setProgress
- finish
- replay
- update
- destroy

## States

1. **Cold**: The page under it is real DOM and inert; the section is aria-busy.
2. **Warming**: As 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. **Warm**: The load is at 1 and every filament is at full heat; the status says “Warm. Opening the page.”
4. **Lifting**: 
5. **Open**: The 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 load**: With every milestone already past it opens in about a second.
7. **Stalled**: Opening the page anyway.”
8. **Replay**: The Replay key puts the cover back and runs the timed demonstration again.
9. **Tablet**: The same unit, centred.
10. **Phone**: 
11. **Reduced motion**: No 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 screen**: Off screen or in a hidden tab the frame loop stops; it wakes when seen.
13. **Finishes**: Aluminium and graphite by data-finish; the Scope follows it, and the meter’s face stays paper in both.

## How it works

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.