talk-in-slides · 示例 deck
把演示做成一部==短片==，而不是一叠幻灯片
一张长画布、一台会飞的相机、每一次点击只多说一件事。
talk-in-slides · 示例 deck
一张长画布、一台会飞的相机、每一次点击只多说一件事。
第一部分
所有页面摆在同一张长纸上。翻页时纸不动，镜头在动。
镜头
相邻两页之间平移；跨度很大时，镜头先拉远再推近，观众始终知道自己在哪。
data-cam="dx,dy,z; …" 每步一组
节奏
读完标题就知道这页的结论，正文只负责证明。
一个数字、一张图、一段录屏，选最有力的那个。
把观众该带走的那句话，放在最后一下点击里。
最后一下恢复全部：三张卡合起来，就是一页的结构。
一个数字撑起一页
进入这一页时数字会从 0 滚到目标值；倒退或跳页时直接显示终值，不会乱跳。
示例数据 · 来源与口径写在这一行
图表
最高
41%
分步揭示的记忆度最高：观众只需要跟上一个新信息。
示例数据 · 单位 % · 来源行用 .source
对照
| 能力 | 传统幻灯片 | talk-in-slides |
|---|---|---|
| 翻页 | 换一张图 | 镜头在一张画布上飞 |
| 分步揭示 | 逐项出现 | 状态由（页，步）决定，可倒退可跳转 |
| 录屏与动画 | 嵌入视频 | 到那一步才从头播放，离开即暂停 |
| 分发 | 发文件 | 一个链接，手机上也能点着看 |
写法
元素声明自己"第几步出现"，引擎负责其余一切。
<!-- 第 0 步就在 --><h2 class="h2 rise" data-in="0"><!-- 第 1 步出现 --><div class="card pop" data-in="1"><!-- 第 2 步起变暗 --><p data-state="dim@2">
质感不是加出来的，是一样一样拿掉之后剩下的。
示例引语 替换成真实出处
图 1把 <img> 或 <video> 放进 .screen 即可
录屏
视频到它出现的那一步才从头播放，离开这一页就暂停并回到开头。
流程
每页一句断言，先在纸上过一遍
从版式库里挑，不发明新版式
决定每一下点击揭示什么
截图、lint、逐页评审
谢谢