傾斜立體評價卡｜免費 React 元件

一張微微歪斜的評價卡，隨游標做 3D 透視傾斜與光澤反射，引言浮在卡面之上，切換時卡片翻轉換面。

一次只講一個客戶故事的評價區塊。置中的卡片靜止時微微歪斜，游標移上去會依位置做 3D 透視傾斜，卡面有一層跟著游標走的光澤；大引號、引言與作者列沿 Z 軸浮在卡面之上，後方的模糊色塊與細線網格則反向位移，拉出前後景深。按下方按鈕切換時，卡片轉到側面、換上下一則再轉回來，方向依「上一則／下一則」而定。目前索引支援受控／非受控雙模式。

把這個效果裝進你的專案

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

npx webberui@latest add 3d-tilt-review-card

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

Playground

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

最大傾斜角度（度）maxTilt

靜止傾角（度）restRotate

-3

卡面光澤glare

傾斜彈簧 stiffnessstiffness

200

翻轉時長（ms）duration

500

import * as React from "react";

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

編輯中的呼叫預設屬性

<ThreeDTiltReviewCard/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/3d-tilt-review-card.json

或在 components.json 設定 registries 後，改用 @webberui/3d-tilt-review-card 安裝。

使用

import { ThreeDTiltReviewCard } from "@/components/ui/3d-tilt-review-card";

<ThreeDTiltReviewCard
  eyebrow="客戶怎麼說"
  title="一張卡，說一個真實的改變"
  testimonials={[
    {
      quote: "換上新的點餐頁之後，尖峰時段的出杯速度明顯快了一截。",
      name: "林語晴",
      role: "營運經理",
      company: "青嶼咖啡",
      rating: 5,
      highlight: "出杯速度明顯快了一截",
      metric: { value: "+32%", label: "尖峰出杯量" },
    },
    {
      quote: "新進同仁第一天就能自己跑完整條路線。",
      name: "周柏翰",
      role: "調度主任",
      company: "北辰物流",
    },
  ]}
  maxTilt={10}
  restRotate={-3}
  onIndexChange={(i) => console.log(`切到第 ${i + 1} 則`)}
/>

Props

Prop	型別	預設值	說明
`eyebrow`	`string`	—	標題上方的小標
`title`	`string`	—	區塊標題；同時作為 section 的無障礙名稱
`subtitle`	`string`	—	標題下方的說明文字
`testimonials`	`ThreeDTiltReviewCardItem[]`	—	評價資料，一次顯示一則
`maxTilt`	`number`	`10`	最大傾斜角度（度），游標在卡片邊緣時達到；`0` 關閉傾斜
`restRotate`	`number`	`-3`	卡片靜止時的平面傾角（度）；CSS 變數 `--wb-3d-tilt-review-card-rest` 優先
`index`	`number`	—	受控的目前索引；未提供時由元件內部管理
`defaultIndex`	`number`	`0`	非受控模式的初始索引
`onIndexChange`	`(index: number) => void`	—	索引變動時回呼
`glare`	`boolean`	`true`	是否顯示跟隨游標的卡面光澤
`stiffness`	`number`	—	傾斜彈簧的 stiffness；未提供時讀 `--wb-3d-tilt-review-card-stiffness`（預設 200）
`duration`	`number`	—	翻轉切換總時長（ms）；未提供時讀 `--wb-3d-tilt-review-card-duration`（預設 500ms）
`prevLabel`	`string`	`"上一則評價"`	「上一則」按鈕的無障礙名稱
`nextLabel`	`string`	`"下一則評價"`	「下一則」按鈕的無障礙名稱
`className`	`string`	—	附加到根 section 的 class

ThreeDTiltReviewCardItem

欄位	型別	預設值	說明
`quote`	`string`	—	評價內文
`name`	`string`	—	評價者姓名；頭像顯示姓名縮寫（中文取末兩字、拉丁取首字母）
`role`	`string`	—	職稱
`company`	`string`	—	公司或單位
`rating`	`number`	—	星等（1–5）；未提供時不顯示
`avatarHue`	`number`	—	頭像漸層色相（0–360）；未提供時依索引以黃金角度分配
`highlight`	`string`	—	quote 中要以強調色標記的片段（需完全相符）
`metric`	`{ value: string; label: string }`	—	作者列右側的成效數字

細節

節奏變數：--wb-3d-tilt-review-card-stiffness（傾斜彈簧，預設 200，damping 固定 20）、--wb-3d-tilt-review-card-duration（翻轉總時長，預設 500ms，出場與進場各半）、--wb-3d-tilt-review-card-rest（靜止傾角，預設 -3deg）。強調色走 --wb-3d-tilt-review-card-accent（亮色 #0d9488、暗色 #2dd4bf）。
層次：大引號 translateZ(60px)、引言與作者列 translateZ(40px)；卡片本體不設 overflow-hidden，避免 3D 被攤平。
光澤是一層白色 15% 的 radial-gradient，圓心跟著游標位置移動；游標離開時傾角與光澤以同一組彈簧回到靜止狀態。
翻轉方向：「下一則」先轉到 90° 再從 -90° 轉回，「上一則」相反；從最後一則循環到第一則仍視為「下一則」。
觸控裝置（pointer: coarse）不做游標傾斜，只保留靜止傾角與切換翻轉。

可及性

根元素為 <section>，有 title 時以 aria-labelledby 指向標題，否則以小標或「客戶評價」作為 aria-label
每則評價以 <figure>／<blockquote>／<figcaption> 呈現；星等以 role="img" 與文字描述朗讀
切換按鈕為 type="button" 並帶 aria-label，有 focus-visible 外框；在按鈕群組上可用左右方向鍵切換
切換時以 aria-live="polite" 的隱藏區域朗讀「第幾則、共幾則」與引言內容；翻轉中短暫並存的兩張卡不會重複朗讀
使用者系統開啟「減少動態效果」時，停用游標傾斜、光澤與翻轉，切換改為 150ms 淡入淡出，內容仍可透過按鈕切換

傾斜立體評價卡

把這個效果裝進你的專案

Playground

安裝

使用

Props

ThreeDTiltReviewCardItem

細節

可及性

本頁目錄