HyperFrames PR-to-Video 帧视觉设计指南用时间码镜头序列替代静态幻灯片【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本指南讲解 HyperFrames 的pr-to-video技能中Step 4帧视觉设计的方法论如何把每一帧故事板STORYBOARD 中的## Frame N从一组效果标签改写成按配音voiceover节奏排布的时间码镜头序列time-coded shot sequence。你将掌握本方法的核心单元、blueprint 实例化的三种姿态Reproduce / Adapt / Compose、代码帧code beat如何复用code-*注册表动画块、行为帧mechanism beat如何发明运行时行为图解以及一套可直接套用的内联布局词汇。读完即可在自己的 PR 解说视频项目中产出节奏正确、绝不前倾堆料的分镜脚本。本方法在整条工作流中的位置在pr-to-video技能见 SKILL.md的八步流程中Step 3 的故事设计story-design.md负责写出每个帧的叙事骨架scene、voiceover、transition_in、叙事字段以及可选的候选 blueprint id。Step 4 的任务是就地丰富这些帧——为每个帧补上它看起来什么样、怎么动写入STORYBOARD.md中对应## Frame N块之后绝不另建文档。关键约束有三条你不写任何 HTML——那属于 Step 5 的 frame workerframe-worker.mdstory 的字段不可改动——scene/voiceover/transition_in/type等叙事字段原样保留PR 视频大部分是被发明的——版式、数字锁版number-lockup、机制图解都需要你设计仅有的两个例外是代码帧使用现成的code-*注册表块和片尾字幕使用真实的贡献者头像。调色板与字体的最终依据是项目的frame.md由 code-editorial 预设生成见 code-editorial 的 FRAME.md布局词汇在本文的Layout一节动作词汇与动作原则见 motion-language.md经过验证的镜头形状见 blueprints-index.md 及blueprints/id.mdcode-*块见 code-vocabulary.md。核心单元时间码镜头序列一帧的视觉层不是效果标签的袋子而是一段按配音节奏排布的时间窗口序列。PR 解说中最常见的失败——看起来像 PowerPoint——根源是前倾front-loadingAgent 在开头约 25% 的时间里就把整个画布全端上桌然后画面就坐死了。而一段对着 VO 写的时间码镜头序列从机制上杜绝了这种失败每个窗口都明确屏幕上有什么、什么在动并且没有任何内容先于配音到达。在 PR 解说视频里开发过程本身就是揭示——diff 代码块在打字机上敲出、before→after 变形、请求重试图解跑起来、影响数据落地。让构建过程本身成为信息。每个帧写成一小撮由台词触发的窗口Scene 1 (0.0–Xs): 只有 t0 时 VO 正在说的内容进入画面——绝不是整个画布 Scene 2 (Xs–Ys): 下一个片段在 VO 提到它时揭示一个文件 chip / 一个 hunk / 一个节点 / 一个数据 … 每个口语提示对应一个窗口——台词要求几个就写几个 Scene N (…–end): 内容已收束保持可读的静止stillness至多轻微 jitter三条硬性纪律揭示节奏对齐配音绝不前倾。这是核心的反 PowerPoint 机制对应 motion-language.md 第二部分规则 2。t0 只显示 VO 当时正在说的内容每一块后续内容——一行、一个文件 chip、一个 hunk、一个数据——都在VO 念到它时揭示把揭示铺开到镜头的后半段尤其是最后的 ~50%。窗口数量 台词要求的口语提示数量。没有固定数量也没有强制的中段唯一的罪过就是把一切在一开始全倒出来。以可读的静止收尾。内容收束后就保持并供人阅读——宁可静止也不要烂动作不要强迫性的镜头漂移、不要偷懒的呼吸缩放、不要在镜头后半段做 pan/push至多一个微小的 jitter 让它保持鲜活规则见 motion-language.md。只有最后一帧有真正的退场其余每帧的退场就是装配器注入的转场story 的transition_in。刻意静止的帧是合法的。内容已揭示、现在静止供人阅读的帧——比如高潮、呼吸点——常常是正确的选择。失败的不是太静而是先堆满再冻结。把静止节拍刻意安排进节奏在## Video direction中分配。选择形状实例化一个 blueprint不要从零发明每个镜头。帧的角色type/beat指向一个被验证过的形状把角色匹配到 blueprint。打开 blueprints-index.md在角色→blueprint 菜单中找到该帧的角色挑选意图最贴合这一拍的那个 blueprintstory 可能已给出候选 id——确认或覆盖它。然后阅读对应的blueprints/id.md它是短小、领域无关、带[slots]槽位和命名 signature move招牌动作的时间码镜头模板。用本帧内容实例化它的[slots]——三种姿态Reproduce复现blueprint 贴合这一拍你的内容能干净地映射到槽位上。填满每个[slot]遵循它的 Scene 时间。Adapt改编_结构_合适但内容 / 表面不合适。用一行说明保留什么 / 改变什么然后写出改编后的 Scene 行。绝不允许丢掉 signature move并且揭示必须对齐 VO 节奏。Compose组合没有 blueprint 贴合这一拍。从 motion-language.md 的动作词汇中构建镜头仍然对齐 VO 节奏揭示。标记blueprint: compose。保留 signature move。无论哪种姿态blueprint 的招牌动作都是镜头的脊柱——把它贯穿到底。代码帧是唯一不为中心件选 blueprint 的地方——code-*块本身就是形状见下文PR code beats。你仍然要为周围的表面写 Scene 序列。你为每个帧添加什么story-design 的## Frame N块已经携带叙事你追加镜头。下面是一个完整示例来自 visual-design.md含 Step 5 worker 会读取的所有轻量标签## Frame 4 — The retry fix - scene: the request() retry hunk lands on the navy code surface ← 仅在能读得更锐利时微调 - voiceover: … ← story 的保留 - transition_in: crossfade ← story 的保留 - type: diff ← story 的PR 原生 - persuasion: Show-the-change - beat: clarity - blueprint: compose ← 代码帧组合周围表面代码动画由块自己拥有 - focal: code-diff — the request() retry block, ~6 lines ← 你添加code-* 块就是 focal - roles: code surface foreground subject · file header supporting · dim grid background - sfx: keyclack-soft, soft-confirm Scene 1 (0.0–1.0s): the navy Code Surface window seats in (scale-in soft shadow), file header client/request.ts types on — Centered, ~60% of frame. Slow push-in underneath. Scene 2 (1.0–3.2s): the camera settles onto the hunk; the code-diff block runs its own before→after on its cadence (the worker fits it to the duration) — you do not re-specify the code motion. Scene 3 (3.2–4.5s): a coral underline draws on the changed line as the VO names it; a 6/−2 count-up ticks beside the header; settles and holds STILL.轻量标签的语义blueprint:—— 你实例化的 id带(Reproduce)/(Adapt)或compose。每帧一个 id。focal:—— 概念 / 机制帧中被发明的主角一个 hero 词、一个图解、一个数字锁版代码帧中则是**code-*块**命名块 hunk片尾字幕帧中是头像行。roles:—— 每个元素的角色foreground subject前景主体·background全出血压暗 30–50%·supporting辅助。被发明的元素由你设计唯一真实的素材是片尾字幕的assets/login.png头像story 的asset_candidates中命名。sfx:—— 命名这一拍想要的声音音频脚本的fetch-sfx会取回它、装配器挂到根节点——你只命名绝不内嵌audio。布局与动作在每条 Scene 行内联声明——把模板 / 密度 / 深度作为它坐在哪里的一部分说出来把动作从 motion-language.md 的词汇中命名出来让它以长尾曲线默认power3落定。永远不写 px / scale / 缓动曲线 / ms那是 worker 的事。PR code beats命名一个code-*块对于diff/before_after/ 代码帧中心件是现成的code-*注册表动画块而不是手工发明的 HTML 视觉——这是每个视觉都要发明的唯一例外。在scenefocal中命名块。挑选贴合这一拍的块before→after code-diff重构/重命名 code-morph新代码敲入 code-typing聚焦一行 code-highlight走读长文件 code-scroll英雄式揭示 code-3d-extrude/code-particle-assemble。完整映射见 code-vocabulary.md。同时命名 hunk如therequest()retry block, ~6 lines。块就是focalStep 5 的 worker 会安装它并用真实 diff 填充。块拥有代码动画你的 Scene 编排周围的 Code Surface。块本身就是开发节拍diff / 打字机 / 变形按它自己的节奏播放——worker 只把它适配到帧的data-duration让长代码块不超时。你的 Scene 窗口让代码编辑风code-editorial的Code Surface围绕它动起来海军蓝窗口坐入、文件头敲入、相机落到 hunk 上、N/−M的count-up、珊瑚色下划线画到落定的那一行。内联命名这些动作不要重新指定代码动画本身。代码帧通常blueprint: compose块就是形状。安装方式由 code-vocabulary.md 确认对应packages/cli/src/commands/add.tsnpx hyperframes add code-diff # 写入 compositions/code-diff.html块是自包含的子合成内联引擎一个被引擎按帧 seek 的暂停 GSAP 时间线以子合成 clip 方式挂载进帧div contenteditable="false">【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考