用沉浸式画廊讲故事

一块沉浸 plate。

产品就是这样：先封面，再静音无缝循环——这里只用一块正方形 plate，让动感立刻出现，又不必整屏滚动。与静图画廊同一套文件夹 ::gallery。没有第二套媒体系统，也没有单独的「视频 content type」。

Web Device 很在意文字与媒体在页面上如何被遇见。沉浸 plate 是这个赌注里的一个小音区：画面到达之后可以动起来，却不必把文章做成播放器产品。

为什么和「写」有关

网上多数媒体还是段落底下的装饰：图在框里，说明在框下；若要动，再塞一个打断阅读节奏的嵌入块。

Web Device 偏向另一边。Markdown Slides 是一份记录、多种读法；Gallery 是一个文件夹、多种看法。封面 + 视频落在同一条线上：媒体在条目本地，布局诚实服务叙事（stage / expose / story），首屏也不用等视频解码完成。

你得到的是类似 Live Photo 的行为，却不必发明新的产品名词。Plate 还是 plate。文件夹还是文件夹。

同一文件夹，成对文件

在 content.md 旁放静图和短片。用文件名主干配对（主干对不上时，sidecar 里写 video: / poster:）：

hero/
  bloom.jpg
  bloom.mp4
  bloom.md          # 可选 title / overlay / tone

然后：

::gallery{folder="hero" layout="expose" ratio="1:1"}

expose 是 stage 的别名。说明叠在图上（sidecar）。

定尺寸：ratio · width · height

Stage 默认是全视口 plate。文内 demo（或方形 Live Photo 感）可任选组合：

::gallery{folder="hero" layout="expose" ratio="1:1"}
::gallery{folder="hero" layout="expose" ratio="16:9" width="100%"}
::gallery{folder="hero" layout="stage" height="50vh"}
::gallery{folder="hero" layout="stage" width="32rem" height="18rem"}

只写 ratio 时，宽默认 min(100%, 36rem)，方块落在阅读栏里。不写 ratio / width / height 时，stage 仍是全视口。

本页样例在仓库内 hero/ 与 plates/（参见沉浸式画廊指南）。许可见 plates/_ATTRIBUTION.md。

你应该看到什么

需要含 cover+video 沉浸与 sized-plate CSS 的 Web Device 运行时。旧构建可能只有封面，或 stage 无 ratio。

更多演示

全视口 stage（一文件夹多 plate）：

::gallery{folder="plates" layout="expose"}

先显示封面静图；有配对视频时，运行时无缝切入静音循环。

Story（高幅滚动，同一配对）：

::gallery{folder="plates" layout="story"}

先显示封面静图；有配对视频时，运行时无缝切入静音循环。

作者控制什么

不必为短循环再开一套站点媒体库。布局或盒子要变时改属性，文件夹不用重导出。

再多一种「演」页面的方式

文件夹静图已经让一组照片成为写作的一部分，而不是旁路。沉浸 plate 再加一点呼吸：封面立刻落下，运动在准备好之后接上。功能故意做窄。Web Device 更大的赌注是：页面是文字与媒体可以一起被表演的地方——用可组合的小能力，而不是每一种效果都开一个新 content type。

写作只需要静图时，就用静图。当 plate 应该像窗外的天气在动，把封面和循环放进同一个文件夹，把布局交给运行时。