雜誌跨頁引言｜免費 React 元件

雜誌跨頁式的 React 評價區塊：巨型引號、襯線大字拉引、首字放大與雙欄內文，進場時引號放大落定、文字逐行浮現，多則評價可翻頁。

把客戶評價排成一份雜誌跨頁：左頁是滿版人像（沒有照片時以雙色漸層與抽象半身剪影佔位）與圖說，右頁由欄目小標、壓在拉引左上角的巨型引號、襯線大字拉引、細分隔線、首字放大的雙欄案例敘述，以及署名與頁碼組成，中間一條裝訂陰影把兩頁接起來。捲進畫面時，左頁圖片從裝訂線向外展開，引號放大後落定，拉引一行一行從遮罩中浮現，內文最後淡入。多則評價時右下角有上一頁／下一頁，整個跨頁像翻紙一樣交接。

把這個效果裝進你的專案

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

npx webberui@latest add magazine-pull-quote

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

Playground

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

拉引斜體italic

顯示左頁人像showPhoto

逐行浮現時長（ms）duration

700

頁腳欄目名稱pageLabel

import * as React from "react";

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

編輯中的呼叫預設屬性

<MagazinePullQuote/>

    </div>
  );
}

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

安裝

npx webberui@latest add https://webberui.com/r/magazine-pull-quote.json

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

使用

import { MagazinePullQuote } from "@/components/ui/magazine-pull-quote";

<MagazinePullQuote
  eyebrow="Customer Story"
  title="翻開這期的客戶專訪"
  testimonials={[
    {
      quote: "改版之後，\n客人在門口掃碼就訂得到位子。",
      name: "林語晴",
      role: "營運主理人",
      company: "青嶼咖啡",
      highlight: "掃碼就訂得到位子",
      photoCredit: "周以安",
      story:
        "三家分店過去各用一套訂位表，週末常常同一張桌子被訂兩次。\n\n上線第一個月，週末候位少了一半。",
    },
    {
      quote: "司機打開派車畫面就知道下一站。",
      name: "陳柏宇",
      role: "調度主管",
      company: "北辰物流",
      photoSrc: "/images/team/chen.jpg",
    },
  ]}
  pageLabel="客戶專訪"
  startPage={24}
  onIndexChange={(i) => console.log(`翻到第 ${i + 1} 則`)}
/>

Props

Prop	型別	預設值	說明
`testimonials`	`MagazinePullQuoteItem[]`	—	評價清單；多於一則時右下角出現翻頁控制
`eyebrow`	`string`	—	右頁頂端的欄目小標，以大寫字距呈現
`title`	`string`	—	跨頁上方的區塊標題；有提供時作為 section 的 `aria-labelledby`
`subtitle`	`string`	—	標題下方的說明文字
`italic`	`boolean`	`false`	拉引是否使用斜體
`showPhoto`	`boolean`	`true`	是否顯示左頁人像；關閉時只留右頁並置中
`duration`	`number`	`700`	拉引逐行浮現的時長（ms）；未提供時讀 `--wb-magazine-pull-quote-duration`
`index`	`number`	—	受控的目前索引；未提供時由元件內部管理
`defaultIndex`	`number`	`0`	非受控模式的初始索引
`onIndexChange`	`(index: number) => void`	—	索引變動時回呼
`pageLabel`	`string`	`"客戶專訪"`	頁腳的欄目名稱；沒有 `title` 時也作為 section 的 `aria-label`
`startPage`	`number`	`24`	第一個跨頁的頁碼，之後每翻一頁加 2
`className`	`string`	—	透傳到根 section

MagazinePullQuoteItem

欄位	型別	預設值	說明
`quote`	`string`	—	拉引內文；可用 `\n` 手動斷行，未斷行時自動依句末標點切行
`name`	`string`	—	姓名，顯示在署名與圖說
`role`	`string`	—	職稱
`company`	`string`	—	公司
`rating`	`number`	—	評分（0–5），顯示在署名旁
`avatarHue`	`number`	—	佔位人像的色相；未提供時依索引以黃金角度（137.508°）推算
`highlight`	`string`	—	quote 中要以強調色標記的片段
`metric`	`{ value: string; label: string }`	—	搭配引言的關鍵數字，顯示在署名旁
`story`	`string`	—	較長的案例敘述，排成雙欄內文；段落以空行分隔，首段首字放大
`photoSrc`	`string`	—	人像照片網址；未提供時以漸層 + 抽象剪影佔位
`photoCredit`	`string`	—	圖說裡的攝影署名

細節

襯線字只用在巨型引號、拉引、首字與數字，使用 Tailwind 的 font-serif，實際字體由你網站的 fontFamily.serif 決定，元件不載入任何字型檔；其餘文字維持 font-sans。
節奏變數 --wb-magazine-pull-quote-duration（預設 700ms）控制拉引逐行浮現的時長，每行錯開 80ms。傳入 duration 時會寫進這個變數，掛載後再從 computed style 讀回，所以在外層覆寫變數也會生效。
其餘節奏固定：巨型引號以彈簧（stiffness 180、damping 18）從 1.6 倍、傾斜 −6° 落定；內文延遲 300ms 淡入並上移 8px；左頁圖片 900ms 由裝訂線向外展開；翻頁時右頁以左緣為軸 rotateY(-8deg) 搭配透明度交接 600ms，左頁圖片同時交叉淡接。
進場動畫只在第一次捲進畫面時播放一次（useInView once）。
強調色只走 --wb-magazine-pull-quote-accent（淺色預設 #0d9488、深色預設 #2dd4bf），用在欄目小標、巨型引號、重點片段與數字。
md 以上兩頁並排；md 以下改為上下排列，裝訂陰影隱藏。

可及性

根元素是 section，有標題時以 aria-labelledby 指向標題；跨頁本身是 article，引言以 figure、blockquote、figcaption 呈現
巨型引號與佔位剪影都是 aria-hidden，人像圖片為裝飾性（alt=""），姓名與職稱在圖說與署名中以文字呈現
首字放大用 ::first-letter 實作，不把第一個字拆成獨立元素，螢幕閱讀器照常整句朗讀
上一頁／下一頁是 type="button" 並有 aria-label；焦點在跨頁內時可用左右方向鍵翻頁，翻頁後以 aria-live="polite" 朗讀「第 2 則，共 3 則」與姓名
使用者系統開啟「減少動態效果」時：不做縮放、傾斜、位移、裁切展開與翻紙效果，全部改為 150ms 淡入，仍可用按鈕翻頁

雜誌跨頁引言

把這個效果裝進你的專案

Playground

安裝

使用

Props

MagazinePullQuoteItem

細節

可及性

本頁目錄