# Engraved Client Plates

“Used in production by…”, as metal name plates. Brushed aluminium or anodised black, screwed or riveted, each client’s mark cut into the metal with one quiet number under it.

Block · Free · https://tactileui.dev/blocks/client-plates

- Version: 0.1.0
- Size: 66.8 KB gzipped
- Access: Free for anyone, MIT, open source
- Needs: client-plates.mjs + client-plates.css
- Tests: 10 tests, 10 states
- Lab: https://tactileui.dev/blocks/client-plates

## Use it

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](https://tactileui.dev/docs/frameworks)).

```html
<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>
```

## Options

| Option | Type | Default | What it does |
| - | - | - | - |
| `label` | text | 'Customers' | Label |
| `title` | text | 'Used in production by' | Headline |
| `note` | text | '1,940 teams run agents on Lode, from co-ops to banks.' | Printed at the right of the headline. |
| `count` | number, 4 to 8 | 6 | Plates |
| `stats` | boolean | true | A number under each plate |
| `fixing` | mixed · screws · rivets | 'mixed' | Mixed: each plate as its maker fitted it. Or four screws, or two rivets, on all. |
| `motion` | static · drift | 'static' | Drift: the plates ride a slow belt in a recessed channel, with a Pause key. Never under reduced motion. |
| `speed` | number, 10 to 80 | 40 | Only while drifting. |
| `finish` | auto · aluminium · graphite | 'auto' | Auto follows the page’s data-finish, then the visitor’s system. |

## Methods

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

## States

1. **At rest**: Six plates in a row, each with four slotted screws or two rivets, the mark and name engraved; one number under each; nothing runs.
2. **Aluminium**: Brushed 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. **Graphite**: Anodised black plates; the cut and the machined chamfer show bright metal.
4. **Fitted names**: A 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. **Drift**: The 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. **Paused**: The belt stops on its Pause key (aria-pressed, “Resume”), while the pointer or focus is on it, and off screen.
7. **Eight plates**: Two rows of four on a wide container.
8. **Tablet**: Three columns (four for four or eight plates).
9. **Phone**: Head stacked; two columns of plates.
10. **Reduced motion**: No belt: the channel and the duplicate go, the plates stand in their grid, the Pause key is hidden.

## How it works

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.