用途:为品牌、网站或产品制作动画发布视频,默认 16:9、约 40 秒、无旁白,整体由一个连续构图、一条时间线、一个智能体完成,参考 producthub.lat 的发布视频(2026 年 10 月),参考代码在同目录 reference/ 下,可作为起点改写而非从空白开始。
主要能力与风格规则:品牌色取自上线网站的 CSS,而非设计令牌或参考视频;每场有 3–6% 的缓慢连续相机推拉(sine.inOut);“相机转向”用横向或纵向快速甩镜加模糊,不旋转画面;“场景退出”与“下一场进入”同一运动衔接;文字入场在 push、rise、mask 三种中交替,不用打字机效果;固定元素跨转场保持并随转场边缘变色;背景直接在场景间染色,不经过黑场;每次剪切变换转场方式(圆形揭示、上擦、甩镜、穿入、拉远);logo 始终是图片或矢量,小 PNG 可重绘/描摹为矢量;每条视频有一个取自该品牌独有元素的“签名转场”,放在音乐爆发点。禁止装饰性光线、点阵网格、借用参考视频颜色。
必要工具与用法:Node 18+ 与 npx hyperframes 用于 lint、snapshot 和渲染 MP4;ffmpeg 读取帧并混入音轨;Python 3 与 numpy、scipy、soundfile、librosa 测量节拍、构建音轨;potrace 与 ImageMagick 可选,用于把小型 PNG 字标转为矢量;音乐由用户根据 reference/music-prompt.md 生成。项目位于 videos/<slug>/,构图源为 v2/index.template.html,由 reference/build.py 生成 index.html;渲染输出到 renders/vN.mp4。流程:一轮简报询问目的地、时长、开场与故事;从实时站点或本地开发服务器采集品牌;写场景图;改写模板并重建签名转场;用 python3 v2/build.py 构建;检查用 npx hyperframes lint、npx hyperframes snapshot --at <times> 并读取每个剪切的接触表,必要时在浏览器中比对边界框;渲染用 npx hyperframes render --quality high --output renders/vN.mp4。
音轨:按场景时间重剪音乐,用 mix.py 以 40–120 Hz 频带 RMS、20 ms 分辨率找瞬态,只在同一小节节拍位置剪切,交叉淡化 50 ms 等功率;参考编排含安静前奏、节拍落在首个大视觉时刻、logo 完成后渐进淡出并接回声、DJ rewind 引入签名转场、歌曲在签名转场爆发到结尾、结尾口号开始淡出。音效仅保留每字符一个合成机械键声与鼠标点击(按下+释放)的柔和爆音,其他 whoosh、impact、chime、shimmer 已被移除。母带先增益再用 alimiter(limit 0.84),−14 LUFS 集成,真峰值 ≤ −1 dB,不用 loudnorm 动态模式;混流用 -c:v copy。
限制与已知陷阱:clip-path: url(#svgClipPath) 与 SVG filter: url() 在渲染中无效,应改用 CSS mask-image 加 SVG data URI 或 circle()/inset();mask-position/mask-size 作为字符串补间会插值错误,需用数值 CSS 变量 --mx、--my、--mw、--mh 与 calc(var(--mx) * 1px);fromTo 会在构建时渲染 from 状态,需 tl.set(el, { opacity: 0 }, 0) 加 immediateRender: false;零时长补间在 seek 下渲染错误,用 ≥ 0.05 s;filter: blur() 上带 overshoot 的缓动会取负被忽略,需拆分位置与透明度/模糊;祖先元素上 opacity < 1 或 filter 会压平 preserve-3d;相机缩放小于 1 会露出页面背景,需给该层自有底色;独立测试注册前需 window.__timelines = window.__timelines || {}。参考视频的场景图(Product Hub,41.9 秒)是节奏示例而非脚本。技能明确不做:把场景交给并行子智能体;从参考视频取色、字体或布局;旋转画面;未经询问把 Product Hub 专属决定用于其他品牌;每行都弹跳;加入打字与点击之外的音效。