Kinetic reel
一种完全用代码制作编辑型、高能运动短片的方法，源自“Work Reel '26”（一个84秒的作品集短片：Microsoft → UW–Madison Surgery → Enterprise RAG → trace finale）。它被打包成一个可运行的template/（一个使用了所有技术的17秒演示）和一个完整的工作示例examples/work-reel-26/。
工作原理。 每一帧都是t的纯函数。reel/index.html加载reel/cues.js（时间线）和reel/reel.js（一个ES模块：Three.js层，一个2D类型画布，和一个WebGL后期通道）。render.mjs驱动无头Chrome渲染接触片、片段和单帧供审查，或并行渲染每一帧，然后ffmpeg编码MP4。music/score.mjs根据同一个cues.js在Node中合成配乐，因此每个重音都精准落在其帧上。
工作流程
0. 脚手架
bash <skill-dir>/scripts/new_project.sh <project-dir> # <skill-dir> = 存放此SKILL.md的文件夹
然后在设计之前，完整阅读references/style-guide.md（外观、运动词汇、过渡目录、布局规则）和references/sound.md。浏览examples/work-reel-26/reel.js了解长短片是如何组织的。
1. 确定重点，然后进行故事板
- 询问（或确定）什么主导以及每个部分获得多少时间。观众会注意比例：Work Reel v2中Microsoft部分约占60%，不得不重新平衡。解决方法是为其他章节增加时长，而不是砍掉人们喜欢的那个。力求主导部分≈ 35–40%。
- 根据模板编写
STORYBOARD.md：时间预算、事实的权威来源、统一主题，以及每个镜头一行（标题、视觉效果、过渡入场、声音）。 - 事实是神圣的。 仅使用提供的来源中的数字，每个都带有其范围（“约180个自建案例”、“320个双语提示”）。任何说明性内容（工具ID、文档ID、示例答案、AST）在HUD中都标记为
SCHEMATIC。切勿绘制你没有的按维度数据。可视化过程。医学/临床工作：不宣称疗效，若属实则说“开发中/尚未验证”。
2. 构建
reel/cues.js：S（场景开始）、hits（每个重要的节拍）、CH（章节 → 分段进度条）、dur。120 BPM：在节拍上切换，在小节上改变章节。reel/reel.js：每个镜头一个函数，sName(t)。每个函数绘制整个帧：bg()→ 通过glShot(...)的GL层 → 类型和形状 →hud(t, {...})。用键将镜头注册到SCENES中；在TR中添加一个过渡（或省略以在节拍上进行硬切）。- 维护
CJK常量，列出你绘制的所有中文字符（字体作为子集加载）。
3. 观看它，每个镜头，多次
node render.mjs --sheet=1,4,7,10,13,15.5 --cols=3 --w=640 --out=out/check/sheet.jpg # 关键帧
node render.mjs --stills=10.4 --out=out/stills # 全分辨率细节
ffmpeg -ss 16.0 -t .6 -i out/reel.mp4 -vf "fps=10,scale=320:-1,tile=6x1" out/check/tr.jpg # 一个过渡，从编码中
用Read打开每张图片。检查碰撞（标签覆盖线条、统计数据覆盖统计数据、文本进入HUD条带）、切换时的空白帧、宽度为1600像素时的可读性，以及每个过渡是否从某物开始并干净地结束。预算：每章节一张接触片，每密集镜头一张全分辨率静帧，每过渡类型一条片段。
4. 配乐、渲染、编码
node music/score.mjs && ffmpeg -y -i music/score.wav -af "highpass=f=30,equalizer=f=250:t=q:w=1:g=-2,loudnorm=I=-14:TP=-1.2:LRA=8" -c:a aac -b:a 192k assets/score.m4a
node render.mjs --frames --workers=4 # 在Mac GPU上约8–40毫秒/帧：几秒，不是几分钟
node render.mjs --encode --audio=assets/score.m4a --out=out/reel.mp4 --fps=30
# 网络副本：ffmpeg -i out/reel.mp4 -vf scale=1600:900:flags=lanczos -c:v libx264 -preset slow -crf 23 -c:a aac -b:a 128k -movflags +faststart out/reel-web.mp4
你听不到配乐：使用showspectrumpic和每段的RMS检查它，并在报告中说明。纯音频更改无需重新渲染：复用（-map 0:v -map 1:a -c:v copy）。
最重要的规则
- 字体是英雄。 紧缩显示字体（Anton）用于标题，宽大无衬线（Archivo Black）用于重击，斜体衬线（Instrument Serif）用于唯一的“声音”行，等宽字体（JetBrains Mono）用于每个标签。大号英文标题，当受众为双语时使用小号中文注释。
- 每个镜头都有一个机制，而不仅仅是文字：一个路由网格、一个矩阵扫描、一个标志在状态机中跳跃、列表融合、数据包通过门。标题命名它；机制证明它。
- 节拍锁定。 字母、芯片、计数器和切换都落在
hits上。快速进入（指数-出），保持，下一个。 - 连续性。 在章节内部，优先使用形状连续性过渡（通过眼睛注视的元素缩放、从刚亮起的东西虹膜展开），而不是硬切。硬切加冲击效果用于章节重击。
- 无噪声嗖声。 进入章节时有调性的渐强，章节内部有安静的音调提示，大约一半的切换处保持静音。
- 诚实数据（见步骤1）和任何说明性内容上的
SCHEMATIC标签。 - 保护数学。
backOut()的半径可能低于0（Canvas会抛出）：circle/starburst/jelly已有保护。在合成器中，在pow()之前将局部时间限制为≥ 0，并限制SVFf/q（模板中已有）。
将短片作为网站开场发布
Work Reel作为其网站的入口页面发布：index.html全屏播放短片，然后跳转到作品集。该模式打包在examples/site-intro/中（index.html、css/intro-reel.css、js/intro-reel.js，以及一个添加HTTP Range支持的Cloudflare Worker）：
- 尝试带声音自动播放。如果被拒绝，则静音播放并显示跳动提示“点击开启声音”。如果也被拒绝，或
prefers-reduced-motion已启用，则显示“开始”模式的结束画面（播放是主要按钮）。 - 播放期间：顶部中央有小型玻璃药丸徽章，因为短片HUD占据角落。“跳过介绍”带有一个随短片进度填充的环。声音切换的均衡器条以短片BPM节奏跳动。Esc跳过，M静音。
- 结束画面：短片的语法以HTML呈现。角括号、姓名以下降字母（Anton）、等宽微观字体、分段追踪条、粒子地形的2D点场版本、青绿色主要CTA（悬停时文本滚动、光泽、磁性、每小节一次脉冲），以及一个幽灵“再次观看”。
- 通过从按下的控件青绿色虹膜退出，音频淡出，然后导航。
- 两种编码（1600×900约1.3 Mbps，960×540约0.6 Mbps用于手机/节省数据），
preload="auto"，一张海报。通过HTTP Range（206）提供，否则搜索和Safari会出错。