Hero Collection 02
三款進階 Hero 區塊 — 流體漸層畫布、CSS 3D 視差傾斜、文字遮罩流光，皆為單一元件的 variant。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
1
12
<HeroCollection02 />
安裝
npx shadcn@latest add https://webberui.com/r/hero-collection-02.json或在 components.json 設定 registries 後，改用 @webberui/hero-collection-02 安裝。
安裝依賴後，從 registry JSON（/r/hero-collection-02.json 的 files[0].content）複製 hero-collection-02.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { HeroCollection02 } from "@/components/ui/hero-collection-02";
<HeroCollection02
variant="fluid"
eyebrow="全新登場"
title="動畫優先的介面"
description="流體漸層背景在畫布上即時流動，隨游標輕輕擾動。"
actions={
<button className="rounded-full bg-neutral-900 px-5 py-2 text-sm text-white">
開始使用
</button>
}
/>三款 variant
| variant | 效果 | 技術 |
|---|---|---|
fluid | 流體漸層場即時流動、隨游標擾動 | canvas 2D 逐像素流場（WebGL 折衷） |
depth | 各裝飾層依深度傾斜出立體視差 | CSS 3D perspective + translateZ |
masked | 漸層在標題文字遮罩內流動 | background-clip: text + 動畫背景位移（影片遮罩折衷） |
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "fluid" | "depth" | "masked" | "fluid" | Hero 款式 |
title | React.ReactNode | — | 主標題（必填）；masked 下套用流動漸層遮罩 |
eyebrow | React.ReactNode | — | 標題上方的小標籤 |
description | React.ReactNode | — | 標題下方的敘述文字 |
actions | React.ReactNode | — | 行動呼籲區（放入你的按鈕） |
align | "center" | "left" | "center" | 內容對齊 |
colors | string[] | 內建配色 | 漸層色停（2 色以上）；供 fluid 與 masked 使用 |
speed | number | 1 | 動畫速度倍率 |
intensity | number | 12 | depth 傾斜的最大角度（度） |
interactive | boolean | true | 是否啟用指標互動（僅滑鼠生效） |
children | React.ReactNode | — | 追加在行動呼籲之後的自訂內容 |
className | string | — | 追加在最外層 <section>；可覆蓋高度等 |
細節
- fluid：以低解析度離屏緩衝逐像素計算多層正弦流場，再平滑放大貼回主畫布，天然形成柔化的流動感；
devicePixelRatio上限夾在 2，ResizeObserver追蹤容器尺寸。 - depth：
<section>設定perspective，傾斜包裹層preserve-3d，裝飾層以不同translateZ與反向平移量產生視差；傾斜角度經彈簧（useSpring）平滑，游標離開時歸零。 - masked：標題以
background-clip: text讓漸層透出，並以動畫平移background-position模擬影片般的流光；首色補在漸層尾端讓循環無縫。
可及性
- 使用者系統開啟「減少動態效果」時：
fluid只繪製一幀靜態流場、depth停用傾斜、masked停止漸層流動，皆不啟動requestAnimationFrame或無限動畫。 - 最外層為
role="region"且aria-roledescription="hero"；所有裝飾層（畫布、光暈、遮罩）皆aria-hidden，不干擾螢幕閱讀器。 - 指標互動僅在
pointerType === "mouse"時生效，觸控與鍵盤操作不受影響；actions內的按鈕由你提供，可正常聚焦與鍵盤觸發。 - 計時器、
requestAnimationFrame、ResizeObserver與指標事件監聽在元件卸載時全數清理。