行銷展示區塊
Trophy Case
成就獎盃牆：玻璃櫃網格陳列成就，解鎖時獎盃升起、掃過高光並噴發輕量紙屑，hover 可 3D 端詳並查看取得條件與進度。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add trophy-casePlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
12
0.12
編輯中的呼叫預設屬性
<TrophyCase/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/trophy-case.json或在 components.json 設定 registries 後，改用 @webberui/trophy-case 安裝。
使用
import { TrophyCase, TrophyCabinet } from "@/components/ui/trophy-case";
<TrophyCase columns={3}>
<TrophyCabinet title="首戰告捷" requirement="完成第一場對戰" unlocked />
<TrophyCabinet
title="連勝十場"
requirement="連續獲勝 10 場"
progress={7}
target={10}
/>
<TrophyCabinet title="百戰老將" requirement="累積出賽 100 場" unlocked />
</TrophyCase>unlocked 已解鎖的櫃會播放「獎盃升起 → 掃過高光 → 噴發紙屑」的揭示序列；未解鎖的櫃呈暗色剪影，並可透過 progress / target 顯示達成進度。把 unlocked 由 false 切成 true（受控）即可重播該櫃的解鎖慶祝。
Props
TrophyCase
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 直接放入 TrophyCabinet 子元件 |
columns | number | 3 | 欄數（每列陳列幾座玻璃櫃） |
stagger | number | 0.12 | 各櫃進場／解鎖的間隔（秒），依序錯開 |
gap | number | 12 | 玻璃櫃間距（px） |
className | string | — | 附加到網格容器的 class |
TrophyCabinet
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | — | 成就名稱 |
requirement | string | — | 取得條件說明（hover／focus 時顯示） |
unlocked | boolean | false | 是否已解鎖：true 播放升起＋高光＋紙屑，false 為暗色剪影 |
progress | number | 0 | 目前進度值（未解鎖時搭配 target 顯示進度條） |
target | number | 0 | 完成所需的目標值 |
icon | React.ReactNode | <Trophy /> | 自訂獎盃圖示 |
className | string | — | 附加到玻璃櫃的 class |
細節
TrophyCabinet需放在TrophyCase內，索引由父層自動注入以計算逐櫃錯開的延遲；單獨使用時仍可運作，但不會有錯開效果。- 解鎖狀態的獎盃以暖色（amber）呈現並帶暖色光暈；未解鎖為降低透明度的中性剪影，右上角以鎖頭／打勾徽章標示狀態。
- 進度條在進入視口時由 0 動畫增長至對應百分比；已解鎖固定顯示為 100%。
可及性
- 使用者系統開啟「減少動態效果」時，直接以最終狀態渲染（獎盃就位、無升起／高光／紙屑），傾斜與資訊面板滑入亦停用動畫。
- 每座櫃為可聚焦的
role="group"，並帶完整aria-label（名稱、解鎖狀態、進度與取得條件），資訊面板於 hover 與鍵盤 focus 時皆會揭示。 - 高光、紙屑、光暈與底座等純裝飾元素均標記
aria-hidden，不干擾輔助科技朗讀。