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.
What it is for
The clients strip of a product that runs something in production: an agent platform, an infrastructure or devtools service, an energy or IoT company.
npx shadcn add https://tactileui.dev/r/client-plates.json 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
- 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
- Stack
- Vanilla ES modules, CSS, SVG, Svg filters
- Needs
- Nothing, no dependencies
- States
- 10 documented
- Version
- 0.1.0
- Licence
- Free, source open to everyone
States
- 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.
- 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.
- GraphiteAnodised black plates; the cut and the machined chamfer show bright metal.
- 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.
- 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.
- PausedThe belt stops on its Pause key (aria-pressed, “Resume”), while the pointer or focus is on it, and off screen.
- Eight platesTwo rows of four on a wide container.
- TabletThree columns (four for four or eight plates).
- PhoneHead stacked; two columns of plates.
- Reduced motionNo belt: the channel and the duplicate go, the plates stand in their grid, the Pause key is hidden.
Notes
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.
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.
Using it
Copy the client-plates folder from its package next to your page, link the stylesheets and mount it on an element. The Code tab above writes the example at any settings, and for React, Vue, Svelte or a custom element (Using a framework).
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.pausedhandle.update(next = {})- Change options in place.
handle.destroy()- Stops it and cleans up after it.