Nameplate Wall

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.

Copy the nameplate-wall folder from its package next to your page, link the stylesheets and mount it on an element. Every option has a default; the lab’s Code tab writes the same example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).

<link rel="stylesheet" href="nameplate-wall/nameplate-wall.css">
<div id="nameplate-wall"></div>

<script type="module">
  import { mount } from './nameplate-wall/nameplate-wall.mjs';

  const nameplateWall = mount(document.getElementById('nameplate-wall'), {
    label: 'Customers',
    title: 'Who runs on Lode.',
    lead: 'Teams that run agents on Lode, one plate each, in the order they joined.',
  });

  // nameplateWall.update({ … });   change any option in place
  // nameplateWall.destroy();        and take it away again
</script>

mount(element, options)

Builds the block inside the element and returns its handle.

handle.lit

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

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.

Made of: 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.

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).