Communitygithub.com

单图运镜讲稿

做一份藏在同一张插画里的讲稿:镜头推近、沿路径滑行再拉远,字卡在落地之后才出现。

单图运镜讲稿 是什么?

故事的每一站都是同一张图里的一个位置。页面自己驱动镜头,所以去向地图能变成可走动的讲述,而不是一叠翻页幻灯片。

兼容平台~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/odafeng/open-slide-scene-deck/tree/HEAD

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

场景幻灯片:一图一镜头

场景幻灯片是一种全部内容都存在于单幅插图中的演讲方式。每个“页面”就是同一个场景上的一个镜头位置。镜头会推近到某个细节,沿着绘制路径滑向下一个对象,在房间中跳跃,最后在结尾拉回全景。文字显示在屏幕空间的卡片上,并且在镜头稳定、停顿一个节拍之后才会出现,这样观众在阅读文字之前能先看到场景。

本技能是使用 @open-slide/core 2.2 制作一个包含 22 个镜头、时长 20 分钟的会议演讲的方法。open-slide 没有镜头 API,因此镜头在页面组件内部驱动。template/index.tsx 是完整的引擎和七个示例镜头;复制后替换场景、锚点和卡片即可。

何时使用

  • 演讲有一个具体的场所:教室、手术室、工厂车间、城市街区。该场所中的物体对应演讲的各个节点。
  • 演讲者希望拥有 Prezi 的感觉(拉近讲细节、拉出看全貌、滑向下一个点),但不想用 Prezi。
  • 镜头数量为 15 到 25 之间。少于这个范围用普通幻灯片就够了;多于这个范围镜头移动会变成背景噪音。

不适用于数据密集的幻灯片、现场演示,或任何需要由他人在 PowerPoint 中编辑的场合。它是网页,只能在 Chrome 中运行。

工作顺序

  1. 先做分镜。 一个场景、一系列节点、每个节点一个镜头位置和一张卡片,以及你仍需准备的真实材料(截图、日志、照片)。在开始美术或代码之前写下来。references/storyboard.md 包含表格以及与演讲者协商的问题。
  2. 制作场景。 生成三张全景风格候选图,让演讲者选择,然后通过图生图编辑修复图片(移除物体、添加故事需要的东西、保留屏幕空白)。只有当镜头距离世界坐标中的像素在几百像素以内时才生成特写图。参见 references/art.md。
  3. 用网格测量锚点, 永远不要在全景图上凭目测。scripts/measure-grid.sh 以 100 像素网格裁剪图片区域;对于任何需要让截图恰好居中的情况,使用 3 倍角点裁剪。参见 references/art.md。
  4. 基于模板构建幻灯片。 添加一个 ViewKey、一个 VIEWS 条目(镜头、HUD 模式、模糊、停顿)、一个 HudBody 分支、一个页面、一条注释。引擎不变。references/engine.md 解释了每个参数。
  5. 验证,不要凭眼感。 在带界面的 Chrome 中运行 scripts/perf-probe.cjs:所有页面变化中零长任务且帧间隔不大于 50 ms 是标准。测量时不截图;截图耗费 300 ms,会表现为卡顿。参见 references/verification.md。
  6. 录制导览并在手机上观看。 scripts/record-walkthrough.cjs 按每个镜头停留时间播放并录制;转换为 mp4 后发送到演讲者的手机。在原始项目中,每一轮反馈都来自这个循环,而不是浏览器。
  7. 从构建文件夹演示。 scripts/present.command 构建、提供 dist/ 服务,并同时打开幻灯片和演讲者窗口(注释、计时器、下一页)。在会场投影仪上用演讲者本人的笔记本测试。参见 references/presenting.md。

付费买来的规则

  • 在卡片出现之前先稳定场景。卡片要等到镜头着陆并额外等待 hold ms(默认 1 秒)后才显示。如果卡片在镜头移动的 70% 时就弹出,场景就变成了桌面背景。
  • 特写镜头必须位于其特写图内部。如果视野比特写图更宽,放大后的基础图片会从边缘渗透进来,看起来像阴影或幽灵之手。
  • 截图通过单应性矩阵映射到屏幕内,并紧贴边框内边缘。以 3 倍分辨率测量四个角点。
  • 远距离跳跃不需要中间页面。van Wijk 路径会自动上拉然后俯冲;将远端的节点放在图片的两端,让它自由飞行。
  • 卡片上使用平实的语言。图片承担了一半的信息;卡片只表达一个想法,最多四行。
  • 对此功能永远不要使用 MorphElement。它会在动画开始之前复制主线程上所有后代的计算样式;一个真实的幻灯片因此冻结了五秒钟。参见 docs/adr/0001-drive-the-camera-in-page.md。

文件夹内容

路径说明
template/index.tsx引擎和七个示例镜头。复制到 slides/<id>/index.tsx。
template/assets/示例场景(2752 × 1536)、特写图、应用截图。替换它们。
references/engine.md镜头、HUD、停顿、特写图及透视屏幕的工作原理;如何添加镜头。
references/storyboard.md分镜表格及在美术之前需要做的决定。
references/art.md提示生成场景、修复、测量锚点、特写图。
references/verification.md性能探测、导览录制、手机审查循环。
references/presenting.md构建、预览、演讲者窗口、启动器、备选方案。
references/pitfalls.md曾经出过一次错的所有事情,避免再次发生。
scripts/perf-probe.cjs, record-walkthrough.cjs, measure-grid.sh, genimg.py, genedit.py, present.command。
docs/adr/为什么镜头实现在页面内,为什么 HUD 要等待。

与演讲者合作

按以下顺序与演讲者一起决定:节点的故事顺序;远距离跳跃是否经过全景(会自动经过);他们提供哪些真实材料以及何时提供;美术风格(展示三种,选择一种);图片中不能出现什么。将每个决定写入分镜文档并标注日期。然后构建整个幻灯片、录制并发送视频。预期会有三轮或四轮批注,每轮大约涉及五个镜头。

相关技能