視差深度卡片
滾動時多層卡片以不同速度位移，形成景深視差。
內建滾動容器，滾動時多層卡片以不同係數位移、縮放與模糊——遠層緩慢且帶景深模糊、近層快速而清晰，形成鏡頭推拉般的視差效果，適合作品展示或功能亮點區塊。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
320
<ParallaxDepthCards />
安裝
npx shadcn@latest add https://webberui.com/r/parallax-depth-cards.json或在 components.json 設定 registries 後，改用 @webberui/parallax-depth-cards 安裝。
安裝依賴後，從 registry JSON（/r/parallax-depth-cards.json 的 files[0].content）複製 parallax-depth-cards.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { ParallaxDepthCards } from "@/components/ui/parallax-depth-cards";
<ParallaxDepthCards
height={400}
intensity={1}
layers={[
{ icon: "🏔️", title: "遠景", description: "移動最慢、帶景深模糊" },
{ icon: "🌲", title: "中景", description: "以中等速度跟隨滾動" },
{ icon: "✨", title: "近景", description: "移動最快、始終清晰" },
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
layers | DepthCardLayer[] | — | 卡片層資料，索引越大越靠近觀者、視差位移越快 |
intensity | number | 1 | 視差強度（建議 0.4–2），同時影響位移距離與模糊差異 |
height | number | 420 | 內建滾動容器的高度（px） |
className | string | — | 透傳到最外層滾動容器 |
DepthCardLayer
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
title | string | — | 卡片標題 |
description | string | — | 卡片說明文字，顯示於標題下方 |
icon | React.ReactNode | — | 卡片左上角的圖示，可傳 emoji 字串或任意 ReactNode |
gradientClassName | string | 內建配色 | 覆寫卡片背景漸層的 Tailwind class |
可及性
- 使用者系統開啟「減少動態效果」時，卡片以靜態堆疊呈現，不套用滾動位移、縮放與模糊
- 卡片標題與說明為真實文字節點，輔助科技可正常朗讀；純裝飾的光暈與提示標記為
aria-hidden - 滾動容器帶有
role="region"與aria-label，並使用overscroll-contain避免滾動穿透外層頁面