Engraved Client Plates

Component

About

Engraved metal name plates for a "used in production by" strip. Brushed aluminium or anodised black, screwed or riveted, each client's mark cut into the metal with one quiet number under it. Set them on a slow belt with a Pause key if you like. MIT. More like it: tactileui.dev

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Engraved Client Plates to your project and fits it to your theme.

Code

How Engraved Client Plates is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { useState } from "react";
import { ClientPlates } from "@/components/ui/engraved-client-plates";

export default function ClientPlatesDemo() {
  const [motion, setMotion] = useState<"static" | "drift">("static");
  return (
    <div style={{ width: "100%", minHeight: "100vh", boxSizing: "border-box", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 20, padding: "32px 0" }}>
      <ClientPlates count={6} motion={motion} />
      <button
        type="button"
        onClick={() => setMotion((m) => (m === "static" ? "drift" : "static"))}
        style={{ minHeight: 44, padding: "10px 18px", borderRadius: 10, border: "1px solid currentColor", background: "transparent", color: "inherit", font: "600 15px system-ui, sans-serif", cursor: "pointer" }}
      >
        {motion === "static" ? "Set them on a belt" : "Back to a grid"}
      </button>
    </div>
  );
}