Testimonial Wall

三欄反向捲動的評價牆，支援自動無限捲動與捲動視差兩種樣式。

載入預覽⋯

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

捲動模式variant

欄數columns

捲動速度 (px/s)speed

可見高度 (px)height

260

卡片間距 (px)gap

滑入時暫停pauseOnHover

<TestimonialWall />

安裝

npx shadcn@latest add https://webberui.com/r/testimonial-wall.json

或在 components.json 設定 registries 後，改用 @webberui/testimonial-wall 安裝。

安裝依賴後，從 registry JSON（/r/testimonial-wall.json 的 files[0].content）複製 testimonial-wall.tsx 原始碼到你的 components/ui/ 目錄：

npm install motion clsx tailwind-merge lucide-react

使用

import { TestimonialWall, type Testimonial } from "@/components/ui/testimonial-wall";

const testimonials: Testimonial[] = [
  { quote: "接上去五分鐘就跑起來。", name: "Aria Chen", title: "@aria" },
  { quote: "Ship it. It just works.", name: "Marcus Webb", title: "Loom" },
  // …更多評價
];

<TestimonialWall items={testimonials} height={480} />

相鄰欄會以相反方向捲動，資料依序輪替分配到各欄。

捲動視差樣式

variant="scroll" 改用捲動位置驅動的視差：相鄰欄隨頁面捲動朝相反方向位移。若捲動發生在巢狀的 overflow 容器內，把該容器 ref 傳給 container（與視窗捲動時可省略）。

<TestimonialWall items={testimonials} variant="scroll" height={480} />

自訂卡片

<TestimonialWall
  items={testimonials}
  renderItem={(item) => (
    <div className="rounded-lg border p-4">
      <p>{item.quote}</p>
      <span>{item.name}</span>
    </div>
  )}
/>

Props

Prop	型別	預設值	說明
`items`	`Testimonial[]`	—	評價資料，依序平均分配到各欄
`columns`	`number`	`3`	欄數；相鄰欄以相反方向捲動
`variant`	`"marquee" \| "scroll"`	`"marquee"`	自動無限捲動，或捲動位置驅動的視差
`speed`	`number`	`24`	`marquee` 每秒位移（px），僅 `marquee` 生效
`height`	`number \| string`	`480`	可見高度，超出部分裁切
`gap`	`number`	`16`	卡片間距（px）
`pauseOnHover`	`boolean`	`true`	`marquee` 時滑鼠移入或鍵盤聚焦是否暫停
`renderItem`	`(item, index) => ReactNode`	—	自訂卡片渲染
`label`	`string`	`"使用者評價"`	整體區域的無障礙標籤
`container`	`RefObject<HTMLElement>`	—	`scroll` 變體巢狀捲動容器的 ref
`className`	`string`	—	外層區域 class
`cardClassName`	`string`	—	內建卡片 class（自訂 `renderItem` 時無效）

Testimonial 型別：{ quote: string; name: string; title?: string; avatar?: string }。未提供 avatar 時，卡片會以姓名首字作為佔位頭像。

細節

marquee 以 requestAnimationFrame 手動推進位移，兩份內容無縫循環，速度不受各欄卡片數量影響。
scroll 以 useScroll 追蹤區塊通過視口的進度，並在每欄可捲動的溢出範圍內做視差，因此不會露出空白邊緣。
頂部與底部套用漸層遮罩淡出，讓進出的卡片自然消隱。

可及性

使用者系統開啟「減少動態效果」時，改以完整展開、無裁切、無動畫的靜態版呈現全部評價。
整體以 section 搭配 aria-label 標示；內建卡片使用語意化的 figure / blockquote / figcaption。
marquee 為無縫循環會複製一份內容，複製份標記 aria-hidden，輔助科技不會重複朗讀。
pauseOnHover 開啟時，鍵盤聚焦到卡片內連結會一併暫停捲動，方便閱讀與操作。

On this page