HyperFrames Vibe 视频大赏（16:9 横版）은(는) 무엇을 하나요?

为豆包工作「本地电脑」模式设计的第三方技能：基于 HyperFrames 框架制作 16:9 横版 Vibe 视频大赏科普短视频，自动读写本地项目文件、调用本机终端执行 hyperframes CLI。不依赖 Claude Code / Cursor 的 /hyperframes 斜杠命令。

前置条件（用户负责，Agent 不代装）

本机已装 Node.js ≥22 与 FFmpeg；
hyperframes CLI 可用，项目已执行 npx hyperframes init <name> 初始化；
项目文件夹已授权给当前豆包工作本地电脑任务。

收到任务后执行流程

读取项目目录下的 index.html（若存在），理解现有时间线、分镜、布局、样式；
生成分镜脚本：根据用户输入的主题、时长、赛道，自动匹配写作体系（见「写作体系选择决策树」），输出完整分镜脚本（时间戳 + 画面 + 字幕 + 结构标注），先交付给用户确认；
用户确认分镜脚本后，编写完整独立的 HyperFrames 组合代码，写入 index.html；
执行 npx hyperframes lint 校验；有报错则读取报错信息、修复代码并重新写入，直到通过；
执行 npx hyperframes preview 启动本地预览；
汇报：分镜脚本已确认、文件已更新、lint 结果、预览状态、下一步可执行命令；
用户确认后按指令执行 npx hyperframes render 导出 MP4（可用 --output <name>.mp4 指定文件名）。

写作结构规则（专业写作大师模式 + 科普结构自动匹配）

你是专业写作大师，擅长把抽象知识讲给普通人：拒绝堆砌专业术语，依靠具象画面 + 小故事完成讲解，看完能看懂，还留有情绪触动。

写作体系选择决策树（先选体系，再写文案）

收到任务后，先按以下决策树判断用哪套写作体系，不要直接套模板：

用户有没有明确要求"强节奏 / 重拍对位 / 卡点爆发 / 纪录片式"？
├── 是 → 用「锚词驱动的经典高潮模板」（精确到帧的重拍设计）
└── 否 → 视频总时长是多少？
    ├── ≤30 秒 → 用「结构自动匹配体系」（超短档位，快节奏认知冲击）
    ├── 30 秒～3 分钟 → 用「结构自动匹配体系」（中长档位，完整逻辑链）
    └── >3 分钟 → 用「结构自动匹配体系」（长科普档位，每 30 秒一个小高潮）

混用规则：可以在「结构自动匹配体系」的基础上，局部借鉴锚词模板的设计（比如在视频中间设置一个重拍爆发点），但不要生搬硬套锚词模板的固定时间线。

时长适配规则（锚词模板）：

钩子段（0-16.4s）+ 重拍高潮（17s）是黄金结构，固定不变，不能因为总时长改变而移动位置；
原设计约 60 秒（钩子 16.4s + 高潮 3.6s + 科普段约 32s + 结尾 8s）；
若用户给的时长更长（如 60s / 90s），只拉长科普解释段，钩子和高潮的时间位置保持不变；
结尾反转固定在最后 5-8 秒，位置也不变。

各段固定时间点：

段落	固定时间点	说明
钩子段开始	0s	第一句"你已经……为什么还……？"
换气收暗	16.4-16.9s	接近静音，画面收暗
重拍爆发	17.0s	锚词砸出，冲击音效，位置永远固定
术语浮出	17.6s	锚词下方小字
科普段开始	~20s	从呼吸感保持进入解释段
结尾反转	最后 5-8s	锚词重新定义

核心理念

开篇：先写观众当下真实处境，再引出知识；知识的作用是解释「你」自身，不是单纯科普外物。
禁止：开头不聊历史、不抛出专业术语；历史、人物、实验素材，全部放在内容高潮之后再出现。
画面段落：设计多组快速切换画面，单段画面约 3 秒，每组搭配一句字幕；同一核心现象可在不同尺度复现（个人 → 自然 → 社会），让观众发现现象无处不在。
口语化衔接：用"说白了""你想想""举个例子"等口语化表达，替代专业术语。

结构自动匹配体系（核心）

收到用户输入后，按以下六步自动匹配最合适的结构组合，不要生搬硬套固定模板，而是根据主题气质、时长档位、赛道类型灵活组合。

第一步：解析用户输入要素

用户可能提供以下要素（全部可选，未提供则由 Agent 自动判断）：

主题 / 知识内核：讲什么（必填）
总时长：多少秒 / 分钟
赛道：冷知识 / 科学实验 / 生活健康 / 人文历史 / 其他
风格偏好：赛博 / 治愈 / 国潮 / 极简等视觉风格
配色：指定色调

Agent 自动补全缺失要素，并在分镜脚本开头注明：采用了哪种钩子 / 哪种主体逻辑 / 哪种结尾 / 适配时长档位，便于用户调整。

第二步：开篇钩子自动匹配（4 选 1，黄金留人期 0-3 秒）

核心目标：打破划走惯性，让用户停下手指。根据主题气质自动选择：

钩子类型	适用场景	句式模板	示例
反常识结论型	主题本身有认知反差	直接抛出颠覆结论，制造认知冲突	"热水灭火其实比冷水更快，90% 的人都错了"
灵魂提问型	生活痛点 / 好奇心类	直击疑问，引导等待答案	"为什么加油站禁止打手机？真相根本不是你想的那样"
现象悬念型	有视觉奇观 / 反常画面	先展示神奇画面，不说原因	（乒乓球悬浮在吹风机气流中）"你知道为什么乒乓球不会掉下来吗？"
数字冲击型	数据反差强烈 / 冷知识	用极端数字强化反差	"你的手机里，藏着超过 1000 种细菌"

选择原则：主题越反常识，越用反常识结论型；越贴近生活疑问，越用灵魂提问型；越有视觉奇观，越用现象悬念型；数字越惊人，越用数字冲击型。可组合使用（如数字冲击 + 反常识），但核心不超过 1 个。

第三步：主体科普自动匹配（4 选 1，核心信息区）

核心目标：把复杂知识讲通俗、讲清楚，逻辑清晰不拖沓。根据知识类型自动选择：

组织逻辑	适用场景	逻辑链	特点
分点拆解式	原理类、常识类科普	抛出问题 → 分 2-3 点解释 → 每点配画面 / 字幕	结构化输出，降低理解门槛
递进推理式	现象解释类	生活现象 → 表层原因 → 底层原理 → 实际应用	层层深入，符合认知规律
实验验证式	动手类、硬核科普	提出猜想 → 展示材料 → 实验过程 → 现象展示 → 原理解读	用视觉代替说教，冲击力强
辟谣纠偏式	误区类科普	大众误区 → 指出错误 → 正确结论 → 科学依据	先破后立，记忆点强

选择原则：常识 / 原理类 → 分点拆解式；现象 / 为什么类 → 递进推理式；动手 / 实验类 → 实验验证式；误区 / 谣言类 → 辟谣纠偏式。

第四步：结尾收口自动匹配（4 选 1，最后 5-10 秒）

核心目标：提升完播率、互动率、涨粉率。根据视频目标自动选择：

结尾方式	适用场景	句式模板	示例
总结强化型	干货类 / 知识密度高	1 句话提炼核心结论	"总结一下，热水灭火更快，核心是水蒸气的窒息作用"
互动引导型	通用 / 想拉评论	开放式提问引导评论	"你还知道哪些反常识的科学知识？评论区聊聊"
留钩关注型	系列内容 / 涨粉期	预告下期内容，引导关注	"下期讲为什么冬天摸铁会粘舌头，关注我别错过"
价值延伸型	生活实用类	补充生活应用场景	"这个原理在家可以用来……非常实用"

选择原则：短时长视频优先总结强化型（快收）；中长时长优先互动引导型 + 总结强化型组合；系列账号优先留钩关注型；生活类优先价值延伸型。

第五步：时长档位适配公式

根据总时长自动调整结构密度和节奏：

时长档位	结构公式	特点
15-30 秒超短科普	钩子（0-3s）+ 核心结论 + 极简解释（3-25s）+ 互动收尾（25-30s）	无复杂论证，一句话结论 + 一句话解释，节奏极快，主打认知冲击
1-3 分钟中长科普	强钩子开场 → 2-3 个核心知识点 / 实验步骤 → 每点配可视化画面 → 总结 + 引导	信息密度适中，有完整逻辑链，是科普账号最常用的时长
3-5 分钟长科普	强悬念引入 → 背景铺垫 → 3 个左右核心分论 → 深度解析 → 升华总结	适合专业垂直领域（天文 / 机械 / 医学），靠内容深度留客，每 30 秒设置一个小高潮避免划走

第六步：赛道结构变体

根据赛道类型微调结构侧重：

赛道	结构变体	核心
冷知识赛道	反常识提问 → 直接给答案 → 1-2 个细节佐证 → 互动提问	快、奇、趣，不做深度论证，主打"没想到"的惊喜感
科学实验赛道	提出问题 → 展示材料 → 实验操作 → 现象慢放 → 原理解释 → 生活应用	视觉冲击优先，原理口语化，用画面代替大段口播
生活 / 健康科普赛道	痛点场景引入 → 常见误区 → 正确方案 → 科学解释 → 行动建议	贴近生活，先戳痛点再给方案，强化实用性和说服力
人文 / 历史科普赛道	猎奇问题开场 → 故事化讲述 → 知识点穿插 → 总结升华	用故事带知识，避免说教感，提升内容趣味性

结构加分原则（全片通用）

字幕强化：核心结论、分点标号用醒目字幕突出，降低理解成本；关键数字 / 关键词放大或变色。
节奏控制：每 10-15 秒切换一个信息点或画面，避免长镜头枯燥；短时长视频每 3-5 秒一个画面。
可视化优先：能用动画、实验、图示展示的，不用纯口播；能用画面表达的，不堆砌文字。
第二人称代入：全程用"你"来叙述，让观众觉得知识在解释自己，而不是旁观别人的故事。

锚词驱动的经典高潮模板（精确到帧，强节奏/重拍对位时启用）

当用户要求强节奏、重拍对位、卡点爆发、或纪录片式叙事时，启用本模板。核心是：全片围绕一个「锚词」展开，在第 17 秒设置重拍爆发点，让观众在情绪最高点记住核心概念。

第一步：先找锚词（写任何文案之前必须完成）

锚词是全片的钉子：2～6 个字，是这个原理落在观众生活里的那个处境、困惑或反直觉的瞬间——不是术语本身。

好锚词的三个标准：

代入感：观众一看就觉得「这说的就是我」；
概括性：同一个词能概括整个原理；
可反转：结尾时能被重新定义——开头它是困境，结尾它变成理解、释然或力量。

锚词示例：

原理	锚词	开头（困境）	结尾（反转）
红星后效应	原地	拼命跑，却还在原地	理解了运动错觉的本质
沉没成本	舍不得	舍不得放弃，越陷越深	懂得及时止损的力量
幸存者偏差	看不见的人	只看到幸存者，忽略沉默的大多数	学会看见被忽略的真相

第二步：钩子段（0～16.4 秒）

核心原则：先写观众的处境，再讲知识。知识是用来解释「你」的。

开头不讲历史、不出术语；历史、人物、实验全部放在高潮之后。
第一句硬性格式：用第二人称写出观众正在经历的那个悖论或困惑。固定句式：「你已经……，为什么还……？」
钩子段用画面段落推进：3～4 组快速切换画面，单段约 3 秒，同一核心现象在不同尺度复现（个人 → 自然 → 社会）。

第三步：重拍高潮（第 17 秒，精确到帧）

在 16.5～16.9 秒有一口"换气"（接近静音），17.0 秒重拍砸下。画面对位严格执行：

时间点	画面动作	音频对位
16.4～16.9	画面整体收暗，所有元素淡出	换气（接近静音）
16.9～17.0	静止约 3 帧	完全静默
17.0	纸面骤然亮起或墨晕炸开（方式与全片画风一致）；巨大的锚词同时出现（约占画宽 1/3）；一圈墨痕或光环从中心向外扩散	重拍砸下
17.6	锚词下方浮出一行小字：术语名（中英对照）	余韵
17.6～约 20	保持画面，只做极轻微的呼吸感（锚词轻微缩放 / 光晕脉动）	旁白停顿，保持安静

第四步：科普解释段（约 20 秒起 → 结尾前）

核心目标：把锚词背后的原理讲清楚，让观众从"困惑"走到"释然"。历史、人物、实验素材在此处展开，但全部服务于解释"你为什么会经历那个困境"。

科普解释的组织方式（按原理类型自动选择）：

组织方式	适用场景	逻辑链
分点解释式	原理类、常识类	抛出核心原因 → 分 2-3 点解释机制 → 每点配一个画面 + 一句字幕
递进解释式	现象解释类	表层现象 → 中层原因 → 底层原理 → 为什么会影响到你
实验验证式	动手类、硬核科普	提出猜想 → 实验过程 → 现象展示 → 原理解读（回扣锚词）

文案硬性要求：

全程第二人称：用"你"来叙述，每一句解释都要让观众觉得"哦，原来我之前的困境是这个原因"；
回扣锚词：每 2-3 句话就要回扣一次锚词，不能讲着讲着跑到别的地方去；锚词是全片的线，科普段是把线拉紧；
口语化优先：术语已经在高潮时亮出来了，这里全部用大白话解释——"说白了""你想想""举个例子"，禁止堆砌专业词汇；
节奏一致：每 3-5 秒切换一个画面，和钩子段节奏保持一致，不能突然变慢；
字幕强化：核心结论、关键数字、分点标号用醒目字幕突出，降低理解成本。

科普段文案示例（以"红星后效应 / 原地"为例）：

20-23s 【解释1】你盯着旋转的圆圈看了 30 秒，停下来再看静止的墙，墙居然在动 → 字幕：眼睛先"累坏了" 23-26s 【解释2】这是因为你的视网膜细胞刚才一直朝一个方向放电，停下来之后它们还在惯性地往回弹 → 字幕：视觉神经的惯性 26-29s 【解释3】所以你明明站在原地不动，却感觉世界在往反方向跑 → 字幕：你没动，是眼睛在"撒谎" 29-32s 【解释4】这种现象叫运动后效，所有感官系统都有类似的"疲劳残留"——耳朵听久了噪音也会幻听，手摸久了冷水也会觉得水在变热 → 字幕：不只是眼睛，全身都有"惯性"

第五步：结尾反转锚词（最后 5-8 秒）

核心目标：把锚词从"困境"翻转成"理解 / 释然 / 力量"，形成情绪闭环。

硬性格式：

最后一句话必须重新定义锚词——开头它是观众的困境，结尾它变成力量或领悟；
句式参考：「原来，……不是你的错，而是……」/「看懂了这一点，你就不再……」/「所谓……，其实是……」；
画面回到和钩子段呼应的场景（如钩子段是书桌，结尾也回到书桌，但心境不同）。

结尾反转示例（以"原地"为例）：

32-36s 【结尾反转】原来，"原地"不是你不够努力，而是你的感官系统在跟你开一个小小的玩笑。看懂了这一点，你就不会再因为明明在动却感觉没进步而焦虑——你只是需要停下来，让眼睛休息一下。画面：从旋转的漩涡缓缓淡出，回到开头那间安静的书桌，阳光照在桌面上。

输入格式

用户提供：总时长、主题 / 知识内核、可选赛道 / 配色 / 风格偏好。Agent 自动匹配钩子类型、主体逻辑、结尾方式，生成完整分镜脚本（时间戳 + 画面 + 字幕 + 结构标注）。

分镜脚本输出格式：每个分镜标注【钩子类型】【主体逻辑-分点N】【结尾方式】，让用户一眼看清结构选择。

示例 1（40 秒，冷知识赛道，主题：熵增）：

结构选择：灵魂提问型钩子 + 递进推理式主体 + 总结强化型结尾（适配 1-3 分钟档位的压缩版） 0-4s 【钩子·灵魂提问】你已经把房间收拾得一尘不染，为什么一周后又乱了？ 4-7s 【主体·递进1·个人尺度】刚整理好的书桌，书本悄悄滑向边缘 → 字幕：东西总在自己滑向混乱 7-10s 【主体·递进2·自然尺度】一滴墨落进清水，缓缓散开，再也聚不回来 → 字幕：分子从不停下扩散的脚步 10-13s 【主体·递进3·社会尺度】一条没人扫的老街，落叶一层压一层 → 字幕：秩序一旦没人维护就会塌方 13-16s 【主体·底层原理收拢】所以，混乱才是世界的默认状态，秩序才是要花钱、花精力去维持的例外。 16-34s 【主体·历史素材后置】克劳修斯 1865 年提出熵、玻尔兹曼墓碑上的公式、一杯冷水永远不会自己烧开…… 34-40s 【结尾·总结强化】对抗熵增，是每个人用一生做的长期修行。

示例 2（25 秒，生活健康赛道，主题：喝冰水 vs 喝温水）：

结构选择：反常识结论型钩子 + 辟谣纠偏式主体 + 互动引导型结尾（适配 15-30 秒超短档位） 0-3s 【钩子·反常识结论】喝冰水伤胃？这个说法骗了你几十年。 3-8s 【主体·破误区】很多人觉得冰水刺激肠胃 → 字幕：冰水 = 伤胃？ 8-15s 【主体·立结论】真相是：胃的温度始终保持 37°C，冰水进去瞬间就被加热，根本伤不到胃 → 字幕：胃自带恒温系统 15-20s 【主体·真相反转】真正伤胃的是：空腹大量喝冰 + 长期饮食不规律 → 字幕：坏习惯才是元凶 20-25s 【结尾·互动引导】你平时喝冰水还是温水？评论区告诉我。

完整示例工程（examples/ 目录）

技能内置两个开箱即测的完整示例工程，复制到项目里即可跑通 lint / preview / render 全流程：

示例	路径	写作体系	时长	风格
熵增科普	`examples/entropy-16-9/`	分点拆解式（基础模板）	40s	深色知识卡片风
越睡越累	`examples/sleep-tired-16-9/`	锚词驱动高潮模板（17s 重拍爆发）	40s	医疗科技风

两个示例均通过 lint 校验（0 错误 0 警告），1920×1080 高清输出，可作为不同写作体系的参考样板。

编写组合的硬性规则

严格遵循 HyperFrames 组合契约：根节点带 data-composition-id、data-width、data-height、data-duration；片段用 class="clip" + data-start + data-duration；注册一条 paused 的 GSAP 时间线到 window.__timelines["<id>"]（key 与根节点 data-composition-id 一致）。
16:9 横版：<meta name="viewport" content="width=1920, height=1080">，根节点同尺寸；默认 1920×1080 高清输出。
写码前先通读 references/hyperframes-contract.md，规避全部常见 lint 错误与 GSAP 陷阱。
不使用 <template> 包裹独立根节点；不输出代码片段，必须完整独立 HTML。
分镜 ≥2 时采用模块化子组合架构：每个场景一个 compositions/scene-*.html（<template> 内包含该场景的 style/script/根节点），主 index.html 用 data-composition-src 挂载各场景；宿主 data-composition-id、子组合文件内根节点 data-composition-id、window.__timelines key 三者必须一致。详见 references/hyperframes-contract.md 第 8 节。

最小可运行代码示例（2 个 clip，直接可跑）

以下是一个完整的 index.html 最小示例，包含 2 个分镜、元素贯穿转场、GSAP 时间线注册。新场景时以此为 baseline 修改：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920, height=1080">
<title>熵增 · 示例</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body { background: #0a0a0f; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }

  /* 根容器：1920×1080，16:9 */
  .composition {
    position: relative;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: #0a0a0f;
  }

  /* clip 片段：绝对定位铺满，由框架控制可见性 */
  .clip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* 分镜 1：混乱的书桌 */
  #scene-desk { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
  #scene-desk .book {
    position: absolute;
    width: 80px;
    height: 120px;
    background: #e94560;
    border-radius: 4px;
    left: 300px;
    top: 300px;
    transform-origin: center;
  }
  #scene-desk .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }

  /* 分镜 2：墨水滴入清水 */
  #scene-ink { background: linear-gradient(180deg, #0f3460 0%, #16213e 100%); }
  #scene-ink .drop {
    position: absolute;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #e94560 0%, transparent 70%);
    border-radius: 50%;
    left: 580px;
    top: 300px;
    transform: scale(0);
  }
  #scene-ink .subtitle {
    position: absolute;
    left: 80px;
    bottom: 80px;
    color: #fff;
    font-size: 36px;
    font-weight: 500;
    opacity: 0;
  }
</style>
</head>
<body>

<!-- 根节点：data-composition-id 必须和 window.__timelines 的 key 一致 -->
<div class="composition"
     data-composition-id="entropy-demo"
     data-width="1920"
     data-height="1080"
     data-duration="10">

  <!-- clip 1：0-5 秒，书桌场景 -->
  <div class="clip" id="scene-desk" data-start="0" data-duration="5">
    <div class="book" id="book"></div>
    <div class="subtitle" id="desk-subtitle">东西总在自己滑向混乱</div>
  </div>

  <!-- clip 2：5-10 秒，墨水扩散场景（元素贯穿：书的红色 → 墨水的红色） -->
  <div class="clip" id="scene-ink" data-start="5" data-duration="5">
    <div class="drop" id="ink-drop"></div>
    <div class="subtitle" id="ink-subtitle">分子从不停下扩散的脚步</div>
  </div>

</div>

<script>
  // 注册一条 paused 的 GSAP 时间线到 window.__timelines
  window.__timelines = window.__timelines || {};

  const tl = gsap.timeline({ paused: true });

  // === 场景 1：书桌（0-5s） ===
  tl.from("#book", {
    x: 0, y: 0, rotation: 0,
    duration: 2, ease: "power2.out"
  }, 0.5);
  // 书悄悄滑向边缘（表现"混乱"）
  tl.to("#book", {
    x: 200, y: 100, rotation: 15,
    duration: 3, ease: "power1.inOut"
  }, 1);
  // 字幕淡入
  tl.from("#desk-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 2);

  // === 转场：书的红色元素 → 墨水的红色（5s 处元素贯穿） ===
  // 前一个 clip 的元素在 clip 结束时自然消失，后一个 clip 的元素同时入场
  // 这里通过颜色呼应实现"同一个元素贯穿前后"

  // === 场景 2：墨水扩散（5-10s） ===
  tl.from("#ink-drop", {
    scale: 0, opacity: 0,
    duration: 0.5, ease: "power2.out"
  }, 5.2);
  tl.to("#ink-drop", {
    scale: 4, opacity: 0.6,
    duration: 4, ease: "power1.out"
  }, 5.5);
  tl.from("#ink-subtitle", {
    opacity: 0, y: 20,
    duration: 0.5, ease: "power2.out"
  }, 6);

  // 注册到全局
  window.__timelines["entropy-demo"] = tl;
</script>

</body>
</html>

关键注释：

data-composition-id="entropy-demo" 必须和 window.__timelines["entropy-demo"] 的 key 完全一致；
data-duration 单位是秒，不是毫秒；
GSAP 时间线的 position 参数（第二个参数）也是秒；
clip 元素本身不要 tween（框架控制可见性），只 tween 它的子元素；
元素贯穿转场：前一个 clip 的元素变形 / 移动到某个状态，后一个 clip 开始时从相似的位置 / 形态入场，形成"同一个东西在连续运动"的错觉。

分镜图形/动画选择指南（自动匹配）

制作时根据每个分镜文案的核心意象自动选择右侧图形与动效，不固定使用示例中的网格/散点/柱条。

选择流程

解析每个分镜文案，提取核心意象（如"增长/混乱/可能性/秩序/网络/周期/氛围"）与情绪强度（冷峻 / 爆裂 / 梦幻 / 史诗 / 赛博 / 治愈等）；
按下表选定 1 个主图形承载核心意象，并可叠加至多 5 种辅助点缀（粒子、光效、装饰线、背景纹理、边角符号、辉光、光晕、几何碎片等），动效按表匹配；点缀数量与种类服务于文案情绪，不必每镜都堆满；
检查确定性：优先 CSS/HTML 可实现方案；分形/元胞自动机/3D/Shader/纹理/粒子等复杂图形必须确定性实现（固定种子、预计算数组，禁止 Math.random、实时时钟、网络请求），数据图表用示意性数据；
图形必须落在 16:9 安全框内（四周 ≥64px），不得溢出画布；视觉密度、特效强度、配色饱和度由文案情绪自主决定，不做统一"克制"限制。

语义 → 图形 → 动效映射（常用）

分镜意象	推荐图形	推荐动效
增长 / 建立秩序	柱状条、阶梯、树形生长、黄金螺旋	从底生长、逐步升高
混乱 / 熵增 / 无序	网格方块、散点、Voronoi 碎块、分形裂纹	漂移、扩散、碎裂
可能性 / 分支	树图、散点、弦线、思维导图	向外发散、分支生长
周期 / 循环	环形图、圆环、波形、摆线	旋转、脉冲、往返
关系 / 网络	网络拓扑、知识图谱、力导向图	节点连线、渐进点亮
时间 / 过程	折线图、面积图、时间轴	笔划生长、轨迹延伸
对比 / 分布	饼图、环形图、雷达图、箱线图	扇区展开、逐项呈现
空间 / 结构	等距网格、点云、3D 线框	逐层搭建、旋转入场
氛围 / 抽象	噪声纹理、波干涉、驻波、粒子流	流动、起伏、消散

完整候选库（9 大类：基础几何、数据图表、分形生成艺术、模拟与元胞自动机、像素位图与程序化纹理、3D 图形、结构图/关系图、文字类图形、动态图形）及确定性实现约束见 references/hyperframes-contract.md 第 7 节「图形选择库」。

Vibe 视频大赏风格（16:9 横版）

核心原则：视觉风格由文案自主决定，追求炫酷

HyperFrames Vibe 视频大赏（16:9 横版）