引言成效三欄｜免費 React 元件

三欄並排的靜態評價 React 元件，每欄一則重點引言與成效數字；進場時欄間分隔線由上而下描出、數字從 0 計數、欄位依序浮現，頂部附生成式等高線背景。

把客戶評價做成「一欄一則完整案例摘要」：每欄頂部是巨大的成效數字（例如 +38%）與標籤，接著短分隔線、引言、作者列。不捲動、不輪播、不切換——內容靜態並排，重點放在數字。進場時欄間細線由上而下描出、各欄依序浮現，數字在欄位出現後從 0 計數到終值；section 頂部可選一道依 seed 產生的淡色等高線背景，進場時描繪一次。寬螢幕 2／3／4 欄，窄螢幕自動直排並改用水平分隔線。

把這個效果裝進你的專案

在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。

npx webberui@latest add quote-result-columns

還沒有專案，或安裝遇到問題？看快速開始 →

Playground

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

欄數columns

等高線背景showBackdrop

等高線種子seed

欄位間隔（ms）stagger

120

浮現時長（ms）duration

600

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

編輯中的呼叫預設屬性

<QuoteResultColumns/>

    </div>
  );
}

完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。

安裝

npx webberui@latest add https://webberui.com/r/quote-result-columns.json

或在 components.json 設定 registries 後，改用 @webberui/quote-result-columns 安裝。

使用

import { QuoteResultColumns } from "@/components/ui/quote-result-columns";

<QuoteResultColumns
  eyebrow="導入成效"
  title="數字替客戶說話"
  columns={3}
  testimonials={[
    {
      quote: "結帳流程變順之後，放棄購物車的人明顯變少。",
      highlight: "結帳流程變順",
      name: "林語晴",
      role: "電商主管",
      company: "青嶼咖啡",
      metric: { value: "+38%", label: "訂單轉換率" },
    },
    {
      quote: "司機在路上就能看到改派，準時率穩定後客戶主動加線。",
      name: "陳柏宇",
      role: "營運經理",
      company: "北辰物流",
      metric: { value: "-27%", label: "平均配送時間" },
    },
    {
      quote: "助教能在學員卡關前就伸手，續報名額提早額滿。",
      name: "張品妍",
      role: "教務長",
      company: "拾光學院",
      metric: { value: "2.4 倍", label: "課程完課率" },
    },
  ]}
/>

Props

Prop	型別	預設值	說明
`testimonials`	`QuoteResultColumnsItem[]`	—	評價資料，每則一欄；超過欄數時自動換行
`eyebrow`	`ReactNode`	—	標題上方的小標籤
`title`	`ReactNode`	`"客戶成效"`	區塊主標題，同時作為 section 的可及名稱
`subtitle`	`ReactNode`	—	主標題下方的說明
`columns`	`2 \| 3 \| 4`	`3`	寬螢幕欄數；`4` 在中等寬度先排成 2 欄，窄螢幕一律直排
`seed`	`number`	`2`	背景等高線的種子，同一個種子永遠畫出同一組曲線
`showBackdrop`	`boolean`	`true`	是否在 section 頂部顯示生成式等高線背景
`stagger`	`number`	—	欄位依序浮現的間隔（毫秒）；未提供時讀取 `--wb-quote-result-columns-stagger`（預設 120ms）
`duration`	`number`	—	每欄浮現的時長（毫秒）；未提供時讀取 `--wb-quote-result-columns-duration`（預設 600ms）
`className`	`string`	—	併入根 `section`

QuoteResultColumnsItem

欄位	型別	預設值	說明
`quote`	`string`	—	引言全文
`name`	`string`	—	客戶姓名；頭像顯示縮寫（中文取末兩字、拉丁取首字母）
`role`	`string`	—	職稱
`company`	`string`	—	公司名稱，與職稱以「 · 」串接
`rating`	`number`	—	評分（0–5）；本元件不顯示，保留給共通資料結構
`avatarHue`	`number`	—	頭像漸層色相（0–360）；未提供時依索引以黃金角度（137.508°）推算
`highlight`	`string`	—	引言中要標記的片段，需與原文完全相同
`metric`	`{ value: string; label: string }`	—	成效數字與標籤；建議必填，沒有時該欄頂部改放大引號

CSS 變數

變數	預設值	說明
`--wb-quote-result-columns-accent`	`#0d9488`（深色 `#2dd4bf`）	成效數字、eyebrow、引號與標記底色的強調色
`--wb-quote-result-columns-stagger`	`120ms`	欄位依序浮現的間隔
`--wb-quote-result-columns-duration`	`600ms`	每欄浮現的時長

細節

成效數字的計數會解析 metric.value 中的第一個數字與前後綴：+38% 拆成前綴 +、38、後綴 %；1,200 小時 會保留千分位；2.4 倍 會保留一位小數。沒有數字的值（例如「全面上線」）直接顯示，不計數。
計數在該欄浮現完成後才開始，時長 1200ms、easeOut；伺服器端渲染與尚未進場時輸出的都是終值，搜尋引擎與無 JavaScript 環境讀得到完整數字。
背景等高線由 seed 經確定性的偽亂數產生 6 條平滑曲線，不使用 Math.random，SSR 與 client 一致；進場時以 1600ms 描繪一次，底部以遮罩淡出。
欄間分隔線在寬螢幕為垂直線（由上而下描出 600ms），窄螢幕直排時改為水平線；columns 為 4 時在中等寬度以 2×2 排列，分隔線會跟著換位置。
進場只播一次（useInView once，可視比例 20%）；要重播請以 key 重新掛載。

可及性

根元素是 section，以 aria-labelledby 指向標題 h2
每欄是 figure，引言放在 blockquote，姓名、職稱與公司放在 figcaption
計數中的數字對輔助科技隱藏，另以視覺隱藏文字提供終值，螢幕閱讀器只會朗讀最終的成效數字
頭像縮寫、分隔線、引號與背景等高線皆為裝飾，設定 aria-hidden
使用者系統開啟「減少動態效果」時，欄位改為 150ms 淡入、不位移，分隔線直接出現，數字不計數直接顯示終值，等高線改為淡入

引言成效三欄

把這個效果裝進你的專案

本頁目錄