Trophy Case

成就獎盃牆：玻璃櫃網格陳列成就，解鎖時獎盃升起、掃過高光並噴發輕量紙屑，hover 可 3D 端詳並查看取得條件與進度。

載入預覽⋯

Playground

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

欄數columns

玻璃櫃間距（px）gap

逐櫃揭示間隔（秒）stagger

0.12

<TrophyCase />

安裝

npx shadcn@latest add https://webberui.com/r/trophy-case.json

或在 components.json 設定 registries 後，改用 @webberui/trophy-case 安裝。

安裝依賴後，從 registry JSON（/r/trophy-case.json 的 files[0].content）複製 trophy-case.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge lucide-react

使用

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，不干擾輔助科技朗讀。

On this page