SCRIPT — storyboard-sample【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesVoice:Rachel (ElevenLabs)Voice settings:stability 0.35 · similarity 0.75 · style 0.20Voice direction:Confident, warm, a little playful. Sounds like a person, never a reader.头部固定四类元信息含义与取值建议如下 | 字段 | 本例取值 | 作用 | |---|---|---| | Voice | Rachel (ElevenLabs) | 指定 TTS 音色及其来源引擎供生成配音时选用 | | Voice settings: stability | 0.35 | 稳定性越低越有情绪起伏、越高越平稳一致 | | Voice settings: similarity | 0.75 | 与目标音色的相似度 | | Voice settings: style | 0.20 | 风格化程度 | | Voice direction | Confident, warm, a little playful. ... | 给朗读者的总体表演指令属于风格化的 prompt 文本强调像人、不像播音腔Sounds like a person, never a reader | 从写法上可以推断stability / similarity / style 这类带点的键是 ElevenLabs 系引擎的典型参数取值被限定在 0~1 区间而 Voice direction 则是面向 Agent/语音合成模型的自然语言约束。 ### 逐句台词Line 块的时序契约 文件的正文按叙事顺序排列每一句台词对应一个 ## Line N 块块内固定三要素——**配音事件时间Time**、**情绪/表演指示Delivery**、**逐字台词**代码块内、即后续 TTS 的朗读原文 markdown ## 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.时间区间用半开区间起始 – 结束s表示0.0–3.0s 与 3.0–7.0s 精确衔接无重叠、无缝隙恰好与对应帧的时长一一咬合。标题中的(Frame N)后缀则给出了台词与分镜的显式关联。这正呼应 STORYBOARD.md frontmatter 里那一行自述voice: Rachel — 5 lines from SCRIPT.md。台词 ↔ 帧 ↔ 时间轴一段 5 帧的完整叙事弧把 SCRIPT.md 的 5 句台词与 STORYBOARD.md 的 5 帧对齐可以整理出整支 19 秒广告片CTA 帧在 16s 后的完整结构Line帧 / 叙事角色SCRIPT 时间帧时长台词朗读原文Line 1Frame 1 — Hook钩子0.0–3.0s3sShip a launch video in an afternoon.Line 2Frame 2 — The problem痛点3.0–7.0s4sThe old way? Prompt, wait twenty minutes, get something that misses.Line 3Frame 3 — The feature方案7.0–12.0s5sYou lock the story first — then it animates.Line 4Frame 4 — Proof证明12.0–16.0s4sFewer re-renders. More finished videos.Line 5Frame 5 — CTA行动号召16.0–19.0s3sTry it: npx hyperframes.在 STORYBOARD.md 侧每个帧以同样的序号组织frontmatter 记录了整支片子的全局方向--- format: 1920x1080 message: Ship a launch video in an afternoon arc: Hook → Problem → Solution → Proof → CTA audience: indie devs on X voice: Rachel — 5 lines from SCRIPT.md ---随后每一帧都是一个元数据列表 一段叙述文字例如 Frame 1## Frame 1 — Hook - scene: Big type punches in on the beat - duration: 3s - poster: 2s - transition_in: cut - status: animated - voiceover: Ship a launch video in an afternoon. - src: compositions/frames/01-hook.html Open cold on the promise. ...逐字段含义由 StoryboardFrame 类型给出权威解释scene—— 关键瞬间的一句话视觉描述即接触网格图块下的 captionduration—— 帧时长按6s这样的字符串解析成durationSeconds解析失败不抛错只记 warningposter—— 接触网格上代表该帧的定格展示点跳过开场动画后的代表时间如2s缺省时回退到启发式推断transition_in—— 进入本帧的转场样例里四种切换都用到了cut、crossfade、wipestatus—— 生命周期状态见下文voiceover—— 该帧的旁白行注意当 SCRIPT.md 存在时它只是导览副本src—— 指向帧 HTML 子合成的项目相对路径元数据下方的正文段落narrative—— 给 Agent/创作者看的创作意图说明。三种 statusoutline → built → animated状态机由核心包定义types.ts 中FrameStatus outline | built | animated缺省即outline。UI 展示层对每个状态的语义做了精确收口frameStatus.ts状态含义UI 原文视觉样例中的帧outline仅有文字计划尚未构建 HTML 帧灰色 chip/dotFrame 505-cta.html 缺席built已构建静态 HTML 关键帧但尚未动效化天蓝Frame 3、Frame 4animated已打关键帧成动画将拼入最终成片翠绿Frame 1、Frame 2frameStatus.ts注释还点明了阶段推进规则The lifecycle order an agent advances each frame through即 Agent 逐帧执行outline → built → animatedStudio 据此渲染进度。docs 同样提醒status 只是进度信息progress information不代表帧已获准通过。从文字到可播放时间轴index.html 如何缝合帧SCRIPT.md 只负责念什么、什么时候念真正把帧播起来的是 index.html。它以一个主合成容器data-composition-idmaindata-duration16包住 4 个帧节点每个节点用三个关键属性把 SCRIPT/STORYBOARD 里的时间契约翻译成运行时div idframe-2 classscene>script (function () { const tl gsap.timeline({ paused: true }); const h [data-composition-idframe-01-hook] .headline; tl.fromTo(h, { opacity: 0, scale: 0.86 }, { opacity: 1, scale: 1, duration: 0.6, ease: back.out(1.4) }, 0.1); tl.to(h, { scale: 1.04, duration: 2, ease: none }, 0.7); window.__timelines window.__timelines || {}; window.__timelines[frame-01-hook] tl; })(); /script主合成在页脚同样初始化了一个空的main时间线paused: true由播放器负责按data-start /># SCRIPT — project **Voice:** voice name (engine) **Voice settings:** stability 0.35 · similarity 0.75 · style 0.20 **Voice direction:** 一句话表演指令明确语气与不要念稿 ## Line 1 — Hook (Frame 1) **Time:** 0.0 – 3.0s **Delivery:** 这一句的情绪与落点 逐字台词与 STORYBOARD.md Frame 1 的 voiceover 一致 ## Line 2 — … (Frame N) **Time:** 3.0 – 7.0s ← 与上一句结束时间无缝衔接 **Delivery:** … 逐字台词【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SCRIPT — storyboard-sample
SCRIPT — storyboard-sample【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesVoice:Rachel (ElevenLabs)Voice settings:stability 0.35 · similarity 0.75 · style 0.20Voice direction:Confident, warm, a little playful. Sounds like a person, never a reader.头部固定四类元信息含义与取值建议如下 | 字段 | 本例取值 | 作用 | |---|---|---| | Voice | Rachel (ElevenLabs) | 指定 TTS 音色及其来源引擎供生成配音时选用 | | Voice settings: stability | 0.35 | 稳定性越低越有情绪起伏、越高越平稳一致 | | Voice settings: similarity | 0.75 | 与目标音色的相似度 | | Voice settings: style | 0.20 | 风格化程度 | | Voice direction | Confident, warm, a little playful. ... | 给朗读者的总体表演指令属于风格化的 prompt 文本强调像人、不像播音腔Sounds like a person, never a reader | 从写法上可以推断stability / similarity / style 这类带点的键是 ElevenLabs 系引擎的典型参数取值被限定在 0~1 区间而 Voice direction 则是面向 Agent/语音合成模型的自然语言约束。 ### 逐句台词Line 块的时序契约 文件的正文按叙事顺序排列每一句台词对应一个 ## Line N 块块内固定三要素——**配音事件时间Time**、**情绪/表演指示Delivery**、**逐字台词**代码块内、即后续 TTS 的朗读原文 markdown ## 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.时间区间用半开区间起始 – 结束s表示0.0–3.0s 与 3.0–7.0s 精确衔接无重叠、无缝隙恰好与对应帧的时长一一咬合。标题中的(Frame N)后缀则给出了台词与分镜的显式关联。这正呼应 STORYBOARD.md frontmatter 里那一行自述voice: Rachel — 5 lines from SCRIPT.md。台词 ↔ 帧 ↔ 时间轴一段 5 帧的完整叙事弧把 SCRIPT.md 的 5 句台词与 STORYBOARD.md 的 5 帧对齐可以整理出整支 19 秒广告片CTA 帧在 16s 后的完整结构Line帧 / 叙事角色SCRIPT 时间帧时长台词朗读原文Line 1Frame 1 — Hook钩子0.0–3.0s3sShip a launch video in an afternoon.Line 2Frame 2 — The problem痛点3.0–7.0s4sThe old way? Prompt, wait twenty minutes, get something that misses.Line 3Frame 3 — The feature方案7.0–12.0s5sYou lock the story first — then it animates.Line 4Frame 4 — Proof证明12.0–16.0s4sFewer re-renders. More finished videos.Line 5Frame 5 — CTA行动号召16.0–19.0s3sTry it: npx hyperframes.在 STORYBOARD.md 侧每个帧以同样的序号组织frontmatter 记录了整支片子的全局方向--- format: 1920x1080 message: Ship a launch video in an afternoon arc: Hook → Problem → Solution → Proof → CTA audience: indie devs on X voice: Rachel — 5 lines from SCRIPT.md ---随后每一帧都是一个元数据列表 一段叙述文字例如 Frame 1## Frame 1 — Hook - scene: Big type punches in on the beat - duration: 3s - poster: 2s - transition_in: cut - status: animated - voiceover: Ship a launch video in an afternoon. - src: compositions/frames/01-hook.html Open cold on the promise. ...逐字段含义由 StoryboardFrame 类型给出权威解释scene—— 关键瞬间的一句话视觉描述即接触网格图块下的 captionduration—— 帧时长按6s这样的字符串解析成durationSeconds解析失败不抛错只记 warningposter—— 接触网格上代表该帧的定格展示点跳过开场动画后的代表时间如2s缺省时回退到启发式推断transition_in—— 进入本帧的转场样例里四种切换都用到了cut、crossfade、wipestatus—— 生命周期状态见下文voiceover—— 该帧的旁白行注意当 SCRIPT.md 存在时它只是导览副本src—— 指向帧 HTML 子合成的项目相对路径元数据下方的正文段落narrative—— 给 Agent/创作者看的创作意图说明。三种 statusoutline → built → animated状态机由核心包定义types.ts 中FrameStatus outline | built | animated缺省即outline。UI 展示层对每个状态的语义做了精确收口frameStatus.ts状态含义UI 原文视觉样例中的帧outline仅有文字计划尚未构建 HTML 帧灰色 chip/dotFrame 505-cta.html 缺席built已构建静态 HTML 关键帧但尚未动效化天蓝Frame 3、Frame 4animated已打关键帧成动画将拼入最终成片翠绿Frame 1、Frame 2frameStatus.ts注释还点明了阶段推进规则The lifecycle order an agent advances each frame through即 Agent 逐帧执行outline → built → animatedStudio 据此渲染进度。docs 同样提醒status 只是进度信息progress information不代表帧已获准通过。从文字到可播放时间轴index.html 如何缝合帧SCRIPT.md 只负责念什么、什么时候念真正把帧播起来的是 index.html。它以一个主合成容器data-composition-idmaindata-duration16包住 4 个帧节点每个节点用三个关键属性把 SCRIPT/STORYBOARD 里的时间契约翻译成运行时div idframe-2 classscene>script (function () { const tl gsap.timeline({ paused: true }); const h [data-composition-idframe-01-hook] .headline; tl.fromTo(h, { opacity: 0, scale: 0.86 }, { opacity: 1, scale: 1, duration: 0.6, ease: back.out(1.4) }, 0.1); tl.to(h, { scale: 1.04, duration: 2, ease: none }, 0.7); window.__timelines window.__timelines || {}; window.__timelines[frame-01-hook] tl; })(); /script主合成在页脚同样初始化了一个空的main时间线paused: true由播放器负责按data-start /># SCRIPT — project **Voice:** voice name (engine) **Voice settings:** stability 0.35 · similarity 0.75 · style 0.20 **Voice direction:** 一句话表演指令明确语气与不要念稿 ## Line 1 — Hook (Frame 1) **Time:** 0.0 – 3.0s **Delivery:** 这一句的情绪与落点 逐字台词与 STORYBOARD.md Frame 1 的 voiceover 一致 ## Line 2 — … (Frame N) **Time:** 3.0 – 7.0s ← 与上一句结束时间无缝衔接 **Delivery:** … 逐字台词【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考