頁面區塊 Sections
人像翻牌牆
方形人像磚組成的牆面，hover 或點按時人像以 3D 翻面轉到背面露出引言，觸控與鍵盤同樣可翻。
用一面方形人像磚呈現客戶評價。正面是依色相產生的漸層人像佔位（或你提供的 photoSrc），左下角疊上姓名與職稱；游標移入時磚塊以彈簧 3D 翻面，背面露出引言、公司與星等。翻轉方向依游標進入的邊決定，觸控裝置改為點一下翻開、再點翻回，鍵盤用 Enter 或空白鍵切換。進場時磚塊依對角線順序錯開淡入。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add flip-portrait-tilesPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
220
編輯中的呼叫預設屬性
<FlipPortraitTiles/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/flip-portrait-tiles.json或在 components.json 設定 registries 後，改用 @webberui/flip-portrait-tiles 安裝。
使用
import { FlipPortraitTiles } from "@/components/ui/flip-portrait-tiles";
<FlipPortraitTiles
eyebrow="客戶回饋"
title="他們這樣說"
columns={4}
testimonials={[
{
quote: "改版後的訂位頁讓週末候位少了一半。",
highlight: "少了一半",
name: "林曉晴",
role: "店長",
company: "青嶼咖啡",
rating: 5,
},
{
quote: "司機端的簽收流程終於順了。",
name: "陳柏宇",
role: "營運主管",
company: "北辰物流",
rating: 4,
photoSrc: "/images/chen.jpg",
},
]}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
testimonials | FlipPortraitTilesItem[] | — | 評價清單（必填） |
eyebrow | string | — | 標題上方的小標 |
title | string | "客戶怎麼說" | 區塊標題，同時作為 section 的無障礙名稱 |
subtitle | string | — | 標題下方的說明文字 |
columns | 3 | 4 | 4 | 桌面寬度的欄數；窄螢幕自動降為 2–3 欄 |
trigger | "hover" | "click" | "auto" | "auto" | 觸發方式；auto 在精準指標（滑鼠）用 hover、觸控用點按 |
flipDirection | "auto" | "horizontal" | "vertical" | "auto" | 翻轉方向；auto 依游標進入的邊決定 |
stiffness | number | — | 翻面彈簧剛度；未提供時讀取 --wb-flip-portrait-tiles-stiffness，再退回 220 |
value | number[] | — | 受控：目前翻開的磚塊索引 |
defaultValue | number[] | [] | 非受控模式的初始翻開索引 |
onChange | (value: number[]) => void | — | 翻開狀態變更時觸發，回傳翻開中的索引（由小到大） |
className | string | — | 併入根 section |
FlipPortraitTilesItem
| 欄位 | 型別 | 預設值 | 說明 |
|---|---|---|---|
quote | string | — | 引言內容；超過 120 字自動縮為小字 |
name | string | — | 姓名 |
role | string | — | 職稱 |
company | string | — | 公司名稱，顯示在背面底部 |
rating | number | — | 星等（0–5），顯示時四捨五入 |
avatarHue | number | 依索引推算 | 人像佔位的色相（0–360）；預設以黃金角度 137.508° 依索引分配 |
highlight | string | — | 引言中要以強調色標記的片段 |
metric | { value: string; label: string } | — | 背面頂端的成效數字 |
photoSrc | string | — | 人像照片網址；提供時取代漸層剪影 |
細節
- 翻轉方向：
flipDirection="auto"時以游標進入點最近的邊決定——從左邊進來往右翻、從右邊進來往左翻、從上方進來往下翻、從下方進來往上翻；觸控則以按下位置最近的邊決定。翻開中的磚塊不會換軸，避免翻到一半跳動。 - 觸發方式：
auto以(pointer: coarse)判斷，SSR 與首次渲染一律視為 hover 模式，掛載後才切換。hover 模式可同時翻開多塊；點按模式則每塊各自切換，再點一下翻回。 - 節奏與色彩：彈簧阻尼固定為 22，剛度由
stiffness或--wb-flip-portrait-tiles-stiffness控制；強調色只走--wb-flip-portrait-tiles-accent（預設#0d9488，深色模式#2dd4bf），用於重點片段、星等與聚焦外框。 - 人像佔位不需要任何圖片：以色相產生雙色漸層，再疊一個抽象半身剪影；色相是確定性的，伺服器與瀏覽器渲染一致。
可及性
- 根元素為
section，以aria-labelledby指向標題 - 每塊磚的互動層是
button，帶aria-pressed（是否翻開）與「查看 某某 的評價」的aria-label；Tab 移動、Enter 或空白鍵翻面 - 引言以
figure／blockquote／figcaption呈現並放在按鈕之外：未翻開時背面設定aria-hidden，翻開後可被螢幕閱讀器讀到；星等附上「評分 N / 5」的隱藏文字 - 使用者系統開啟「減少動態效果」時，不做 3D 旋轉與縮放進場，翻面改為正背面 150ms 交叉淡入，進場只淡入