篆刻印章
方圓印章元件：朱文白文、蓋章壓印動畫與印泥暈染。
以 SVG 重現篆刻印章的金石質感：方印或圓印外框、2x2 直書字格依傳統讀序（右上、右下、左上、左下）排列，支援朱文（陽刻紅字）與白文（陰刻紅底鏤空）。蓋章時印面自上方壓下、彈簧過衝帶出輕震，印泥暈染與斑駁噪點隨後浮現；刻痕由決定性種子產生，同樣印文永遠刻出同一方印。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
160
<SealStamp />
安裝
npx shadcn@latest add https://webberui.com/r/seal-stamp.json或在 components.json 設定 registries 後，改用 @webberui/seal-stamp 安裝。
安裝依賴後，從 registry JSON（/r/seal-stamp.json 的 files[0].content）複製 seal-stamp.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { SealStamp } from "@/components/ui/seal-stamp";
// 非受控：點擊印章即蓋章，再點一次收起
<SealStamp text="王氏雲樵" shape="square" sealStyle="baiwen" />受控用法：由父層決定何時落章（例如點擊紙面）：
const [stamped, setStamped] = React.useState(false);
<div onClick={() => setStamped(true)}>
<SealStamp
text="雲樵"
shape="circle"
sealStyle="zhuwen"
stamped={stamped}
/>
</div>印文支援 2–4 個字，超過 4 字僅取前 4 字；二字印自動置中成單欄直書，三字印右欄二字、左欄一字。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 印文（2–4 字），依傳統讀序：右上、右下、左上、左下 |
shape | "square" | "circle" | "square" | 外框形狀：方印或圓印 |
sealStyle | "zhuwen" | "baiwen" | "zhuwen" | 刻法：朱文（紅字白底）或白文（紅底鏤空白字） |
stamped | boolean | — | 受控的蓋章狀態；未提供時元件內部自行管理 |
defaultStamped | boolean | false | 非受控模式的初始蓋章狀態 |
onStamp | () => void | — | 蓋章落下時回呼 |
size | number | 96 | 印面尺寸（px），寬高相同 |
color | string | "#c1272d" | 印泥顏色（預設朱砂紅） |
className | string | — | 透傳到外層容器 |
可及性
- 可互動時（非受控、或受控且提供
onStamp）渲染為原生button，以aria-pressed表達是否已蓋章，並附aria-label朗讀完整印文與狀態 - 純展示時（受控且未提供
onStamp）渲染為role="img"，輔助科技可直接讀到印文 - 使用者系統開啟「減少動態效果」時，改為單純淡入淡出，不做壓印彈跳與旋轉動畫
- 印面 SVG 對輔助科技隱藏（
aria-hidden），語意由外層標籤提供