Stamp

A stamp prints when the visitor or the site did something. The impression is inked art: capitals on Anybody's condensed width, masked by the ink tile and roughened by a filter, blended into the stock and resting at the volume's angle. Seal is the same stamp at half size in a slot the host reserves, never under words. useStampLand() lands it with a thump, specks, the stamp sound and a pulse of the ink field.

Example#

To land a stamp on a card when something happens, call the hook from a client component:

import { useStampLand } from "@maxgrits/overprint-react/print";

const { land } = useStampLand();
land(stampElement, { host: cardElement, seal: true });

Usage#

Use a stamp for something that just happened because someone did it: a form sent, a project shipped, a quote approved (D-E4: caused only). It lands with a thump, a few specks and, with sound on, a THUNK.

• Server and client. Stamp renders the impression; useStampLand() lands it on a host when the event happens; Seal prints a small one in a slot the host reserves.
• Words. word is one of the stamp words (Sent, Shipped, Launched, Approved, Booked, Printed, Done, Live) and line adds a short line such as a date.
• The state also lives in text nearby, in the reading layer: the stamp decorates it.
• Big. big is for the moment itself, such as the sent screen.

Layer and volume#

Art impression: it may tilt (Quiet 0°, Studio −3°, Press −6°, Rave −9°, clamped to the tilt cap). Quiet: no fall, no specks. Studio: one landing per user action. Press and Rave add specks. Under more contrast it prints solid (no mask, no rough filter).

Anatomy#

Volume#

• Quiet

  Shipped23 Oct 2026

  Square, no fall, no specks.

• Studio

  Shipped23 Oct 2026

  Rests at −3°, five specks.

• Press

  Shipped23 Oct 2026

  Rests at −6°, seven specks.

• Rave

  Shipped23 Oct 2026

  Rests at −9°, nine specks.

Content#

• Use the stamp words; they are literal status words (D-I2), not jokes.
• The line is a fact: a date, an invoice number.

Do and don't#

Accessibility#

• role="img" with aria-label="{word} {line}"; the face inside is aria-hidden.
• The state also exists as reading text nearby; status words stay literal.
• Reduced motion: it lands at rest at once, with no specks and no pulse.

Props#

Tokens#

Changelog#