Seal Stamp
A square or round seal component — relief and intaglio carving, a stamping press animation, and ink bleed.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
SVG recreates the carved-stone quality of a seal: a square or round outer frame with a 2x2 grid of vertically written characters arranged in the traditional reading order (top right, bottom right, top left, bottom left), supporting 朱文 (zhuwen, relief — red characters) and 白文 (baiwen, intaglio — a red field with the characters cut out). When stamping, the seal face presses down from above with a spring overshoot that adds a small shudder, and the ink bleed and mottled noise surface afterwards. The carving marks are generated from a deterministic seed, so the same inscription always carves the same seal.
npx shadcn@latest add "https://webberui.com/r/seal-stamp.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<SealStamp />
Installation
npx shadcn@latest add "https://webberui.com/r/seal-stamp.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/seal-stamp.
Usage
import { SealStamp } from "@/components/ui/seal-stamp";
// Uncontrolled: click the seal to stamp, click again to lift it
<SealStamp text="王氏雲樵" shape="square" sealStyle="baiwen" />Controlled usage, where the parent decides when the seal comes down (on a click of the paper, for example):
const [stamped, setStamped] = React.useState(false);
<div onClick={() => setStamped(true)}>
<SealStamp
text="雲樵"
shape="circle"
sealStyle="zhuwen"
stamped={stamped}
/>
</div>The inscription supports 2–4 characters; anything beyond 4 keeps only the first 4. A two-character seal is centered automatically into a single vertical column, and a three-character seal puts two characters in the right column and one in the left.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The inscription (2–4 characters), in the traditional reading order: top right, bottom right, top left, bottom left |
shape | "square" | "circle" | "square" | Outer frame shape: square or round seal |
sealStyle | "zhuwen" | "baiwen" | "zhuwen" | Carving method: 朱文 (relief — red characters on white) or 白文 (intaglio — white characters cut out of a red field) |
stamped | boolean | — | Controlled stamped state; when omitted, the component manages it internally |
defaultStamped | boolean | false | Initial stamped state in uncontrolled mode |
onStamp | () => void | — | Callback when the seal comes down |
size | number | 96 | Seal face size (px), the same width and height |
color | string | "#c1272d" | Ink color (cinnabar red by default) |
className | string | — | Forwarded to the outer container |
Accessibility
- When it is interactive (uncontrolled, or controlled with
onStampprovided) it renders as a nativebutton, usingaria-pressedto convey whether it has been stamped, with anaria-labelreading out the full inscription and state - For display only (controlled with no
onStamp) it renders asrole="img", so assistive technology can read the inscription directly - When the user has "reduce motion" enabled at the system level, it becomes a plain fade in / fade out with no press bounce or rotation animation
- The seal face SVG is hidden from assistive technology (
aria-hidden); the semantics come from the outer element's labels