直書春聯
上下聯直書+橫批的春聯版面：紅底金字、逐字落筆進場。
以 writing-mode: vertical-rl 排出右上聯、左下聯的傳統春聯版面，搭配頂部橫批與可選的菱形福字。紅絨布質感底、金色漸層浮雕字，進場時逐字如毛筆落定（放大模糊到縮小定格），hover 單聯微微飄動如紙。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.1
0.5
<VerticalCouplet />
安裝
npx shadcn@latest add https://webberui.com/r/vertical-couplet.json或在 components.json 設定 registries 後，改用 @webberui/vertical-couplet 安裝。
安裝依賴後，從 registry JSON（/r/vertical-couplet.json 的 files[0].content）複製 vertical-couplet.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { VerticalCouplet } from "@/components/ui/vertical-couplet";
<VerticalCouplet
upper="天增歲月人增壽"
lower="春滿乾坤福滿門"
horizontal="四季平安"
showFu
/>上聯依傳統貼於面向門口的右側、下聯貼於左側，組件已依此排版，DOM 順序仍維持「橫批 → 上聯 → 下聯」的閱讀順序。橫批依現代習慣由左至右顯示，若想要傳統右起的讀法，傳入反轉後的字串即可。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
upper | string | — | 上聯，直書由上而下，視覺上位於右側 |
lower | string | — | 下聯，視覺上位於左側 |
horizontal | string | — | 橫批；不傳則不顯示頂部橫幅 |
showFu | boolean | false | 是否在兩聯之間斜貼菱形「福」字 |
stagger | number | 0.1 | 逐字落筆的間隔（秒） |
duration | number | 0.5 | 單一字從懸空到落定的動畫時長（秒） |
className | string | — | 透傳到外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，跳過逐字落筆與 hover 飄動，直接靜態顯示完整春聯
- 每一聯的完整文字以
sr-only提供給輔助科技朗讀，拆分後的逐字 span 皆為aria-hidden - DOM 順序即正確閱讀順序（橫批 → 上聯 → 下聯），螢幕閱讀器不受右至左的視覺排版影響
- 文字為真實 DOM 文字而非圖片，可被選取、搜尋與翻譯