全息卡片
隨游標角度變化的彩虹全息光澤卡片，附 3D 傾斜。
游標在卡片上移動時，卡片會以 spring 跟隨傾斜（rotateX / rotateY），彩虹全息色帶、亮片顆粒與鏡面亮點隨角度流動，離開時平滑回彈歸位，適合收藏卡牌、會員卡或精選內容展示。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
12
16
<HolographicCard />
安裝
npx shadcn@latest add https://webberui.com/r/holographic-card.json或在 components.json 設定 registries 後，改用 @webberui/holographic-card 安裝。
安裝依賴後，從 registry JSON（/r/holographic-card.json 的 files[0].content）複製 holographic-card.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { HolographicCard } from "@/components/ui/holographic-card";
<HolographicCard className="w-[300px]" intensity={1.2}>
<div className="bg-slate-900 p-4 text-slate-50">
<h3 className="text-lg font-bold">星軌巡守・輝夜龍</h3>
<p className="text-sm text-slate-400">傳說稀有度收藏卡</p>
</div>
</HolographicCard>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 卡片內容，置於 3D 傾斜容器內、光澤層之下 |
intensity | number | 1 | 效果整體強度倍率（0 = 關閉、1 = 標準、2 = 誇張），同時影響傾斜幅度與光澤濃度 |
maxTilt | number | 12 | 游標位於卡片邊緣時的最大傾斜角度（度） |
sparkles | boolean | true | 是否顯示細碎亮片顆粒層，模擬鐳射閃粉質感 |
radius | number | 16 | 卡片圓角（px），所有光澤層自動同步 |
className | string | — | 額外樣式，合併到最外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，停用傾斜與光澤跟隨，僅保留靜態低調光澤
- 所有效果層皆為
aria-hidden且pointer-events-none，不干擾內容的互動與螢幕閱讀器朗讀 - 傾斜僅由游標位置驅動，鍵盤瀏覽與聚焦卡片內互動元素不受影響
- 內容層位於光澤層之上（z-index 分層），確保文字對比與可讀性