篆刻印章

以 SVG 重現篆刻印章的金石質感：方印或圓印外框、2x2 直書字格依傳統讀序（右上、右下、左上、左下）排列，支援朱文（陽刻紅字）與白文（陰刻紅底鏤空）。蓋章時印面自上方壓下、彈簧過衝帶出輕震，印泥暈染與斑駁噪點隨後浮現；刻痕由決定性種子產生，同樣印文永遠刻出同一方印。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SealStamp/>

    </div>
  );
}

安裝

使用

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

可及性

• 可互動時（非受控、或受控且提供 onStamp）渲染為原生 button，以 aria-pressed 表達是否已蓋章，並附 aria-label 朗讀完整印文與狀態
• 純展示時（受控且未提供 onStamp）渲染為 role="img"，輔助科技可直接讀到印文
• 使用者系統開啟「減少動態效果」時，改為單純淡入淡出，不做壓印彈跳與旋轉動畫
• 印面 SVG 對輔助科技隱藏（aria-hidden），語意由外層標籤提供