Focus Cards
hover 聚焦單卡、其餘卡片模糊淡出的卡片網格效果。
滑鼠移入任一張卡片時，該卡片微幅放大並保持清晰，其餘卡片同步模糊、縮小、淡出，把注意力集中到當下這一張。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
8
0.96
1.02
0.6
260
<FocusCards />
安裝
npx shadcn@latest add https://webberui.com/r/focus-cards.json或在 components.json 設定 registries 後，改用 @webberui/focus-cards 安裝。
安裝依賴後，從 registry JSON（/r/focus-cards.json 的 files[0].content）複製 focus-cards.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { FocusCards } from "@/components/ui/focus-cards";
const cards = [
{
title: "Aurora",
description: "冷色極光漸層背景",
background: "linear-gradient(135deg, #22d3ee 0%, #6366f1 100%)",
},
// ...
];
<FocusCards cards={cards} />;每張卡片以 CSS background 呈現底圖（漸層或色塊皆可），不依賴外部圖片。省略 background 時會依索引循環套用內建漸層。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
cards | FocusCard[] | — | 卡片清單，見下方型別 |
blur | number | 8 | 未聚焦卡片的模糊強度（px） |
scale | number | 0.96 | 未聚焦卡片的縮放比例 |
focusScale | number | 1.02 | 聚焦卡片的放大比例 |
dim | number | 0.6 | 未聚焦卡片的透明度 |
height | number | 260 | 卡片高度（px） |
className | string | — | 透傳到外層網格容器 |
FocusCard 型別
| 欄位 | 型別 | 說明 |
|---|---|---|
title | string | 卡片標題 |
description | string | 副標題，聚焦時淡入（選填） |
background | string | 任意 CSS background 值當底圖（選填） |
可及性
- 每張卡片可用鍵盤 focus，
focus時觸發與 hover 相同的聚焦效果 - 使用者系統開啟「減少動態效果」時，卡片維持靜態、不做模糊與縮放
- 卡片帶
role="group"與aria-label，底部暗化漸層純為裝飾（aria-hidden）