Communitygithub.com

HyperFrames Vibe 视频大赏(16:9 横版)

利用 HyperFrames 框架制作 16:9 横版科普短视频,适用于豆包工作「本地电脑」模式,自动读写本地项目并调用 CLI 工具。

Qu'est-ce que HyperFrames Vibe 视频大赏(16:9 横版) ?

该技能专为豆包工作「本地电脑」模式设计,用于生成 16:9 横版科普短视频。它基于 HyperFrames 框架(由 HeyGen 开源的 Apache-2.0 项目),自动读取本地项目文件、编写 HTML+GSAP 时间线,并调用开发者终端执行 `hyperframes` 命令行(如 `lint`、`preview`、`render`),无需依赖 Claude Code 或 Cursor 的斜杠命令。技能内置两套专业写作体系:一套是「结构自动匹配体系」,根据主题、时长、赛道自动匹配钩子类型(如反常识结论、灵魂提问)、主体逻辑(如分点拆解、递进推理)和结尾方式(如总结强化、互动引导);另一套是「锚词驱动的经典高潮模板」,精确到帧地设计重拍爆发点(第 17 秒),围绕一个核心锚词展开叙事。此外,它还提供完整的图形动画选择指南,帮助开发者将文字意象自动匹配为合适的视觉元素(如柱状图、散点、网格)。最终输出完整可渲染的 `index.html` 文件,并通过 `lint` 校验和 `preview` 预览,用户确认后可执行 `render` 导出 MP4 视频。

Compatible avec✓Claude Code~Codex CLI✓Cursor
npx skills add 2026079575/VibeDS-skill

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait HyperFrames Vibe 视频大赏(16:9 横版) ?

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

前置条件(用户负责,Agent 不代装)

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

收到任务后执行流程

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

核心理念

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

结构自动匹配体系(核心)

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

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

用户可能提供以下要素(全部可选,未提供则由 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 个细节佐证 → 互动提问快、奇、趣,不做深度论证,主打"没想到"的惊喜感
科学实验赛道提出问题 → 展示材料 → 实验操作 → 现象慢放 → 原理解释 → 生活应用视觉冲击优先,原理口语化,用画面代替大段口播
生活 / 健康科普赛道痛点场景引入 → 常见误区 → 正确方案 → 科学解释 → 行动建议贴近生活,先戳痛点再给方案,强化实用性和说服力
人文 / 历史科普赛道猎奇问题开场 → 故事化讲述 → 知识点穿插 → 总结升华用故事带知识,避免说教感,提升内容趣味性

结构加分原则(全片通用)

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

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

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

第一步:先找锚词(写任何文案之前必须完成)

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

好锚词的三个标准:

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

锚词示例:

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

第二步:钩子段(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 点解释机制 → 每点配一个画面 + 一句字幕
递进解释式现象解释类表层现象 → 中层原因 → 底层原理 → 为什么会影响到你
实验验证式动手类、硬核科普提出猜想 → 实验过程 → 现象展示 → 原理解读(回扣锚词)

文案硬性要求:

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

科普段文案示例(以"红星后效应 / 原地"为例):

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

第五步:结尾反转锚词(最后 5-8 秒)

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

硬性格式:

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

结尾反转示例(以"原地"为例):

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

语义 → 图形 → 动效 映射(常用)

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

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

Skills associés