拍立得相片疊｜免費 React 元件

一疊歪斜擺放的拍立得相片，最上面一張附上引言，點擊或甩動把它丟到最底，下一張翻上來、整疊重新錯開。

把客戶評價做成桌上一疊歪斜擺放的拍立得。左欄放標題、說明與「下一則」按鈕；右欄的相片疊裡，最上面那張寫著引言與姓名，下面幾張只露出白邊。點擊頂卡、按「下一則」或把它往旁邊甩，頂卡會以彈簧往外飛出、再回到疊底，其他每張上升一層、整疊重新錯開。沒有照片時以漸層加抽象剪影當人像佔位，也可以用 photoSrc 換上真圖；目前索引支援受控／非受控雙模式，另可選擇自動輪播。

把這個效果裝進你的專案

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

npx webberui@latest add instant-photo-stack

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

Playground

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

彈簧剛性stiffness

300

最大傾斜角度maxRotate

自動輪播autoplay

輪播間隔（毫秒）interval

6000

import * as React from "react";

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

編輯中的呼叫預設屬性

<InstantPhotoStack/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/instant-photo-stack.json

或在 components.json 設定 registries 後，改用 @webberui/instant-photo-stack 安裝。

使用

import { InstantPhotoStack } from "@/components/ui/instant-photo-stack";

<InstantPhotoStack
  eyebrow="客戶回饋"
  title="一張一張翻，都是真心話"
  subtitle="點擊相片或按「下一則」換一位客戶。"
  testimonials={[
    {
      quote: "換上新的訂位頁之後，熟客說現在三十秒就能訂好位子。",
      name: "林語涵",
      role: "店長",
      company: "青嶼咖啡",
      rating: 5,
      highlight: "三十秒就能訂好位子",
    },
    {
      quote: "派車畫面一目了然，新進同仁第一天就能上線。",
      name: "陳柏宇",
      role: "營運經理",
      company: "北辰物流",
      metric: { value: "−42%", label: "訓練時數" },
    },
  ]}
/>

Props

Prop	型別	預設值	說明
`eyebrow`	`string`	—	標題上方的小標
`title`	`string`	`"客戶怎麼說"`	區塊標題
`subtitle`	`string`	—	標題下方的說明文字
`testimonials`	`InstantPhotoStackItem[]`	—	評價清單（建議 4–6 則）
`index`	`number`	—	受控模式：目前在最上面的評價索引
`defaultIndex`	`number`	`0`	非受控模式的初始索引
`onIndexChange`	`(index: number) => void`	—	索引變動時回呼
`autoplay`	`boolean`	`false`	是否自動輪播（減少動態效果時一律關閉）
`interval`	`number`	`6000`	自動輪播間隔（毫秒）
`maxRotate`	`number`	`8`	散放角度上限（度），各層傾斜依此等比縮放
`nextLabel`	`string`	`"下一則"`	「下一則」按鈕文字
`prevLabel`	`string`	`"上一則"`	「上一則」按鈕的無障礙名稱
`className`	`string`	—	併入根 section 的 className

InstantPhotoStackItem

欄位	型別	預設值	說明
`quote`	`string`	—	引言內文
`name`	`string`	—	姓名
`role`	`string`	—	職稱
`company`	`string`	—	公司名稱
`rating`	`number`	—	星等（0–5），有提供才顯示
`avatarHue`	`number`	依索引決定	佔位人像的色相（0–360）；未提供時依索引以黃金角度決定
`highlight`	`string`	—	`quote` 中要以強調色標記的片段
`metric`	`{ value: string; label: string }`	—	附帶的成效數字，顯示在相片左上角
`photoSrc`	`string`	—	相片網址；未提供時以漸層 + SVG 剪影佔位

CSS 變數

變數	預設值	說明
`--wb-instant-photo-stack-stiffness`	`300`	換卡彈簧的剛性（阻尼固定 28）
`--wb-instant-photo-stack-accent`	`#0d9488`（深色 `#2dd4bf`）	強調色：小標、標記片段、星等、焦點框

細節

散放參數依「層」決定：每一層有固定的傾斜比例與 ±12px 內的位移，乘上 maxRotate。卡片上升一層時就過渡到新層的參數，所以整疊每次都會重新錯開；用固定表而不是亂數，SSR 與客戶端輸出一致。
甩出動畫：頂卡先保持在最上層、以彈簧往右上飛出（約 1.2 倍卡寬、旋轉 +20°），透明度在前段就淡出；飛完後回到疊底的位置與角度，再恢復不透明。
拖曳頂卡時傾斜角跟著水平位移走（±200px 對應 ±12°）。放手時位移超過 100px 或速度超過 500px/s 就依方向甩出換下一則，否則彈回原位。
彈簧剛性在每次換卡時才從 CSS 變數讀取，所以在主題或外層容器覆寫 --wb-instant-photo-stack-stiffness 隨時生效。
最多同時露出 5 層；超過的評價疊在最底層位置並隱藏，輪到時才浮上來。
開啟 autoplay 時會顯示暫停鈕；滑鼠停在相片疊上、焦點在相片疊內或分頁切到背景時都會暫停。

可及性

根元素是 section，以 aria-labelledby 指向標題
相片疊為 role="region"、aria-roledescription="相片疊"，可用 Tab 聚焦；Space／Enter／→ 下一則，← 上一則
只有最上面那張的內容會被讀出，其餘卡片設定 aria-hidden；引言以 figure／blockquote／figcaption 標記
換卡時由 aria-live="polite" 區域宣告「第幾則與作者姓名」
自動輪播有可見的暫停／繼續鈕（aria-pressed），hover、focus-within 與分頁隱藏時自動暫停
使用者系統開啟「減少動態效果」時，自動輪播與拖曳停用，甩出與重新錯開改為 150ms 淡出淡入，內容仍可透過按鈕與鍵盤切換

拍立得相片疊

把這個效果裝進你的專案

本頁目錄