Foundry's pause is a spinning d20 and a caption. This replaces both from CSS
alone, without touching the markup: figure#pause becomes a small navy panel with
a yellow rule along the top, and the <img> becomes the arm of a uniselector.
A uniselector is the stepping switch inside a telephone exchange — an arm that
clicks round one contact at a time, hunting for a free line. It is the right
object for this game. The department's whole business is a machine that says
where things belong, and OPEN DAY is set inside one. Eleven contacts, because
eleven minutes is the interval this setting keeps returning to.
It STEPS rather than sweeps: steps(11) over 7.7s, so a contact every 700ms. A
continuous spin reads as a loading throbber; a discrete click reads as a machine
working through a list, which is what the department is doing while the table is
out of the room. The arm carries a faint trailing sector, because without it a
700ms step is easy to miss and the stepping is the whole idea.
No new text. Foundry's caption is localised and this only restyles it — a string
hardcoded in a stylesheet would be one the lang file could never reach.
Two things the browser had to be asked rather than assumed:
- Core pins #pause with BOTH top and bottom, so an auto height stretched it to
180px for a 16px caption. It is pinned here instead and sized to content.
- The arm is rotated, so getBoundingClientRect returns the diagonal of its own
square (75px for a 52px element). The layout takes its size from the flex
basis and never from the measured box.
prefers-reduced-motion stops the movement and keeps the object — a stepping dial
in the corner of the eye is exactly what that preference is asking about.
Version 1.0.4.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
