Hero Parallax Grid
多列反向視差的產品／作品牆，捲動時每一排以不同方向掃過並帶 3D 進場。
以捲動進度驅動的英雄視差牆：項目切成多列，相鄰列橫向反向位移，並在進場前 20% 完成 rotateX 與淡入，形成景深穿越感。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
3
320
200
150
<HeroParallaxGrid />
安裝
npx shadcn@latest add https://webberui.com/r/hero-parallax-grid.json或在 components.json 設定 registries 後，改用 @webberui/hero-parallax-grid 安裝。
安裝依賴後，從 registry JSON（/r/hero-parallax-grid.json 的 files[0].content）複製 hero-parallax-grid.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { HeroParallaxGrid } from "@/components/ui/hero-parallax-grid";
const items = [
{ src: "/work/nova.jpg", alt: "Nova", title: "Nova" },
{ src: "/work/ember.jpg", alt: "Ember", title: "Ember" },
// 建議 9–15 張
];
<HeroParallaxGrid
items={items}
title="精選作品牆"
description="多列反向視差。"
/>;外層軌道容器的高度（className 的 h-*）決定可捲動距離；容器越高，視差掃過越慢越完整。若捲動發生在巢狀 overflow 區塊內，將該容器的 ref 傳給 container。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
items | (string | { src; alt?; title? })[] | — | 產品／作品項目，建議 9–15 張 |
container | RefObject<HTMLElement> | undefined | 巢狀捲動容器；預設以視窗為捲動來源 |
rows | number | 3 | 切成幾列，相鄰列反向位移 |
travel | number | 320 | 每列橫向位移距離（px），越大掃過越快 |
title | string | undefined | 頂部標題（省略則不渲染） |
description | string | undefined | 標題下方描述 |
cardWidth | number | 200 | 卡片寬度（px） |
cardHeight | number | 150 | 卡片高度（px） |
aria-label | string | "視差產品牆" | 圖組無障礙名稱 |
className | string | undefined | 軌道容器；高度決定可捲動距離 |
imageClassName | string | undefined | 套用到每張卡片圖片 |
可及性
- 使用者系統開啟「減少動態效果」時，改渲染靜態網格，不做捲動視差
- 整組帶
role="group"與aria-label；無alt的圖片標記為aria-hidden