郵票外框

把任何內容包成一張郵票。四邊的扇貝齒孔由一條 clip-path: polygon() 算出——每個齒孔用 7 個點近似半圓，位置用百分比、深度用 px，尺寸改變時不需重算；紙面帶 145° 白色高光與兩層投影。底部可放面額與名稱的說明列，右上角可疊一枚 SVG 郵戳（雙圓環、繞圓文字、中央日期與三條波浪註銷線），預設在 hover 或鍵盤聚焦時淡入。本體沒有動畫。

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">

<PostageStampFrame/>

    </div>
  );
}

安裝

npx webberui@latest add https://webberui.com/r/postage-stamp-frame.json

使用

import { PostageStampFrame } from "@/components/ui/postage-stamp-frame";

<div className="w-48">
  <PostageStampFrame
    horizontalPerforations={12}
    verticalPerforations={15}
    postmark={{ text: "台北 TAIPEI", date: "2026.10.25" }}
    caption={
      <>
        <span>NT$ 12</span>
        <span>雲嶺晨霧</span>
      </>
    }
  >
    <img src="/stamps/mountain.jpg" alt="晨霧中的山景" />
  </PostageStampFrame>
</div>

Props

PostageStampPostmark

細節

• 齒孔：每一段齒距的中點往內凹一個半圓，用 calc(百分比 ± px) 寫每個點，所以元件寬度改變時齒孔大小不變、也不需要 ResizeObserver。齒數多且齒深大時相鄰半圓會重疊，可降低 perforationDepth。
• 投影：兩層 drop-shadow 放在 clip-path 元素的父層，否則陰影會被一起裁掉。
• 紙色在暗色模式下保持不變（郵票本身是一張紙），內容文字預設繼承墨色。
• 主題變數：--wb-stamp-paper、--wb-stamp-ink、--wb-stamp-postmark-duration；對應的 prop 有傳值時以 prop 為準。
• 郵戳疊在外框之外、以 mix-blend-multiply 與 75% 不透明度印在紙上，旋轉 −12°，允許超出郵票邊緣。

可及性

• 外框是純裝飾容器，不設 role；內容的語意由你提供（圖片請給 alt，CSS 繪製的插畫可加 role="img" 與 aria-label）
• 郵戳 SVG 設定 aria-hidden，不會被螢幕閱讀器朗讀；若日期等資訊重要，請另外以文字呈現
• 郵戳除了 hover，也會在外框內任何元素取得鍵盤焦點時（focus-within）顯示
• 使用者系統開啟「減少動態效果」時，郵戳不做淡入，直接顯示或直接隱藏