Cloth Beacon
A status light made of cloth: a capsule of stretched fabric in a machined plate with a lamp behind it. Standing by glows dim behind the icon, listening breathes, working is a pool of amber travelling the strip, attention flashes twice and holds, done is green and an error red. The words glow through the weave.
What it is for
A signal you read from across the room rather than a control you set: an agent run, a build, a deploy, a call, a recording or a smart-home device in a dashboard.
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
- Weave masked backlight, Plus lighter bloom and core, State as opacities, Compositor only motion, Lamp out lamp on switch, Visibility paused animation, Live region status, Container query scaling
- Stack
- Vanilla ES modules, Dom, CSS
- Needs
- Nothing, no dependencies
- States
- 17 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- Standing byA dim cold white behind the icon and the words; nothing runs.
- ListeningThe warm filament across the whole strip, breathing slowly with a rest at the top of each breath.
- WorkingA pool of amber light travels the length of the strip behind the cloth and back, easing at each end, over a faint wash. The words and a step (2 of 5) stay steady.
- AttentionAmber, two quick flashes and then a hold, again and again until it is answered. Said assertively to a screen reader.
- DoneA steady green; nothing runs.
- ErrorA steady red; nothing runs. Said assertively to a screen reader.
- OffBare cloth, the power mark pressed into it, no light at all.
- A change of stateThe old lamp goes out in a sixth of a second and the next one comes on: never two hues blended.
- PressedWith an action the cloth is a real button: it gives a pixel under the finger and its light comes up a touch; pressed while it asks for attention, it answers it.
- PausedThe round key at the end of the plate is down: every state shows its steady light; the words still change.
- Off screenA moving light holds still off screen and in a hidden tab, and picks up where it was.
- Strip or badgeA strip as wide as its place, with the engraved legend on the plate; or a badge as wide as its words.
- Twill, mesh or speaker clothA fine diagonal twill like denim, a pixel mesh like a phone's volume panel, or speaker cloth with its pinholes; the weave is seen over the light in all three.
- AuroraWhile it listens, the light can be a slow mesh of a few colours drifting behind the cloth, in borealis, ember, lagoon, prism or mono. A seed fixes it. Only listening: a state that means something keeps its lamp.
- AluminiumPale grey cloth on a bead-blasted plate; the light behind it is laid on softer, as pale cloth shows less of it.
- GraphiteDark cloth on a soft-touch plate, with a paler lamp core so the light still reads.
- Reduced motionNo breath, no sweep, no flash and no Pause key: each state is a steady light and its words, and a change of state is immediate.
Notes
The state is said three ways at once: the lamp's colour, the way it moves, and the words lit through the cloth, so it never rests on colour alone. Give it an action and the cloth is a button that opens the run; pressed while it asks for attention, it answers it and goes back to what it was doing. A strip for a panel or a header, or a badge for a toolbar or a list row. The only colour is the lamp: the kit's white, filament, amber, green and red for what they mean, one hex of your own for the two neutral states, or an aurora while it listens.
Original. Each light layer (a bloom, and a core masked by the weave) holds a wash across the strip and a pool that rests behind the icon or travels its length; a state is four opacities and one motion, all CSS animations of opacity and transform, so nothing is laid out or painted while it moves and nothing runs at rest. The masks sit on the fixed layers, so the weave never slides with the light. The script writes attributes and words only when the state changes, and an IntersectionObserver holds a moving light still off screen. The icons are drawn in the kit's hand inside the object, so it ships on its own.
Anatomy
Weave masked backlight, Plus lighter bloom and core, State as opacities, Compositor only motion, Lamp out lamp on switch, Visibility paused animation, Live region status, Container query scaling
Usage notes
A signal you read from across the room rather than a control you set: an agent run, a build, a deploy, a call, a recording or a smart-home device in a dashboard. The state is said three ways at once: the lamp's colour, the way it moves, and the words lit through the cloth, so it never rests on colour alone. Give it an action and the cloth is a button that opens the run; pressed while it asks for attention, it answers it and goes back to what it was doing. A strip for a panel or a header, or a badge for a toolbar or a list row. The only colour is the lamp: the kit's white, filament, amber, green and red for what they mean, one hex of your own for the two neutral states, or an aurora while it listens.
Options
| Option | Type | Description |
|---|---|---|
| state | enum | What the light says. Standing by is a dim white behind the icon; listening breathes; working is a pool of amber travelling the strip; attention flashes twice and holds; done is green, an error red; off is bare cloth. |
| message | text | What the state says, lit through the cloth and told to a screen reader. Empty uses the state’s own: Standing by, Listening, Working, Needs you, Done, Stopped. |
| aside | text | A short figure at the far end: a step, a count, a time. Empty leaves the end bare. |
| layout | enum | A strip as wide as its place, for a panel or a header; or a badge as wide as its words, for a toolbar or a list row. |
| weave | enum | A fine diagonal twill like denim, a mesh so fine it is a checker of single pixels, or speaker cloth with its pinholes. |
| finish | enum | Auto follows the page: the plate is drawn from the page’s finish (a printed plate on Paper, a black one on AMOLED, its legend lit on Phosphor and Night); the cloth is pale on a light finish and dark on a dark one. Without the kit’s tokens, aluminium on a light page and graphite on a dark one. |
| lamp | text | One hex for the two lamps that mean nothing of their own, standing by and listening, so a product can match its brand. Working, attention, done and an error keep amber, green and red. |
| aurora | enum | While it listens, the light behind the cloth is a slow mesh of colours drifting like a flexible OLED panel: borealis, ember, lagoon, prism or mono (shades of the lamp colour). It still breathes. Only listening: a state that means something keeps its lamp. |
| auroraSeed | number | The same seed is always the same aurora: where each colour sits, how large, how it drifts. |
| action | text | With words here the cloth is a button: it says the state and then this, fires press, and pressing it while it asks for attention answers it. Empty: a status light and nothing to press. |
| name | text | The word engraved on the plate beside the strip. Empty leaves the plate plain. A phone has no room for it. |
| halo | boolean | The lit cloth throws a soft glow onto the rim of its well, brighter the brighter the state. |
| pauseKey | boolean | Leave it on unless your page has a pause of its own; under reduced motion it is not there. |
| haptics | boolean | Two short pulses when it starts to ask for attention, where the device can vibrate and the page has been touched. Off by default. |
| label | text | What a screen reader calls the beacon. |
Methods
- state
- message
- aside
- paused
- set
- say
- pause
- update
- destroy
How it works
Original. Each light layer (a bloom, and a core masked by the weave) holds a wash across the strip and a pool that rests behind the icon or travels its length; a state is four opacities and one motion, all CSS animations of opacity and transform, so nothing is laid out or painted while it moves and nothing runs at rest. The masks sit on the fixed layers, so the weave never slides with the light. The script writes attributes and words only when the state changes, and an IntersectionObserver holds a moving light still off screen. The icons are drawn in the kit's hand inside the object, so it ships on its own.