Frame 1 — Hook【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesscene: Big type punches in on the beatduration: 3sposter: 2stransition_in: cutstatus: animatedvoiceover: Ship a launch video in an afternoon.src: compositions/frames/01-hook.html对照 [types.ts](https://link.gitcode.com/i/a9eee6b28a8cb819747c37d786f9f12a) 中的 StoryboardFrame每帧支持的全部元数据键为 | 键 | 类型 | 说明 | | --- | --- | --- | | scene | string | 该关键时刻的一句话描述作为联系表瓦片的说明文字 | | duration | string / 秒 | 帧时长如 3s解析为 durationSeconds无法解析时该值为 undefined | | poster | number秒 | 联系表中展示该帧的代表性时刻越过开场动画之后的海报帧缺省时回退到启发式取值 | | transition_in | string | 进入该帧的转场如 cut、crossfade、wipe | | status | outline / built / animated | 帧生命周期状态缺省值为 outline | | voiceover | string | 覆盖该帧的配音台词 | | src | string | 指向帧 HTML 子合成的项目相对路径 | fixture 中五个帧的完整元数据一览 | 帧 | scene | duration | poster | transition_in | status | src | | --- | --- | --- | --- | --- | --- | --- | | 1 Hook | Big type punches in on the beat | 3s | 2s | cut | animated | 01-hook.html | | 2 The problem | A 20-minute timer spins on a stack of rejected takes | 4s | 2.6s | crossfade | animated | 02-problem.html | | 3 The feature in action | Frames line up as a contact sheet | 5s | 3.3s | crossfade | built | 03-feature.html | | 4 Proof | A stat counts up to the payoff number | 4s | 2.6s | wipe | built | 04-proof.html | | 5 Call to action | End card with the wordmark and a one-line CTA | 3s | — | crossfade | outline | 05-cta.html缺失 | 每帧的 narrative 段落补充了画面构思的详细说明例如 Frame 2 写道旧方式提示词、等二十分钟、得到不合预期的结果。计时器旋转的同时一堆被否掉的镜头越堆越高——建立我们要消除的痛点。 ### 2.3 解析容错警告而非报错 解析器对非致命问题未知状态、无法解析的时长、缺失的 src 文件等不会抛错而是以 StoryboardWarning 形式返回含可选的源文件行号 line 与关联帧号 frameIndex见 [types.ts](https://link.gitcode.com/i/123b55ca04927ce8c3873b175bb0c0d6)。这意味着 05-cta.html 缺失不会让整个清单解析失败——分镜视图照样能渲染只是该帧以大纲占位符呈现。 ## 三、SCRIPT.md配套旁白脚本 Storyboard 可以携带一份可选的旁白脚本 SCRIPT.md保存完整配音设定演员、语音参数、逐行时机与演绎指示。它的规范文件名同样在 [types.ts](https://link.gitcode.com/i/02d796a051efb5ba797992045ad0b2dd) 中定义 ts /** Canonical filename for the companion narration script. */ export const SCRIPT_FILENAME SCRIPT.md;fixture 的SCRIPT.md头部声明了配音参数**Voice:** Rachel (ElevenLabs) **Voice settings:** stability 0.35 · similarity 0.75 · style 0.20 **Voice direction:** Confident, warm, a little playful. Sounds like a person, never a reader.每个台词行包含三段信息——时间窗口与帧时间轴对齐、演绎指示delivery与台词原文## Line 1 — Hook (Frame 1) **Time:** 0.0 – 3.0s **Delivery:** Land the promise on the beat. Slight smile. Ship a launch video in an afternoon.五句台词与帧一一对应Hook0.0–3.0s、The problem3.0–7.0s、The feature7.0–12.0s、Proof12.0–16.0s、CTA16.0–19.0s总时长 19 秒。Studio 前端通过GET /api/projects/:id/storyboard拉取清单时若检测到SCRIPT.md存在会把其内容随响应一并返回StoryboardScript.exists / path / content结构见 packages/studio/src/hooks/useStoryboard.ts。四、帧级 HTML 子合成单个关键时刻的动效每个帧是一个自包含的 HTML 文件作为template标签存在内部是 1920×1080 的画布、作用域化的样式与一段 GSAP 时间轴。以 01-hook.html 为例template idframe-01-hook-template div>div idframe-1 classscene >export type FrameStatus outline | built | animated; export const FRAME_STATUSES: readonly FrameStatus[] [outline, built, animated]; export const DEFAULT_FRAME_STATUS: FrameStatus outline;在 storyboard-sample 中可以看到三种状态的完整样本outlineFrame 5——只有创意描述和配音词没有 HTML 文件联系表中以大纲占位符outline placeholder呈现builtFrame 3、4——已有静态/基础 HTML 画面animatedFrame 1、2——已接入 GSAP 时间轴并注册到window.__timelines。这一状态机的价值在于支持渐进式生产先在大纲里锁定故事与台词低成本、可快速评审再逐帧 build 画面、最后 animate 动效。Studio 的分镜网格依据状态渲染不同瓦片普通帧、海报帧、大纲占位相关实现可参见 packages/studio/src/components/storyboard/StoryboardGrid.tsx 与 FramePoster.tsx前端侧对状态的处理逻辑集中在 frameStatus.ts。七、预览与检查两条验证路径fixture 的 README 提供了两条开箱即用的验证命令。1. 在 Studio 中预览分镜视图推荐先跑这条npx hyperframes preview packages/studio/fixtures/storyboard-sample该命令会以storyboard-sample为项目启动 Studio分镜视图读取STORYBOARD.md、加载四个帧的 HTML 子合成并为缺失的 Frame 5 渲染大纲占位。2. 检查 Studio 实际消费的解析结果curl localhost:port/api/projects/id/storyboard | jq【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考