案例筆記堆｜免費 React 元件

把每則評價做成一份案例筆記：欄位化的導入資訊、迴紋針固定的照片與螢光筆劃重點，點選時從紙堆中抽到最前。

把客戶評價寫成一疊散放的案例筆記。每張紙頂端是欄位化的導入資訊（案例編號、產業、導入期間、團隊規模），右上角以迴紋針夾著一張小照片，中間的引言用強調色螢光筆標出重點，底部蓋上成果戳章。點紙堆裡任何一張，或用下方的縮略標籤切換，選中的那張會以彈簧動畫轉正、移到正中並抽到最上層，接著螢光筆由左向右掃過、戳章「蓋下」。選中索引支援受控／非受控雙模式。

把這個效果裝進你的專案

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

npx webberui@latest add case-note-pile

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

Playground

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

紙紋顆粒grain

抽出彈簧剛性stiffness

260

螢光筆時長（ms）duration

600

顯示成果戳章showStamp

import * as React from "react";

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

編輯中的呼叫預設屬性

<CaseNotePile/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/case-note-pile.json

或在 components.json 設定 registries 後，改用 @webberui/case-note-pile 安裝。

使用

import { CaseNotePile } from "@/components/ui/case-note-pile";

<CaseNotePile
  eyebrow="客戶案例"
  title="每一份導入，都留下了筆記"
  subtitle="看看不同規模的團隊怎麼把流程跑順。"
  testimonials={[
    {
      quote: "司機在路上就能看到改派，交期穩定到客戶開始主動加單。",
      highlight: "交期穩定到客戶開始主動加單",
      name: "陳柏宇",
      role: "物流調度經理",
      company: "北辰物流",
      metric: { value: "交期 -32%", label: "平均延遲" },
      caseFields: [
        { label: "案例編號", value: "No.031" },
        { label: "產業", value: "倉儲物流" },
        { label: "導入期間", value: "10 週" },
        { label: "團隊規模", value: "64 人" },
      ],
    },
    // ...建議共 3–5 則
  ]}
  onValueChange={(index) => console.log(`選中第 ${index + 1} 份`)}
/>

Props

Prop	型別	預設值	說明
`testimonials`	`CaseNotePileItem[]`	—	案例筆記資料，建議 3–5 則
`eyebrow`	`ReactNode`	—	標題上方的小標籤
`title`	`ReactNode`	—	區塊主標題，同時作為 section 的可及名稱
`subtitle`	`ReactNode`	—	主標題下方的說明
`value`	`number`	—	受控模式：目前選中的筆記索引
`defaultValue`	`number`	`0`	非受控模式：初始選中的筆記索引
`onValueChange`	`(index: number) => void`	—	選中筆記改變時回呼
`grain`	`boolean`	`false`	疊上細紙紋（feTurbulence 噪點）
`showStamp`	`boolean`	`true`	是否顯示成果戳章
`stiffness`	`number`	`260`	抽出筆記的彈簧剛性；未提供時讀取 `--wb-case-note-pile-stiffness`
`duration`	`number`	`600`	螢光筆掃過的時長（毫秒）；未提供時沿用 `--wb-case-note-pile-duration`
`countLabel`	`string`	`"份案例筆記"`	左側案例數旁的單位文字
`noteLabel`	`string`	`"案例筆記"`	每張筆記左上角的標頭文字
`tabsLabel`	`string`	`"切換案例"`	縮略標籤列的可及名稱
`className`	`string`	—	併入根 `section` 元素

CaseNotePileItem

欄位	型別	預設值	說明
`quote`	`string`	—	引言全文
`name`	`string`	—	客戶姓名；頭像顯示縮寫（中文取末兩字、拉丁取首字母）
`role`	`string`	—	職稱
`company`	`string`	—	公司名稱，也用於縮略標籤
`rating`	`number`	—	評分（0–5），保留給共通資料結構，此元件不顯示
`avatarHue`	`number`	依索引黃金角度	頭像與照片佔位的色相（0–360）
`highlight`	`string`	—	quote 中要用螢光筆標出的片段，需與原文完全相同
`metric`	`{ value: string; label: string }`	—	成果戳章內容
`caseFields`	`CaseNotePileField[]`	—	頂端欄位表格（`{ label, value }`）
`photoSrc`	`string`	—	迴紋針夾住的照片；未提供時以漸層 + 人像剪影佔位

細節

散放位置：每張筆記的位移與旋轉（-4～4deg）來自固定的位置表，不使用亂數，伺服器與瀏覽器渲染結果一致。
疊放順序：選中的那張永遠在最上層；被換下的那張留在第二層、彈回自己的散放位置，看起來像剛被放回紙堆。
螢光筆：以 background-size 從 0% 到 100% 由左向右掃過，延遲 200ms 起跑；跨行時每一行各自帶螢光筆。
節奏變數：--wb-case-note-pile-stiffness（彈簧剛性，預設 260，damping 固定 26）、--wb-case-note-pile-duration（螢光筆時長，預設 600ms）；傳入 stiffness／duration prop 時會覆寫。
強調色只走 --wb-case-note-pile-accent（淺色預設 #0d9488、深色預設 #2dd4bf），螢光筆、戳章、選中標籤都跟著變。

可及性

根元素為 section，以 aria-labelledby 指向標題
縮略標籤為 role="tablist"，每個標籤是 role="tab" 並以 aria-controls 指向對應筆記；左右（上下）方向鍵、Home、End 可在標籤間移動並切換
每張筆記為 role="tabpanel"；非選中的筆記設定 aria-hidden，切換標籤後選中筆記的內容即可被讀取
引言以 figure／blockquote／figcaption 呈現，重點片段使用 mark
頭像縮寫、照片佔位與迴紋針為裝飾，對輔助科技隱藏
使用者系統開啟「減少動態效果」時，筆記不再彈簧位移，選中的那張改以 150ms 淡入；螢光筆直接顯示、戳章只做淡入，內容仍可透過標籤切換

案例筆記堆

把這個效果裝進你的專案

Playground

安裝

使用

Props

CaseNotePileItem

細節

可及性

本頁目錄