Roll Call
A team section on a machined roll board beside a light box: a row per person with a staff number, name, role, the year they started and a lamp. Call a row up and the person is set in the light box’s halftone screen, a dot at a time in a wipe across the glass, with their nameplate under it.
What it is for
The people behind a product, on its about or team page.
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
- Roll board tablist, Halftone light box, Dot wipe between portraits, Photo to halftone, Drawn profile silhouettes, Drawer on phone, Open role row, Depth tokens for volumes, Finish following
- Stack
- Vanilla ES modules, CSS, Canvas 2D, Container queries
- Needs
- Nothing, no dependencies
- States
- 8 documented
- Version
- 0.1.0
- Licence
- With a Pass
States
- At restThe head; the board with its engraved plate, column heads and nine rows (eight people and the open role); the first person called up, their row standing proud with its green lamp lit, the light box beside with their silhouette set in dots. Nothing runs.
- Called upA click, a resting mouse, a tap or an arrow key in the board calls a row up: the screen wipes from the old portrait to the new, each dot growing or shrinking, in 560 ms, then stops. rlc-person fires with { index, id }.
- PortraitsA photo is fitted to the glass, greyed, stretched to use the whole screen and set as a halftone; without one, a profile silhouette facing the board, cut in black and laid on the lit glass.
- Open roleA last row, “We are hiring”, its amber lamp always lit; called up, the glass is dark with a dotted outline and the plate says the role with the section’s one contrast key, “See the role”.
- NarrowerUnder 980px the rows take two lines, the role under the name; the light box narrows beside the board.
- PhoneUnder 720px the light box opens under the row called up, the portrait beside the nameplate, 44px link keys; under 380px the year is left out of the rows.
- Reduced motionThe screen changes at once; nothing transitions.
- Finishes and volumesOn a page with the kit’s finish tokens the board is drawn from them, in any of the twelve; otherwise aluminium or graphite by data-finish, tone or system. Every shadow reads a kit depth token, so the Quiet volume draws hairlines; the light box stays dark glass.
Notes
The board is a tablist of rows; pointing at one, focusing it or tapping it calls that person up: their lamp lights and the light box re-sets its screen to their portrait, as a halftone in warm light, with their name, role, one line and their links under the glass. A person’s photo (same origin or served with CORS) is set as a halftone; without one, a profile silhouette is drawn from a few numbers (brow, nose, lips, chin, hair, glasses, beard), so the sample team are silhouettes, never invented faces. An optional last row says a role is open, its amber lamp lit; called up, the glass shows an empty dotted outline and the plate the one contrast key. On a phone the light box opens under its row like a drawer.
Original composition. Tallyroll, its team, their lines and links are sample copy, invented, and the preview says so. The portraits are profile silhouettes drawn on a canvas from a few numbers, never photographs or invented faces; a real team brings its own photos. The board, light box and keys are CSS drawn here, in the kit’s tokens. Faces: Instrument Sans (the kit’s own) and Geist Mono, both SIL OFL 1.1.
Anatomy
Roll board tablist, Halftone light box, Dot wipe between portraits, Photo to halftone, Drawn profile silhouettes, Drawer on phone, Open role row, Depth tokens for volumes, Finish following
Usage notes
The people behind a product, on its about or team page. The board is a tablist of rows; pointing at one, focusing it or tapping it calls that person up: their lamp lights and the light box re-sets its screen to their portrait, as a halftone in warm light, with their name, role, one line and their links under the glass. A person’s photo (same origin or served with CORS) is set as a halftone; without one, a profile silhouette is drawn from a few numbers (brow, nose, lips, chin, hair, glasses, beard), so the sample team are silhouettes, never invented faces. An optional last row says a role is open, its amber lamp lit; called up, the glass shows an empty dotted outline and the plate the one contrast key. On a phone the light box opens under its row like a drawer.
Options
| Option | Type | Description |
|---|---|---|
| label | text | Printed small above the heading. Empty leaves it out. |
| title | text | Heading |
| org | text | Engraved on the board’s plate. Empty leaves it out. |
| lead | text | Sentence |
| count | number | 2 to 12 rows on the board. |
| first | enum | The person in the light box when the section opens (one of the people shown). |
| hiring | boolean | A last row for a role you are hiring for, its amber lamp lit; called up, an empty outline and the one contrast key. |
| hiringRole | text | Open role |
| hiringHref | text | Open role link |
| finish | enum | Auto takes the page’s own finish tokens if it has them, then its data-finish, then the visitor’s system. The light box is dark glass in every finish. |
| volume | enum | Auto follows the nearest data-volume on the page. Quiet draws hairlines where Tactile draws depth. |
Methods
- update
- destroy
How it works
Original composition. Tallyroll, its team, their lines and links are sample copy, invented, and the preview says so. The portraits are profile silhouettes drawn on a canvas from a few numbers, never photographs or invented faces; a real team brings its own photos. The board, light box and keys are CSS drawn here, in the kit’s tokens.