HyperFrames 产品发布视频分帧视觉设计基于时间编码的镜头序列方法【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes导读本文讲解 HyperFrames 产品发布视频工作流中Step 4Frame Visual Design分帧视觉设计的完整方法论。你将掌握如何把一个叙事骨架STORYBOARD.md中的 Scene / voiceover / transition_in / role 字段升级为逐帧、逐场景、逐秒可执行的时间编码镜头序列学会从蓝图库中为每个帧挑选并实例化已验证的镜头形状理解绝不前置堆料front-loading这一反 PowerPoint 机制并写出让整支视频视觉统一的## Video direction不变式区块。读完即可独立产出可直接交给 Step 5 帧工人frame worker实现的分帧设计。1. 视觉设计的职责边界你在本步骤中写什么、不写什么在 HyperFrames 的产品发布工作流见 skills/product-launch-video/SKILL.md中Story 设计Step 3见 skills/product-launch-video/references/story-design.md已经为每个帧写好了骨架scene场景、voiceover旁白、transition_in入场转场、叙事字段以及asset_candidates素材候选和可选的候选蓝图 id。Step 4 的视觉设计只负责回答一个问题这个帧看起来怎样、怎么动。具体而言visual-design.md本文所依据的核心文档位于 skills/product-launch-video/references/visual-design.md明确划定了以下边界你写的内容每个帧的时间编码镜头序列time-coded shot sequence——一段被导演过的、覆盖该帧整个时长的镜头而不是一张静态幻灯片。你绝不写 HTML那是 Step 5 帧工人的工作工人角色见 skills/product-launch-video/sub-agents/frame-worker.md。你绝不读capture/目录素材选择是 Story 的职责你只消费asset_candidates。你不选择素材、不命名转场asset_candidates与transition_in都属于 Story。你不发明调色板与字体frame.mdStep 2 采用的设计系统产物是你的颜色与字体真相truth按角色引用绝不臆造。这种职责切分意味着视觉设计层产出的是一份纯意图文档布局与运动只写到命名级别具体的 px、缓动曲线、毫秒与 stagger 留给 Step 5 的规则库skills/hyperframes-animation/rules/去解析。2. 核心单元时间编码镜头序列2.1 为什么是镜头序列而不是效果标签袋一个帧的视觉层是一系列与旁白同步的时间窗口序列而不是一堆效果标签的集合。文档明确指出那种读起来像 PowerPoint 的失败模式是前置堆料front-loadingAgent 把整个画布在开头约 25% 的时间里全部推上屏幕然后画面就僵在那里旧式表示法——一堆扁平的效果名加一段散文备注——会在入场时把一切都触发掉剩下全是空白。一个对着旁白VO书写的时间编码镜头序列会让这种失败变得不可能每个时间窗口都说明屏幕上有什么、什么在动并且任何元素都不会在旁白提到它之前出现。2.2 镜头序列的书写范式每个帧写成若干由口播台词触发的窗口Scene 1 (0.0–Xs): 只让 t0 时旁白正在说的内容入场——绝不是整个画布 Scene 2 (Xs–Ys): 旁白点到下一块时一行 / 一张卡片 / 一个数字 / 一个图标它才揭示 … 每个口播提示一个窗口——旁白要几个就几个 Scene N (…–end): 内容已落定保持可读状态静止至多细微抖动三条硬性纪律贯穿始终揭示节奏跟随旁白绝不前置堆料。这是核心的反 PowerPoint 机制详见 skills/product-launch-video/references/motion-language.md Part 2 规则 2。在 t0 只显示旁白此刻正在说的内容后续每一块——一行文字、一张卡片、甚至一个 h1——都在旁白点名它时才揭示把揭示动作铺满整个镜头尤其是后 ~50%。窗口数量 旁白需要的口播提示数两拍的对白是两个窗口五项特性的清单是五到六个窗口。没有固定数量也没有强制性的中段唯一的罪过就是把一切在一开始全部倒出。以保持可读收尾。内容一旦落定就保持并阅读——宁愿静止也不要糟糕的运动不要强加的镜头漂移、不要懒散的呼吸感、不要后半段的摇镜/推镜至多细微抖动让它保持活力。在短镜头上最后的揭示与保持是同一个窗口——保持不是一个独立存在的强制性幕次。只有最后一帧有真正的退场其余每一帧的退场都是装配层转场Story 的transition_in。刻意保持的帧是合法的。内容已经揭示、现在静止阅读的帧——高潮、喘息点——是正当且往往正确的选择。失败从来不是太静止而是前置堆料然后冻结一切在约 25% 处倒完没有任何东西跟随旁白。应在## Video direction中刻意分配保持拍子以调节节奏让视频不至于处处一样繁忙。2.3 为什么窗口 口播提示数对生成式工作流至关重要story-design.md中有一条与之配套的写作规则旁白应写成离散的提示cues而不是一口气的长句。原因正如该文档第 4 节所述Step 5 会在旁白点名每个画面元素时揭示它反 PowerPoint 机制。一行有清晰短语边界的台词——Content, sentiment, engagement — in one place——会免费把揭示节奏交给镜头一个单一长从句则让帧没有东西可以跟随。换言之视觉设计层的窗口划分能否成立取决于 Step 3 就把旁白写成了 cue 化的形态——两层的配合是系统性的而不是偶然的。3. 选择形状实例化蓝图Blueprint不要从零发明每一个镜头。帧的角色它的type/beat指向一个已被验证的形状3.1 三步实例化法第 1 步把角色匹配到蓝图。打开 skills/hyperframes-animation/blueprints-index.md在role→blueprint 菜单中找到该帧的角色挑选意图契合这个拍子的蓝图Story 可能已命名一个候选 id——确认它或覆盖它。然后阅读对应的blueprints/id.md那是一份简短、产品无关、带[slots]的时间编码镜头模板并有一个具名的标志性动作signature move——即让这个形状之所以成立的那个东西SVG 圆环、推-穿过、原地 token 交换。第 2 步用本产品的素材实例化它的[slots]三种姿态Reproduce复刻——蓝图契合这个拍子你的内容能干净地映射到它的槽位上。用本产品的词 / 素材 / 数字填满每个[slot]跟随它的 Scene 时间写出结果 Scene 行。Adapt改编——_结构_契合但内容 / 素材数量 / 表面不符或你想要更新鲜的表面以避免模板化。用一行说明保留什么 / 改变什么然后写出改编后的 Scene 行。你可以扩展或变化但绝不能丢掉标志性动作丢了就是你选错了蓝图并保持揭示与旁白同步——绝不能把形状坍缩成一次前置堆料。Compose自组——没有蓝图契合这个拍子。从 skills/product-launch-video/references/motion-language.md 的运动词汇表中构建镜头仍要把揭示铺满整个镜头并与旁白同步绝不在 t0 一次性触发一切。标记blueprint: compose。第 3 步保住标志性动作。无论哪种姿态蓝图文件里具名的标志性动作都是镜头的脊梁——它通常落在镜头最关键的那次揭示上。把它贯穿到底。蓝图自己的 Scene 行、运动词汇与rule mapping是你的原材料你是在选择形状并把产品铸进它而不是复制一份工程规格。3.2 蓝图库速览22 个已验证形状blueprints-index.md记载蓝图是从两轮挖掘中的178 条黄金产品发布片段外加 13 个按同一 brief 格式反向翻译的遗留蓝图逆向工程出来的产品无关镜头模板。每个模板都编码了整个镜头的完整时长——揭示与口播同步、不在 t0 倾倒——因此结构上实例化一个蓝图就能让内容持续到达而不是冻结。以下为其中的代表蓝图 id服务角色典型时长形状意图kinetic-type-beatsHook、Problem、Product_Intro、Benefits、CTA、Brand_Outro3.0–12.9s扁平居中粗体字镜头运动就是文字本身的变化原位 token 交换 / 多拍子陈述构建——6 个角色的工作马dataviz-countupHook、Problem、Product_Intro、Key_Feature、Social_Proof4–12s数字与图表当主角镜头推-穿过它们落在一个英雄指标上详见 skills/hyperframes-animation/blueprints/dataviz-countup.mdtypewriter-revealHook、Brand_Outro3.6–7s光标像真人一样打字并编辑一行然后坍缩弹出品牌落点camera-journeyBenefits、Key_Feature5.6–11.1s真实视口相机就是讲述者跨一个连续世界的多段动机旅程cursor-ui-demoProduct_Intro、Key_Feature、Hook、Benefits4.0–12.9s可见的自定义光标驱动重建的应用 UI 完成点击/悬停/拖拽prompt-type-submit-generateHook、Product_Intro、Key_Feature、CTA5.2–12sAI 时代演示镜头提示词输入真实产品输入框机器作答agent-progress-theaterKey_Feature4.2–11.6sAgent 工作被表演为工作状态剧场加载器旋转、状态短语切换、回执级联comparison-splitKey_Feature4–6s两个等权项目从两侧入场带镜像 3D 翻书倾斜并排保持overwhelm-surroundProblem6–9s过量感靠积累可辨识表面组装、密度标记图标散入、中心变成观看者自己的头像、元素从四面合拢titlecard-revealBenefits、Social_Proof、CTA、Product_Intro3–5s安静的喘息/落点拍子——一张干净标题或品牌/证明卡片只用一个克制的动作揭示然后静止保持菜单是软性的故事真相优先。Story 设计在产品自己的拍子需要那个形状时才伸手去取——它只是建议一个验证过的形状绝不规定哪些拍子必须存在。每个角色有 4–11 个选项如果都不契合就自由自组菜单不是清单。3.3 工作示例dataviz-countup的 Problem 变体为说明蓝图 时间编码模板 槽位 标志性动作看 skills/hyperframes-animation/blueprints/dataviz-countup.md 的 Problem 变体push-THROUGHScene 1居中的环形进度 计数的中心数字 散落的发光头像/对象轨道Scene 2快速相机推-IN 直穿圆环中心圆环、数字、轨道元素放大飞出画框进入一张圆角卡片卡片上是渐变折线图 网格线 半透明面积填充从左到右自绘Scene 3相机平移到第二张卡片数字计数头像网格的子集变暗/模糊、其余获得强调色对勾徽章 spring-pop。它的标志性动作是z 深度推-穿过push-THROUGH——这正是它区别于扁平平摇巡览的地方rule mapping把每个运动动词映射到具体规则文件如counting-dynamic-scale、stat-bars-and-fills、svg-path-draw、multi-phase-camera、ambient-glow-bloom等Step 5 的帧工人据此还原真实配方。4. 每个帧你要追加什么Story 设计的## Frame N块已经携带叙事 asset_candidates。你追加镜头绝不改动 Story 的scene/voiceover/transition_in/ 角色字段。一个完整的帧条目如下来自原文档的规范示例## Frame 3 — The problem - scene: a 20-minute timer over a stack of rejected takes ← 仅在可读性更锐利时才精修 - voiceover: … ← Story 的保持 - transition_in: crossfade ← Story 的保持 - type: pain_point ← Story 的 - persuasion: Pain agitation - beat: frustration - blueprint: dataviz-countup (Adapt) ← 你追加你实例化的 id或 compose - focal: assets/reject-stat.png ← 你追加这个拍子的主角素材 - roles: reject-stat cutout · timer supporting · backdrop background (dim ~40%) ← 你追加每个候选的角色 - sfx: impact-soft, riser ← 你追加这个拍子想要的声音在根层获取并挂载永远不由你嵌入 Adapt: keep the count-up-ring signature; one stat not three, and the trend chart becomes the rejected-takes count climbing. Scene 1 (0.0–1.2s): solid backdrop (dim ~40%); a circular progress ring bold center number seat dead-center, ring sweeps and number counts 0→20 on one heavy ease — Centered template, ~50% of frame. Slow push-in runs underneath. Scene 2 (1.2–3.4s): as the VO names the count, the camera pushes THROUGH the ring into the rejected-takes stack lower-left; the stack grows beat-by-beat as a reject counter ticks up beside it (the count-up reveals on its spoken cue, not at t0). Asymmetric 60/40, 3 depth layers. Scene 3 (3.4–5.0s): land the hero stat card dead-center, accent glow blooms behind it and holds; the stat reads clean and STILL — no continuing push, no breathing (a held beat beats bad motion). The stillness reads against the prior motion.4.1 四个轻量标签blueprint:——你实例化的 id带(Reproduce)/(Adapt)姿态或compose。每帧一个 id。focal:——哪个现有候选是这个拍子的主角。roles:——每个候选的角色cutout前景主体把文字排布在它周围·background全出血压暗 30–50%·supporting次要。你消费Story 选好的候选——绝不新增、调换或丢弃覆盖范围是 Story 的判断如果一帧的候选真的不对把它标记回去而不是伸手去capture/。sfx:——说出这个拍子想要的声音猛击的 impact、推动的 whoosh、引入揭示的 riser。音频脚本的fetch-sfx通道会检索它装配器把它挂载到根层——你只命名它绝不嵌入audio元素。4.2 布局内联书写inline布局在每条 Scene 行内联陈述——把模板、密度、深度与层级作为它坐在哪里的一部分来命名Centered, ~50% of frame、asymmetric 60/40, 3 depth layers取用下文的布局词汇表绝不写 px / 缩放 / 阴影配方那是工人写的。4.3 运动内联书写inline运动在每条 Scene 行内联命名——从 skills/product-launch-video/references/motion-language.md 的词汇表中命名动作ring sweeps、pushes THROUGH、count-up、glow blooms并让它以长尾曲线落定power3为默认——平滑胜过弹跳见 motion-language.md。绝不写缓动曲线 / 毫秒 / stagger那些在 Step 5 从本技能本地的 skills/hyperframes-animation/rules/ 解析。5. 布局词汇表内联命名的构图语言每条 Scene 的布局作为它坐在哪里的一部分来陈述。如果蓝图已经暗示了一种构图环绕中心的圆环、宽画布上的站点、从相对两翼进入的两张卡片那就赢——直接描述它下面的词汇表用于自由构图或通用拍子不是你必须从中挑选的菜单。绝不写 px / 缩放 / 阴影工人负责。一个帧的布局可以在其 Scenes 之间演化Scene 1 居中主角 → Scene 2 重排成网格。取景词汇——居中主角/高潮· 三分法 · 分屏对比· 分层深度沉浸· 不对称 60/40 或 70/30编辑风· 三联画三块面板· 全宽条带。在整支视频中变化取景让它不读作一个被重复的模板——让拍子决定而不是配额。密度——主视觉 ≥ 画布的 40%≥ 3 个深度层背景 中景 前景绝不允许孤独的小簇漂浮在空荡荡的空间里。眯眼测试模糊后你仍能指出第 1 号元素。层级——组合 ≥ 2 种手段尺寸3:1/ 字重800 vs 400/ 对比 / 位置上三分之一是黄金位/ 运动使一个元素明显主导。深度——叠加 2–3 种尺寸、模糊、不透明度渐变、重叠、阴影堆栈。不展示导航栏、页脚、滚动条、真实光标 / 浏览器镀铬、站在真实素材位置的通用装饰形状、漂浮的散景 / 紫蓝AI渐变——除非是有意的 UI 演示重建。6.## Video direction把不变式只写一次整支视频共享一种观感与一种运动语法。在STORYBOARD.md顶部只写一次## Video direction块让每个帧继承它而各帧的 Scene 行只携带增量delta。这个块是承重的——它是把许多独立镜头绑成一部电影的胶水。保留它。该块包含四个部分调色板系统——来自frame.md哪些角色映射到哪些色相。绝不臆造。运动语法 揭示模型——长尾缓动power3默认平滑胜过弹跳 每个帧都遵循的VO 同步揭示模型每个元素在其口播提示上揭示绝不前置堆料 保持期间什么可以保持活力至多细微抖动无懒散呼吸感。节奏 / 保持帧分配——点名保持帧 / 喘息帧通常在高潮前让视频能量有变化多数帧跟随 VO 揭示少数帧静止保持静止阅读胜过糟糕运动反单调纪律。负面清单——什么绝不出现包禁止的偏离品牌纹理 / 效果加上两种运动失败模式——幻灯片前置堆料然后冻结与屏保一切各自独立漂浮。不要在每帧重复这些——在每个帧里重述视频级规则正是这一层要防止的臃肿。7. 调色板与字体来自frame.md绝不臆造调色板——frame.md被采用的包是颜色真相按帧应用它的角色。通用基础一个强调色、tinted 中性色、避免纯#000/#fff参见 skills/hyperframes-creative/references/house-style.md。字体——字体经由frame.md的类型 token 解析按角色引用它们display / body / mono / 包的 ramp绝不按原始族名或 px。通用字体工艺内嵌字体、深色背景光学补偿、tabular-nums参见 skills/hyperframes-creative/references/typography.md。8. 字幕条安全区规划侧画布底部约17%预留给字幕胶囊。把每个帧的内容规划进顶部约 83%让任何重要内容都不落入该带工人执行像素截断你规划布局。即使字幕被禁用也要保持——底边一致性。9. 运动语言的底层支撑doctrine 与 seek-safe 核心视觉设计层命名的运动不是随意词汇——它来自一套承重的运动教义与硬性渲染约束。以下是视觉设计者必须内化的部分完整版见 skills/product-launch-video/references/motion-language.md9.1 运动教义doctrine——四条承重规则平滑胜过弹跳——power3是默认。元素使用长尾减速曲线让它们平滑落定。不弹跳、不超调back.out/bounce.out/elastic.out不作为默认。弹跳是用户自制视频的头号即时劝退点超调被降级为罕见的、明确为俏皮的例外。后 ~50% 的连续揭示与旁白同步。这是反 PowerPoint 机制——比把发展放在中间更锐利。不要在第一 ~25% 把一切倒上屏幕每个元素——一行、一张卡片、甚至 h1——在旁白提到它时才揭示把揭示序列铺在镜头的较后 ~50%。无懒散呼吸感、无糟糕的摇/推——没有运动胜过糟糕的运动。循环放大缩小卡片/文字来装活是廉价迹象后半段缓慢摇/推会干扰视线、造成眼部不适。保持期间唯一被认可的活动是细微抖动。内部接缝是速度匹配的剪辑velocity-matched cuts。帧内接缝——场景内交换、Scene 到 Scene 的剪、文字到文字的行变——在峰值速度处剪辑两侧方向与速度匹配。技法目录见 skills/product-launch-video/references/cut-catalog.md。9.2 seek-safe 核心硬规则帧是暂停的 GSAP 时间线被逐帧 seek所以实时引擎的一些连续意图无法渲染——不要命名它们无无限 / 永恒运动——任何活力细微抖动、活 SVG 内部件、有限有界环境都是覆盖保持期的有限 tween绝不用repeat/yoyo。无随机或墙钟——无Math.random粒子场、无Date.now漂移。每次渲染必须逐像素相同只命名确定性运动stagger 与任何变化都来自元素索引。入场用fromTo——明确写出 from 状态让 seek 到t0时元素正确落位绝不依赖 CSS 隐藏起点它在 tween 认领之前就渲染可见在 seek 下闪烁。运动不用 CSStransition/keyframes——CSS 动画跑在浏览器时钟上独立于 HF seek 时钟会失步并闪烁。所有运动都驱动在暂停的 GSAP 时间线内。只入场 连续揭示——无片中退场。帧经装配层转场卸载注入的transition_in就是退场。退场运动只属于最后一帧。9.3 失败模式清单禁止项幻灯片首要失败一切在第一 ~25% 倾倒上屏内容入场即冻结没有任何东西在其 VO 提示上揭示。修复规则 2跟随 VO 的连续揭示。廉价活力循环呼吸当生命后半段慢摇/推干扰视线许多元素独立漂浮当运动。修复规则 3只静止 细微抖动。弹跳back.out/bounce.out/elastic.out作为默认入场手工关键帧超调。修复规则 1power3长尾超调只在明确俏皮时。永远无repeat/yoyo无Math.random/Date.now无全部元素同时入场要有序列或 stagger。9.4 运动命名示例规范Scene 1 (0.0–1.0s)实体场英雄标题经逐词 stagger 揭示dynamic-content-sequencing以平滑长尾落定power3入场根层慢速pushmulti-phase-camera保持稳定——无后半段 re-push。 Scene 2 (1.0–3.0s)VO 点名每项能力时五个功能图标经cluster→outward expansioncenter-outward-expansion依次揭示随后一个value-scaled countercounting-dynamic-scale在下方滴答上行——后半段揭示跟随剧本不在 t0 倾倒。 Scene 3 (3.0–4.2s)保持在结果上keyword glowasr-keyword-glow在 VO 说出落点词时落在它上面落定并静止保持——至多细微抖动sine-wave-loop低幅让它保持活力无呼吸、无漂移。每场命名动作 它的规则 id接缝剪为cut-catalog.md让工人挑选曲线、毫秒与 stagger——默认power3。10. 细节在哪里查表想了解…读哪里已验证形状 role→blueprint 菜单 如何挑选skills/hyperframes-animation/blueprints-index.md →blueprints/id.md本地运动——镜头模型、词汇、保持、空闲预算、静止、seek-safeskills/product-launch-video/references/motion-language.md本地布局——模板、密度、深度、层级、字幕带本文件visual-design.md的Layout词汇具体缓动 / 毫秒 / stagger 规则配方正文Step 5本地 skills/hyperframes-animation/rules/帧工人读它你不读调色板 字体 token项目frame.md基础 → skills/hyperframes-creative/references/house-style.md / skills/hyperframes-creative/references/typography.md被制作而非被生成的前景密度skills/hyperframes-creative/references/video-composition.md帧内剪辑 / 接缝zoom-through · cut-the-curve · waterfallskills/product-launch-video/references/cut-catalog.md工人在构图内部构建它们转场Story 设计拥有transition_in你不碰它11. 收尾前清单checklist## Video direction在顶部只写一次调色板 · 运动语法 镜头模型 空闲预算 · 静止分配 · 负面清单含两种失败模式各帧条目是增量不是重述。每个帧都是时间编码镜头序列带覆盖其duration的真实秒窗口——不是标签袋。无帧前置堆料——t0 只入旁白正在说的后续每块在它的口播提示上揭示铺满后 ~50%。窗口数量跟随 VO不是固定数字。每个帧命名一个blueprint:idReproduce / Adapt或composeAdapt 说明保留/改变并保住标志性动作没有任何东西坍缩成一次前置堆料——揭示保持与 VO 同步。保持帧是刻意的——在 Video direction 中为节奏分配静止阅读没问题静止胜过糟糕运动但没有任何帧可以前置堆料然后冻结。每个帧的asset_candidates都有focal 逐候选roles没有新增、调换或丢弃。布局在每条 Scene内联命名模板 / 密度 / 深度 / 层级——本文件的Layout词汇运动在每条 Scene 从词汇表motion-language.md内联命名。无 px / 缓动曲线 / 毫秒 / JS。内容规划进顶部约 83%字幕带清空。调色板 / 字体按角色取自frame.md——什么也不臆造。你没写任何 HTML也没读capture/。12. 从设计到实现Step 5 如何消费这份设计视觉设计层的产物不是终点而是 Step 5 的输入契约。SKILL.md 的 Step 5 说明了这条链路frame-packets.mjs为每个帧生成一个有界数据包该帧精确的 storyboard 块 蓝图正文 每个被引用规则配方的内联加上_role.md核心工人契约 本技能的 skills/product-launch-video/sub-agents/frame-worker.md 拼接而成——每个帧工人只读自己的数据包和frame.md绝不打开STORYBOARD.md或技能文档。工人在数据包内联的指导下把focal:/roles:落实到真实捕获媒体cutout前景尊重 83% 安全区、background全出血压暗 30–50%、[video]素材经data-frame-video-*声明挂载到主机根层把命名的运动动词还原为rules/id.md里的真实配方。这就是为什么视觉设计层严格只写意图——任何 px、毫秒或原始 GSAP 曲线都会破坏这条并行工人的确定性链路。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考