多圖匯聚 <ConvergeShots />
3–4 張圖先並排展示、各帶一個標籤。配 build: 'reveal' 時第一次按 → 它們向中間匯聚，焦點圖放大到前面，其餘疊在後面；第二次按出現說明。跳頁時直接顯示匯聚後的畫面。
- 分組
- 動效 · 幾張圖並排，匯聚成一張焦點圖
- 元件
ConvergeShots·#converge-shots- 互動
- 按 → 匯聚到焦點圖，再按出現說明
適合
- 幾個頁面或檢視最後都落到一個結果
- 先展示範圍，再聚焦到要講的那一張
不適合
- 每張圖都要細講：用 Screenshot 或拆頁
- 圖片比例差別很大
內容上限
| 1 | shots 3–4 張，最好都是 16:9 |
| 2 | label ≤ 10 字 |
| 3 | caption ≤ 36 字 |
| 4 | 頁標題 ≤ 22 字 |
| 5 | lead ≤ 40 字 |
| 6 | 截圖當證據，照片只營造氛圍 |
欄位
| 欄位 | 型別 | |
|---|---|---|
kicker · 必填 | string | 小節名 |
title · 必填 | string | string[] | 標題 |
lead | string | 導語 |
shots · 必填 | { src, alt, label }[] | 圖片 |
focus | number | 最後放在前面的那張，預設 0 |
caption | string | 第二次按出現的說明 |
source | string | 出處 |
範例程式碼
<ConvergeShots
kicker="多圖匯聚"
title="四個入口，一份簡報"
shots={[{ src: slide, alt: '…', label: '放映' }, { src: overview, alt: '…', label: '總覽' }, { src: kit, alt: '…', label: '元件庫' }]}
caption="…"
/>