Direction-aware Card
依游標進入的方向滑入覆蓋層的 hover 卡片，支援 cover 與 push 兩款動態。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.4
<DirectionAwareCard />
安裝
npx shadcn@latest add https://webberui.com/r/direction-aware-card.json或在 components.json 設定 registries 後，改用 @webberui/direction-aware-card 安裝。
安裝依賴後，從 registry JSON（/r/direction-aware-card.json 的 files[0].content）複製 direction-aware-card.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { DirectionAwareCard } from "@/components/ui/direction-aware-card";
<DirectionAwareCard
className="h-56 w-44"
overlay={
<>
<p className="text-sm font-semibold">立即探索</p>
<p className="text-xs opacity-80">覆蓋層從游標進入側滑入</p>
</>
}
>
<div className="flex h-full items-end p-4">
<p className="text-sm font-medium">卡片標題</p>
</div>
</DirectionAwareCard>覆蓋層會偵測游標從上／下／左／右哪一側進入卡片，並沿該側滑入；離開時則往離開的那一側滑回。
Props
DirectionAwareCard 繼承原生 <div> 的所有屬性，並額外提供：
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
overlay | React.ReactNode | — | hover / focus 時揭示的覆蓋層內容 |
children | React.ReactNode | — | 常態顯示的底層內容 |
variant | "cover" | "push" | "cover" | cover 覆蓋層蓋住底層；push 覆蓋層滑入時把底層往同方向推出 |
duration | number | 0.4 | 覆蓋層滑入／滑出時長（秒） |
overlayClassName | string | — | 追加到覆蓋層，可覆蓋預設的背景與置中排版 |
className | string | — | 追加到最外層卡片容器 |
細節
- 進入方向以游標相對卡片中心的角度判斷，並用卡片較短邊正規化較長邊，長寬比懸殊時判斷仍貼近視覺直覺。
- 進入時記錄「進入側」、離開時改記錄「離開側」，因此覆蓋層總是沿著游標實際經過的那一側進出。
- 最外層以
overflow-hidden裁切滑動中的覆蓋層與底層；push款式利用 transform 位移，不影響版面高度。
可及性
- 使用鍵盤
Tab聚焦（focus-visible）時同樣揭示覆蓋層，覆蓋層內的連結與按鈕因此可被鍵盤操作。 - 覆蓋層隱藏時加上
inert，將其移出 tab 序並對輔助科技隱藏，避免出現「看不見卻可聚焦」的元素。 - 開啟系統「減少動態效果」時，方向性滑動退化為單純的淡入淡出，不產生位移感。