Skip to the object
TACTILE UI

Nameplate Wall

A customers section made as the tenant directory in a lobby: cast aluminium or graphite plates, each as long as its name, with the name in engraved capitals and a small “Since 2021” line, fixed to a board behind a sheet of glass that one slow band of light crosses.

Everything you set here is what the Code and Prompt tabs give you.

Datasheet

Mechanism
Engraved text shadow, Flex basis by name length, Glass light sweep, One shot sweep no loop, Lamp key pressed state, Ordered by year, Reduced motion glint, Finish following
Stack
Vanilla ES modules, CSS, Container queries
Needs
Nothing — no dependencies
States
8 documented
Version
0.1.0
Licence
With a Pass

States

  1. At restTwelve plates on a recessed board in a machined frame, a suite number, an engraved name and a Since line on each, a faint glare on the glass. Nothing runs.
  2. Light crossingA mouse entering the frame, a touch or pen on the board, or the Lamp key: one soft slanted band crosses the glass over 2.4 s and stops itself. A second request while it crosses does nothing.
  3. Lamp onThe Lamp key is aria-pressed, sits down and lights amber; the glass takes a soft light from above until it is switched off. Switching it on runs one sweep.
  4. KeyboardThe Lamp key is the one Tab stop; Enter or Space toggles it.
  5. TabletThe rows re-flow at a slightly smaller plate basis.
  6. PhoneTwo plates to a row at 390px with the names on two lines; one to a row under 340px; no sideways scroll.
  7. Reduced motionThe band does not cross: it glints in place for the same length of time, and the lamp changes without a transition.
  8. FinishesAluminium and graphite by data-finish; the letters are dark in aluminium and bright in anodised graphite.

What it is for

The place on a page where a product says who already runs on it, without borrowing anyone's logo. Each customer is a plate with its suite number, its name set in engraved type and the year it joined; the row lengths follow the names, so the wall looks cut by a fitter rather than laid out by a grid. The glass is the hover state: a mouse entering it, a tap, or the Lamp key sends one band of light across, and the Lamp key gives keyboard and touch the same thing. Everything is text, in the order the teams joined.

Original composition; Lode is invented, and so is every customer on the wall (Hartwell Freight, Nordvik Grid and the rest are made-up names, and the years are made up too): they stand for the shape of a real customer list, not for any real company, and there are no logos. Built from the kit alone (00.12): DOM and CSS, no object. Faces: Geist Mono and Instrument Sans (SIL OFL 1.1).