Colophon
A footer made as the rating plate and the index of a product. An engraved plate with the model, the serial and the specification, a contents-page index with leader dots, a five-detent rotary switch for language and region, a service lamp and a top key.
What it is for
The footer of a product that wants to read as an object with a manual: developer tools, infrastructure, hardware-adjacent software.
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
- Engraved rating plate, Generated serial bars, Manual index with leaders, Native radio rotary switch, Detent snap by pointer angle, Region swaps legal entity, Status lamp with words, Back to top key, Container query layout, Finish following
- Stack
- Vanilla ES modules, CSS, SVG
- Needs
- Nothing, no dependencies
- States
- 10 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe engraved plate with its four screws and serial bars; the index in two columns of four numbered sections; the switch at the configured region; a green service lamp; nothing runs.
- Switch turnedAn arrow key, Home or End, a legend or a drag turns the knob to the next detent in 260 ms with a small overshoot; the readout names the region, the legal line swaps its entity, and clo-region fires with { region, lang, name }.
- Switch draggedA pointer or finger on the dial snaps the knob to the nearest detent as it moves; the gap at the bottom belongs to its nearer end.
- Service degradedThe lamp turns amber and the words read “Service degraded”; the line is role=status, so the change is announced. Outage is red.
- Service offThe lamp and its words are left out.
- Link hoverThe title underlines and the leader dots darken.
- Key pressedBack to top drops its 2px skirt, scrolls to the top (smoothly unless reduced motion is asked for) and fires clo-top.
- TabletThe plate above, its two halves side by side; the index below in two columns; the key on its own row.
- PhoneOne column; index rows are 36px targets; the switch and its readout, the lamp and the legal line stack; the key fills the width.
- Reduced motionThe knob and the key move without transitions; everything else is unchanged.
Notes
Where the Machined Footer is the bottom panel of a device, this is the plate riveted to its back and the contents page of its manual. It carries what a footer carries (every link, the legal line, a way back to the top) and what these products want there: the model, serial and rated specification cut into metal, the region chosen on a rotary switch that swaps the legal entity and fires clo-region for your routing, and a service lamp with its words. CSS and a little DOM, no dependency, both finishes.
Original composition. The product (Marlow Queue, MQ-40), its specification, serial, links and page numbers are invented. The plate, bars, dial and knob are CSS and SVG drawn here, in the kit's tokens; no image. Faces: Instrument Sans and Geist Mono (SIL OFL 1.1), the kit's own.
Anatomy
Engraved rating plate, Generated serial bars, Manual index with leaders, Native radio rotary switch, Detent snap by pointer angle, Region swaps legal entity, Status lamp with words, Back to top key, Container query layout, Finish following
Usage notes
The footer of a product that wants to read as an object with a manual: developer tools, infrastructure, hardware-adjacent software. Where the Machined Footer is the bottom panel of a device, this is the plate riveted to its back and the contents page of its manual. It carries what a footer carries (every link, the legal line, a way back to the top) and what these products want there: the model, serial and rated specification cut into metal, the region chosen on a rotary switch that swaps the legal entity and fires clo-region for your routing, and a service lamp with its words. CSS and a little DOM, no dependency, both finishes.
Options
| Option | Type | Description |
|---|---|---|
| brand | text | Engraved large on the plate, with the product beside it. |
| product | text | Product |
| tagline | text | Tagline |
| model | text | Model |
| designed | text | Designed in |
| serial | text | The bars under the specification are drawn from it. |
| year | number | For the legal line. |
| region | enum | Where the rotary switch starts. Choosing fires clo-region, and swaps the legal line. |
| service | enum | Off leaves the lamp out. Call setService() from your status feed. |
| backToTop | boolean | Back-to-top key |
| finish | enum | Auto follows the page’s data-finish, then the visitor’s system. |
Methods
- setService
- setRegion
- update
- destroy
How it works
Original composition. The plate, bars, dial and knob are CSS and SVG drawn here, in the kit's tokens; no image.