mcpField
S
slideshow

slideshow

github.com/heygen-com安全74.7k434.9k 次安装今天更新
代码仓库

关于 slideshow

slideshow 是用于将 HyperFrames 合成制作并展示为交互式幻灯片的技能。它定义幻灯片元数据、片段和分支热点，并指导验证及浏览器演示，而非导出 MP4。

主要功能

  1. 01在合成场景中定义幻灯片
  2. 02设置片段和分支热点
  3. 03验证幻灯片目标及时间
  4. 04在浏览器中演示幻灯片
  5. 05支持演讲者备注和导航

适用场景

  1. 01将 HyperFrames 合成改为幻灯片
  2. 02通过热点创建分支演示
  3. 03检查幻灯片片段和场景链接
  4. 04共享观众标签页进行演示

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/heygen-com/hyperframes --skill slideshow

安装后在 Claude Code 中输入/slideshow确认已加载。

附带文件references/standalone-harness.md

详细介绍

**插件安装：**在运行设置或时效性检查命令之前，如果此技能位于 HyperFrames 插件中，请遵循插件执行规则。

HyperFrames 幻灯片

幻灯片放映是一个普通合成（适用 /hyperframes 契约），再加上一个 JSON 岛，用于说明哪些场景是幻灯片以及它们如何连接。交付内容是一套可运行的幻灯片，而不是 MP4。

与视频项目的区别

  • 每张幻灯片都是合成文件中的顶层场景：data-composition-id、data-start、data-duration、data-label、data-width、data-height。没有包裹它们的主根合成。
  • 每个合成只有一个岛，位于 <body> 顶部附近，直接写在 HTML 中（绝不通过脚本生成；present 会静态读取文件）：
<script type="application/hyperframes-slideshow+json">
  {
    "slides": [
      { "sceneId": "hook", "notes": "Pause on the number." },
      {
        "sceneId": "problem",
        "fragments": [11.0, 15.0],
        "hotspots": [
          {
            "id": "h1",
            "label": "Where does $40B come from?",
            "target": "market-detail",
            "region": { "x": 55, "y": 60, "w": 40, "h": 20 }
          }
        ]
      }
    ],
    "slideSequences": [
      { "id": "market-detail", "label": "Market sizing", "slides": [{ "sceneId": "mkt-math" }] }
    ]
  }
</script>
  • sceneId 等于某个场景的 data-composition-id（也可以指定 startTime/endTime）。notes 仅供演讲者使用。ttsScript、ttsAudioUrl 和 ttsDurationMs 目前保留但尚未接入。
  • 片段使用绝对时间线时间（与 data-start 使用同一时钟，而非幻灯片内的偏移量），且必须位于幻灯片的 [start, end] 范围内。导航会跳转，不会播放：每个停留状态在时间线直接跳转到该时刻时都必须显示正确。没有片段的幻灯片会在其内部某个静止帧进入。
  • 分支幻灯片是普通场景，只列在 slideSequences 中，绝不放入主 slides 数组。热点的 target 是序列 id；region 是百分比框（省略时表示全屏按钮）。返回时会回到包含该热点的幻灯片。
  • 面向观众、必须阅读的文字，在 1920×1080 分辨率下至少为 40 px。在手工制作任何具名视觉效果之前，先运行 npx hyperframes catalog --query "<the visual, in English>" --json 搜索；该命令会对整个注册表排序，且无需安装任何内容。

移植现有页面

  • 保留源页面的外观、运动、交互和媒体行为；移植其小部件、播放器和可视化组件，不要用近似效果替代。
  • 页面原本通过滚动、滚轮或摄像机图层驱动的运动，应改为在幻灯片导航时从一个焦点移动到下一个焦点，绝不能让页面看起来在滚动。每次移动都应直接完成，不要添加源页面没有的反向运动。
  • 屏幕截图、帖子、图表、代码以及任何含有可读文字的图像都是证据：保持其宽高比（object-fit: contain），并检查四条边是否有裁切。
  • 每个复制的 <video>/<audio> 都需要 data-start 和 data-duration（播放声音时还需设置 data-has-audio="true"），且不能设置 preload="none"。自定义媒体控件应读取原生元素的事件和 currentTime，绝不能使用自己的计时器。
  • 堆叠隐藏的幻灯片必须同时设置 opacity: 0、visibility: hidden 和 pointer-events: none，否则不可见图层会拦截点击。

展示并交接

  • 切勿将演示文稿渲染为 MP4：render 只保留第一个场景，并会静默截断。需要静帧时，对每张幻灯片运行 snapshot --at。
  • 反复运行 npx hyperframes check --json，直到检查通过。幻灯片规则会检查每个 sceneId 是否都能解析、每个热点的 target 是否存在、片段是否位于所属幻灯片内，以及主线幻灯片是否重叠。
  • 运行 npx hyperframes present <project-dir> 来展示，并交接它输出的网址：“点击 Present，或按 P，打开观众标签页。”
  • 项目根目录中的 index.html 应能打开并正常运行演示文稿：在 <hyperframes-player src="…"> 外层包上 <hyperframes-slideshow>；如有需要，将原始合成内容放在子文件夹中。该组件负责 Present（P）、上一张/下一张、计数器、全局静音、全屏、滑动、热点、演示者备注（可编辑，按演示文稿保存）以及在离开幻灯片时停止媒体。不要自行实现这些功能。
  • 屏幕共享：在 Google Meet 中共享观众标签页，这样即使在后台也会继续渲染。在 Zoom 中，将观众标签页拖到独立窗口中并共享该窗口；被完全遮挡的窗口会停止运行。
  • 从不带 present 的裸播放器包打开演示文稿时，需要使用变通方案：references/standalone-harness.md。

评论

支持 Markdown