Stamp

The mark an office, a shop or a printer leaves when something is done: held, received, paid.

A small block of carved words that lands when something real has happened. The words are ordinary text, so a screen reader reads them once, when the stamp lands; the block print is decoration laid over them.

<link rel="stylesheet" href="susegad/components/stamp/stamp.css">
<script type="module" src="susegad/components/stamp/stamp.js"></script>

<sg-stamp tone="success" pending>
  <p role="status"><strong>Held</strong> <span>12 to 15 Oct, for 20 minutes</span></p>
</sg-stamp>

<script>
  // when the hold really succeeds
  document.querySelector('sg-stamp').stamp();
</script>

The prompt

Make a web component for a rubber stamp that marks a real event, such as dates being held or a payment received. Keep the words as real text inside a role="status" paragraph: a big word in a <strong> and a detail line under it, so a screen reader reads them and the browser shapes Devanagari and Kannada properly. Without JavaScript, show a plain ruled rectangle around the words. Give it three registers. Quiet: that ruled rectangle, square, in the tone's ink, with only a short fade when it lands. Warm: a carved block print. Draw a thick outer rule and a thin inner rule, tilt the whole stamp by a few degrees chosen from a seed, add a faint off-register ghost two pixels down and right, and starve the ink: compute a seeded alpha mask of fine speckle and soft noise patches and lay it over the frame and the big word as a CSS mask, leaving the small detail line crisp. Land it with a short press. Playful: tilt it further, ink it a little heavier, cut a small diamond into each side of the frame, and when it lands let it come down, press past flat and settle while a halo of ink spreads into the paper and fades. Set Latin words in capitals with wide letter spacing, but never space out Devanagari or Kannada; detect the script and keep those at their natural spacing and weight. Only land the stamp when the work is done: a pending attribute hides it, and removing it lands it and announces the words once. With reduced motion, show the landed stamp without movement.

Words to code

Accessibility

• The words are text in a role="status" region. They are announced once: when pending is removed, or when a stamp is added after the page has loaded (a server swap). A stamp in the page from the start is read as part of the page.
• Every tone is a token text colour at 4.5:1 or more on every surface. The ink texture never touches the detail line, and it covers the big word only in Latin, where the word is 1.6rem and bold.
• The tilt is at most 7 degrees. The frame, the ghost, the diamonds and the halo are aria-hidden.
• Reduced motion shows the landed stamp with no movement. Quiet's only motion is a 120 ms fade.

Credit

Harvested from the "held" stamp on a villa's booking card (carveBlock and drawStamp), which borrowed from the rubber stamps of Indian offices and shops and from the hand block printing of Sanganer and Bagru. Tier: pan-Indian.