GSAP 解说器 — 制作级视频层级
构建一个自包含的 HTML/SVG/GSAP 解说器，它呈现的效果类似精心制作的 YouTube 动画，而非幻灯片：每个场景由一个 GSAP 时间线驱动，进行富有物理感的编排；一个持续存在的飞行主持人吉祥物；带有深度感的分层渐变世界；角色群体；一个包含暗角和颗粒效果的“摄像机”；以及一个可拖拽的播放器。对于小型的漏斗嵌入，可使用纯 CSS 框架；对于 YouTube 级别的视频内容，请使用此方案。
参考构建是此技能文件夹中的 scaffold.html —— 一个可运行的 5 场景工作示例（主题：“复利如何像雪球一样增长”），其中包含下方所有模式，并通过了保留率和零重叠测试。它已移除 GSAP 依赖：运行 python3 inline-gsap.py scaffold.html 一次（将 GSAP 3.13 获取到 gitignored 的 vendor/ 目录，然后内联），然后打开文件——它必须能正常播放。当某个模式不清晰时，请阅读它。
从这里开始——不会出错的方法
- 首先将镜头脚本写作一个 markdown 文档：每个场景包含——时间戳、时长、视觉内容、屏幕文字、画外音台词。最后附上一个准确性检查清单，并验证其中的每个声明。场景时长成为
SCENES数组；画外音台词成为sr-only的转写文本。 - 将
scaffold.html复制 到<专题>.html。它预置了所有常见问题：框架时钟、搜索界面、主持人飞行、世界背景、摄像机覆盖层、角色群体、减少运动模式、转写文本。在其上运行inline-gsap.py，在接触任何内容前打开它——它必须能播放。 - 逐个替换场景，保留五个工作示例作为你的习语来源，直到每个都被替换：S0 = 带有翻转揭示的黑暗钩子；S1 = 带有弹跳物理的掉落；S2 = 带有流动路径的飞行 + DrawSVG；S3 = 强制重叠碰撞证明（峰值模式）；S4 = 行动号召停留。同步更新
SCENES、FL、ACTS、CH_STARTS——它们是按场景索引键控的并行结构。 - 使用冻结帧对每个场景进行质量检查（参见质量检查），修复，然后发布（自包含文件）。
当一个下方模式匹配时，永远不要从头编写场景的编排——适配该模式。无论模型如何，这是达到标准的方法。
架构契约（已在脚手架中配置）
- 固定的 800×500 舞台，缩放到容器（
fitScale）。场景时钟是 setTimeout（SCENES数组，每个场景的秒数；最后条目999= 行动号召停留；advance()在其上调用done()）。 - 文本/标签/字幕通过 CSS 基元进入（
.fu上移、.pp弹出、.fi淡入），并带有行内animation-delay——廉价且可重放。英雄角色编排是 GSAP：runScene(i)（从showScene调用）杀死前一个时间线并从FL[i]（主持人飞行）+ACTS[i]（场景动作）构建gsap.timeline()。 - 每个
ACTS[i]必须以其接触的所有元素的gsap.set(...)重置开始——场景在重放/搜索时重新激活，被杀死的补间会留下过时的行内样式。 - GSAP 拥有的元素获得类
g-hero（或位于其中一个内部），并且绝不携带.fu/.pp/.fi——每个元素只有一个所有者。 pause()/resume()调用curTl.pause()/play()；CSS 侧通过.paused类冻结。导航始终恢复播放（暂停的新剪辑场景停在透明度为 0 的入口处——永远不要“搜索并保持暂停”）。- 播放器：可点击的进度条搜索（
sceneAt(frac)）、上一页/下一页按钮、←/→ 键、章节刻度（CH_STARTS）、滚动自动播放、标签页隐藏时自动暂停。 - 交付物是静默视觉轨道（主文件保持静音）；画外音作为单独的
<名称>-vo.html预览变体交付，由 ElevenLabs 管道构建（参见画外音制作）。sr-only的转写文本就是画外音脚本。根据朗读速度重新调整时间 = 将SCENES[i]扩展为剪辑 +1.5–2 秒（扩展永远不会使节拍悬空；只有修剪会）。
模式库（适配，不要发明）
所有这些模式都逐字存在于 scaffold.html 中——复制最接近的一个。
- 主持人飞行——
FL[i] = [[分数, x, y, 指向], ...]。第一个航点是前一场景的最后一个（无缝剪辑）。长距离通过 MotionPath 自动平滑飞行（在fly()中）。笔尖位于演员偏移量 ≈ (−10, +95) 处：要指向目标，将主持人停在目标的右上方。当场景需要画面时，将主持人送下舞台（x=850）。 - 带重量的掉落——
gsap.set(els,{y:-300,opacity:0})然后.to(els,{y:0,opacity:1,ease:'bounce.out',stagger:.09})。交错和弹跳就是物理感。（layMarbles将行打包在容器内；行宽是 168，而不是 180——更宽则掉落物会戳穿墙壁。） - 强制重叠碰撞（证明峰值）——两个条掉落到一个无法容纳两者的轨道中；第二个尝试躲避（
x来回运动），失败，稳定下来；重叠部分以back.out弹出并发光（boxShadow来回重复:-1）；然后两个带有双方徽章的角色小兵在其内部弹出。意图 → 失败 → 结果是使其生动的原因。 - 倾倒/变形——容器旋转（
transformOrigin在壶嘴处），内容物通过motionPath弧线一个接一个飞出（{path:[{x,y},{x,y}],curviness:1.6}, ease:'power1.in'），落在一行中，交叉淡变为使用 DrawSVG 绘制的新形状。 - 翻转揭示——一个诱人的 ✓ 弹出（
back.out(2.4)），摆动，然后替换为 ✗ 猛地进入（scale:3→1, power4.out）并带有背景闪烁（backgroundColor来回）。 - 诱惑然后粉碎——答案发光/脉动（
scale来回 ×3），然后消失（opacity:.25, scale:.92, rotation:-3, power2.in）；正确答案随后猛烈出现。 - 印章猛击——
gsap.set(stamp,{opacity:0,scale:2.6,rotation:-14})→.to({opacity:1,scale:1,rotation:0,duration:.35,ease:'power4.out'})。 - DrawSVG——
gsap.set(path,{drawSVG:'0%'})→.to({drawSVG:'100%'})；弹回 = 绘制到 72% 然后快速反转。DrawSVG 覆盖stroke-dasharray——虚线在绘制时显示为实线；据此设计。 - 作为角色的群体（最典型的 Kurzgesagt 手法）——
minion(size, badges)微型角色工厂：数量是小角色，而不是圆点。在 35–55 秒的 CSS 循环上的环境型 3 角色群体；组包含其角色阵容；证明时刻是角色同时佩戴两个徽章。 - 场景剪辑擦除（内置于
runScene）——两个倾斜面板（强调色先出现，墨水轨迹延迟 0.09 秒）在每个剪辑时扫过舞台。保留它；这是最廉价的“真实转场”胜利。值得借鉴的丰富道具场景创意：一个活页角色、一个荧光笔废墟、一个文件柜、一个仪表指针、一个进度条竞赛。
免费插件套件（GSAP 3.13——自 Webflow 收购以来全部免费）
inline-gsap.py 获取并内联核心 + DrawSVG + MotionPath + MorphSVG、SplitText、Physics2D、PhysicsProps、CustomEase、CustomWiggle、CustomBounce、Flip、ScrambleText。所有插件都是免费授权的。inline-gsap.py <文件> 注入所有内容以及一个在 <!--GSAP_INLINE--> 标记处的 registerPlugin 块；--refresh 在已内联的文件中替换套件。经过验证的模式（全部存在于脚手架中）：
- SplitText 字符级联——在初始化时通过注册表一次性分割（
splitOnce(key,sel)缓存到SPL{}中——每次场景重新运行时重新分割会嵌套 span）。提示：字符从{opacity:0,y:14}开始，间隔 .016，开始 ≤.15s。英雄词汇：字符从{y:-64,rotation:-9}开始，带back.out(1.9)间隔 .07；或者{scale:2.7}power4 间隔 .11 = 印章猛击。场景通过透明度（而非 display:none）隐藏，因此初始化时的分割是安全的。 - ScrambleText 定义锁定——一个回报台词混乱到正确位置：
scrambleText:{text:'≥ 1',chars:'<>=~≠≤≥',speed:.6}。在 JS 字符串中，对于符号，优先使用 JS\u转义。主题化字符集（用于定义的数学符号）比 'upperCase' 读起来更好——长时间随机大写混乱读起来像加载故障。 - CustomWiggle 稳定——
CustomWiggle.create('wigSettle',{wiggles:4,type:'easeOut'})，然后rotation:'+=10', ease:'wigSettle'——振荡并返回到起点，因此相对值永远不会在重放中累积。用于：印章着陆、角色反应、主持人到达时铅笔敲击（在fly()中，如果wp[i][3]&&!wp[i-1][3]）。 - 带压扁的 CustomBounce 掉落——
CustomBounce.create('thud',{strength:.58,squash:2.4})创建配对的缓动函数'thud'+'thud-squash'。drop(tl,targets,time,dur,stagger)辅助程序运行 3 个同步补间：透明度弹出、带 'thud' 的y、带 'thud-squash' 的scaleX:1.45,scaleY:.55（在重置中设置transformOrigin:'50% 100%'）。严格优于bounce.out——压扁就是重量。 - Physics2D 爆发——
burst(tl,scene,x,y,n,time,colors)：庆祝/碎片粒子，着陆无所谓（碰撞峰值、胜利印章）。索引种子角度/速度（(i*53)%140）= 重放一致，无 Math.random。在重新进入时移除过时的.pfx粒子；在场景结束前淡出，以便无残留。 - MorphSVG 融合——最顶级的 Kurzgesagt 手法：N 个对象“成为”概念。物品落在一行中 → 一个胶囊路径在其上淡入 →
morphSVG到箭头轮廓，同时fill补间（“同一对象，新形状”，字面意思）。重置需要gsap.set(path,{morphSVG:ORIGINAL_D})——变形的路径保持其变异的d。 - Flip：此处不要使用——在固定的 800×500 绝对坐标舞台上，你始终知道增量；一个普通的
y:补间在tl.pause(t)质量检查下是确定性的，而 Flip 的运行时测量会破坏冻结帧搜索（并且回调在抑制的搜索上不会触发）。Flip 仅在真正的回流布局（DOM 驱动的列表、响应式容器）中才值得使用。“占据空出位置”的节拍是已知增量的补间。
资产制作（10 倍通过模式——道具如何不再像样式的 div）
深度挖掘：完整的资产生成准则（构建顺序、工厂、SVG 契约、质量门）位于 explainer-assets 技能中——在创建或重建资产时使用它；此部分是快速参考。
- 一站式贴纸配方——深度完全来自层叠的
box-shadow：硬右下墨水点（3px 3px 0 var(--ink)）+inset 0 2px 0 rgba(255,255,255,.3-.5)顶部光泽 +inset 0 -3px 0 rgba(0,0,0,.1)底部阴影 +inset 0 0 0 1-2px rgba(255,255,255,.14)模切线边缘。半透明内阴影适用于任何背景颜色，因此在.xchip/.qbar/.stamp/.l3 span上的一个 CSS 传递会提升每个变体，无论深浅。保持一个圆角比例（小 10 / 基础 13 / 大 16）和一个光照方向（左上）全片一致。 - 任何平涂填充的双色调——将
background:rgba(...)替换为linear-gradient(180deg, 较浅色, 基础色)+ 光泽/阴影内嵌。语义颜色保持不变；表面看起来有光照。 - 手工容器配方（桶/罐/杯）——基础阴影椭圆 → 渐变主体 → 2 个锥形箍带，带 1px 白色高光 → 边缘环 + 一个更暗的内部开口椭圆（那个暗椭圆是让开口看起来 3D 的关键）→ 柔和的镜面曲线。沿梯形边插值箍带端点。
- 一行选择器的手工线描——在所有绘制笔画上静态设置
filter:drop-shadow(0 1.5px .5px rgba(0,0,0,.17))，为每个箭头/框提供双色调底面，并与 DrawSVG 动画一起揭示（滤镜独立于 dashoffset）。 - 用伪元素装饰 GSAP 驱动的道具——
::before/::after（标尺线、胶带条、裂缝、弯月面线）自动跟随时间线的变换：零新编排，零占用变化。跟踪每个类哪些伪元素“被占用”——冲突是静默的。 - 工厂角色：仅在单例上使用 id——主持人（一个实例）可能携带以
uid为后缀的渐变/镜面；一个多内联工厂（微型角色）必须保持无 id（仅平涂填充），否则 id 会跨文档重复。 - 在重新制作时保留编排契约——首先从脚本构建一个选择器清单；位置选择器是地雷（
.bkt3 path= 第一个路径必须是补间的主体——以椭圆而不是路径开头）。新的装饰性变换放在包装<g>上。 - 文本安全光泽注意事项——在携带 SplitText/英雄文本的标签上，光泽必须是内嵌盒阴影（绘制在文本下方），而不是定位的
::before叠加层（绘制在字符上方并使其变暗）。 - 纸叠 + 折角配方（任何纸张道具）——2 个偏移背景矩形（±0.6–1.5° 旋转，较深奶油色，svg 上
overflow:visible），角落剪切阴影三角形 + 折叠翻盖，一条边距线，左上角光泽路径。占用不变，仅视觉溢出。 - 抽屉/家具前面板套件——前矩形 + 顶部光泽条 + 标签板 + 嵌入式把手 + 单元间深度阴影线；为高亮单元参数化调色板，保留其动画类。
- 双色调矢量云——着色基础椭圆 + 3 个重叠白色圆 + 一个更亮的顶部椭圆；根据情绪变体重新着色基础色调。
- 蓝图卡片叠加层——作为卡片第一个子元素的绝对定位子 svg（微弱的标尺网格 + 4 个角刻度标记）：技术绘图纹理，对卡片的补间类或文本子元素影响为零。
电影层（Kurzgesagt 级别的模式）
- 摄像机支架
#xplCam——#xplStage内部的一个纯内容包装器，容纳场景（环境层、演员、暗角/颗粒效果保留在外）。每个节拍在回报时推近（~1.02–1.05，transformOrigin 位于英雄对象），揭示时拉远，在runScene中每次剪辑时重置缩放为 1。永远不要缩放#xplStage本身——那是fitScale的工作。峰值场景在其整个动作中赢得一次不间断的缓慢推进。根据可见的药丸/道具边界检查剪辑风险，而不是全宽容器。 - 主持人表演句柄
actorBody——.xpl-actor > [data-host]div，独立于fly()（外部 x/y）和armEl。辅助程序：跳跃（y-8 来回）、向所指向目标倾斜 ±4°、惊吓（后退+倾斜）、在最大的胜利时 360 度旋转。每次剪辑重置。微型角色进入个性：在弹出前，从边缘后面偷看（x 偏移 → 0）。 - 回报光——一个共享的
#xplGlow模糊径向（mix-blend-mode:screen，通过 CSS 变量着色），在每次场景的最大节拍时定位并闪烁在英雄对象后面，每次剪辑重置。大约 15 行代码即可获得即时“照亮”感觉。 - 一天中的时间漂移——在初始化时在
#envFar上设置一个基础的filter（这样补间可以插值，永远不会从none跳跃），然后缓动亮度和色相。
…
[因翻译而被截断]