Overprint Register
標題以多層色版疊印呈現，進入視口時各色版從錯位滑入精準套準，hover 再度輕微失準。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
8
1.2
0.15
<OverprintRegister />
安裝
npx shadcn@latest add https://webberui.com/r/overprint-register.json或在 components.json 設定 registries 後，改用 @webberui/overprint-register 安裝。
安裝依賴後，從 registry JSON（/r/overprint-register.json 的 files[0].content）複製 overprint-register.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { OverprintRegister } from "@/components/ui/overprint-register";
<OverprintRegister text="OVERPRINT" className="text-5xl font-black" />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
text | string | — | 要疊印的標題文字 |
colors | string[] | CMY／RGB 預設色版 | 自訂各色版顏色（任何 CSS 色值），陣列長度即色版層數 |
offset | number | 8 | 進場初始錯位幅度（px） |
duration | number | 1.2 | 單一色版對位動畫時長（秒） |
stagger | number | 0.15 | 各色版依序對位的間隔（秒） |
misalignOnHover | boolean | true | hover 時各色版小幅隨機失準，移開後回正 |
once | boolean | true | 只在第一次進入視口時播放 |
細節
- 印刷套印隱喻：傳統多色印刷把一張圖拆成多塊色版依序印上，色版沒對齊就會出現彩色「鬼影」（misregistration）。這個元件把同一段文字渲染成 3–4 層絕對定位的彩色副本，初始各自往不同方向偏移，進入視口時依序滑回
(0, 0)——重現印刷機「套準」的瞬間；hover 時再輕微失準，像印刷機被碰了一下。 - 深淺色混色策略：淺色主題用
mix-blend-multiply——如同油墨在白紙上減色混合，CMY 三版重疊處趨近黑色；深色主題切換為mix-blend-screen——如同光線加色混合，RGB 三版重疊處趨近白色。兩種模式都由dark:class 切換，預設色版也跟著換成對應色系（淺：青／洋紅／黃，深：紅／綠／藍螢光色）。 - 自訂色版：傳入
colors時兩個主題共用同一組顏色，但 multiply／screen 的切換仍然生效；建議挑選在兩種混色模式下都足夠飽和的顏色，或搭配固定主題使用。 - 尺寸與排版：底層放一份
opacity-0的佔位文字留在文件流內撐出尺寸，各色版以absolute inset-0疊在其上，因此換行、對齊與一般文字完全一致。容器帶isolate建立獨立堆疊上下文，混色只發生在色版之間，不會吃到頁面背景後方的其他內容。 - hover 失準：對位完成後才啟用 hover；每次 hover 觸發時以動態 variant 重新取 2–3px 的隨機方向位移，所以每次失準的樣子都不同，移開後快速回正（不重播進場的 stagger 延遲）。
可及性
- 使用者系統開啟「減少動態效果」時，直接顯示套準後的靜態疊印，不做進場與 hover 動畫
- 真正的文字放在
sr-only，所有彩色色版與佔位層都是aria-hidden的裝飾性複本，螢幕閱讀器只會朗讀一次；視覺層帶select-none，複製文字時不會重複