Engraved Client Plates

The clients strip of a product that runs something in production: an agent platform, an infrastructure or devtools service, an energy or IoT company. Logos become engraved plates: permanent-looking, colourless on a colourless page, every name real text. Optional numbers turn it into proof (“312 agents in production”), and an optional slow belt turns it into a marquee that stops on a key. Free with an account: pure CSS and SVG, no dependency, both finishes.

Copy the client-plates 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="client-plates/client-plates.css">
<div id="client-plates"></div>

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

  const clientPlates = mount(document.getElementById('client-plates'), {
    label: 'Customers',
    title: 'Used in production by',
    note: '1,940 teams run agents on Lode, from co-ops to banks.',
  });

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

mount(element, options)

Builds the block inside the element and returns its handle.

handle.paused

handle.update(next = {})

Change options in place.

handle.destroy()

Stops it and cleans up after it.

1. At restSix plates in a row, each with four slotted screws or two rivets, the mark and name engraved; one number under each; nothing runs.
2. AluminiumBrushed aluminium plates with a bright chamfer top-left, the cut filled with dark enamel: a shaded band on the upper wall inside each stroke, a lit lip below it.
3. GraphiteAnodised black plates; the cut and the machined chamfer show bright metal.
4. Fitted namesA long name is scaled to the room between its mark and the far fixing, never below half size; a short one keeps its size.
5. DriftThe plates ride a slow belt in a recessed channel (a duplicated, inert track moved by transform), at a pace in px/s whatever the count, with a Pause key.
6. PausedThe belt stops on its Pause key (aria-pressed, “Resume”), while the pointer or focus is on it, and off screen.
7. Eight platesTwo rows of four on a wide container.
8. TabletThree columns (four for four or eight plates).
9. PhoneHead stacked; two columns of plates.
10. Reduced motionNo belt: the channel and the duplicate go, the plates stand in their grid, the Pause key is hidden.

Made of: Svg engrave filter, Masked chamfer ring, Brushed metal texture, Fixed sheen turned slots, Fitted engraving, Duplicated marquee track, Offscreen paused belt, Container query layout, Finish following.

Original composition. The eight clients, their marks and numbers are invented for this block (an energy co-op, a robotics lab, a freight API, an agent studio, water telemetry, a ledger API, solar farms, edge inference). Plates, fixings and marks are CSS and SVG drawn here; no photograph. Face: Instrument Sans (SIL OFL 1.1), the kit's own.