Hero Collection 01
三款動畫 Hero 區塊——漂移漸層網格、canvas 粒子場、逐字分割文字——共用一組內容 API，進入視口時內容依序揭示。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.12
<HeroCollection01 />
安裝
npx shadcn@latest add https://webberui.com/r/hero-collection-01.json或在 components.json 設定 registries 後，改用 @webberui/hero-collection-01 安裝。
安裝依賴後，從 registry JSON（/r/hero-collection-01.json 的 files[0].content）複製 hero-collection-01.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { HeroCollection01 } from "@/components/ui/hero-collection-01";
<HeroCollection01
variant="gradient"
eyebrow="動畫優先"
title="把每個區塊都變成場景"
subtitle="漂移的漸層網格作底，內容依序淡入。"
actions={[
{ label: "開始使用", href: "/docs", variant: "primary" },
{ label: "看範例", href: "/components", variant: "secondary" },
]}
/>同一組內容切換 variant 即可換成粒子場或分割文字風格：
<HeroCollection01 variant="particles" title="Ship with motion" />
<HeroCollection01 variant="split" title="Words that arrive one by one" />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "gradient" | "particles" | "split" | "gradient" | 背景動畫款式 |
eyebrow | string | — | 標題上方的小標（kicker） |
title | string | — | 主標題（必填） |
subtitle | string | — | 副標題說明文字 |
actions | HeroAction[] | — | CTA 按鈕清單 |
align | "center" | "left" | "center" | 內容對齊方式 |
colors | string[] | 冷色系三色 | 漸層／粒子的重點色 |
delay | number | 0 | 進場前延遲（秒） |
stagger | number | 0.12 | 各內容區塊的進場間隔（秒） |
once | boolean | true | 只在第一次進入視口時播放 |
grain | boolean | false | 疊加低透明度噪點（僅 gradient 款有效） |
children | ReactNode | — | 額外前景內容，接在按鈕列之後 |
HeroAction
| 欄位 | 型別 | 說明 |
|---|---|---|
label | string | 按鈕文字 |
href | string | 有值時渲染為 <a>，否則為 <button> |
onClick | () => void | 無 href 時的點擊處理 |
variant | "primary" | "secondary" | 實心或外框樣式 |
icon | ReactNode | 前置圖示節點 |
細節
- 一組內容、三種背景：
eyebrow／title／subtitle／actions的內容 API 三款共用，只換variant即可在漸層、粒子、分割文字之間切換，方便同一頁面 A/B 或依區塊調性換皮。 - 漸層網格（gradient）：三塊
radial-gradient色團以blur-3xl柔化，各自以不同週期在原點與目標間mirror往返漂移，形成緩慢呼吸的網格。grain開啟時疊一層內嵌的feTurbulence噪點，消除大面積漸層的色帶感。 - 粒子場（particles）：純 canvas 2D 繪製漂移粒子與鄰近連線（無 WebGL、無第三方套件）。以
devicePixelRatio校正清晰度、ResizeObserver追隨容器尺寸；未指定colors時讀currentColor，並用MutationObserver監看<html>的 class 變化，深淺主題切換時即時換色。 - 分割文字（split）：標題以空白切詞後逐詞
stagger進場（含位移與模糊揭示）；若標題無空白（如中日文）自動退回以Intl.Segmenter逐字素切割，emoji 與組合字不會被拆壞。襯底是一圈緩慢脈動的柔光加上淡網格。 - 進場編排：外層容器以
whileInView+staggerChildren讓 kicker、標題、副標、按鈕依序淡入；split款的標題再以第二層staggerChildren逐詞展開，形成兩段式的層疊節奏。
可及性
- 區塊帶
aria-labelledby指向標題，標題為唯一的<h1>。 - 所有背景（漸層／粒子／光暈）皆為
aria-hidden的裝飾層，螢幕閱讀器只讀到文字內容。 split款把完整標題放在sr-only，逐詞的視覺 span 為aria-hidden，朗讀時是完整句子而非碎詞。- 使用者系統開啟「減少動態效果」時，背景動畫停用改為靜態、內容直接顯示不做位移，
split款也不再逐字拆分而渲染完整標題。 - CTA 依
href有無渲染為原生<a>或<button>，可鍵盤聚焦操作並帶focus-visible外框環。