Images converge <ConvergeShots />

3–4 images stand side by side, each with a label. With build: 'reveal', the first press brings them together, the focus image grows to the front and the others stack behind it; the second press shows the caption. When jumping to the slide, the converged view is shown directly.

Group: Motion · several images stand side by side, then converge into one focus image
Component: ConvergeShots · #converge-shots
Interaction: Press → converge on the focus image; press again to show the caption

Good for

Several screens or views all end in one result
Show the range first, then focus on the one to talk about

Avoid when

Every image needs detail: use Screenshot or split the slide
The images differ a lot in aspect ratio

Content limits

1	shots 3–4, ideally all 16:9
2	label ≤ 10 chars
3	caption ≤ 36 chars
4	slide title ≤ 22 chars
5	lead ≤ 40 chars
6	Screenshots are evidence; photos only set the mood

Fields

Field	Type
`kicker` · required	`string`	Section label
`title` · required	`string \| string[]`	Title
`lead`	`string`	Lead
`shots` · required	`{ src, alt, label }[]`	Images
`focus`	`number`	Image placed in front at the end, default 0
`caption`	`string`	Caption that appears on the second press
`source`	`string`	Source

Example

<ConvergeShots
  kicker="多图汇聚"
  title="四个入口，一份演示"
  shots={[{ src: slide, alt: '…', label: '放映' }, { src: overview, alt: '…', label: '总览' }, { src: kit, alt: '…', label: '组件库' }]}
  caption="…"
/>