SuperAPI AI 工具集

motion-graphics

前端与建站

查看项目

更新于 10-15 20:29

技能介绍

用途:用代码生成帧精确、可复现的动态图形视频。整段视频是一个 HTML 页面,每个像素都是时间 t 的纯函数,在无头 Chromium 中逐帧渲染,再用 ffmpeg 编码。目标是达到资深动态设计师作品集水准,而非幻灯片。

主要能力:按格式文件(如 formats/launch-video.md、formats/shorts.md)确定简报、内容步骤与节拍结构;每次运行生成全新概念、脚本与视觉。工作目录包含 brief.md、beats.md、assets/、motion.html、motion.json、engine/、out/。引擎初始化:cp -R <this-skill>/engine engine && (cd engine && npm install && npx playwright install chromium)。

使用方式:motion.html 加载 engine/runtime.css 与 engine/runtime.js,构建 DOM、注册场景后调用 MG.ready()。可用 MG.scene、MG.always、MG.prog、MG.tween、MG.spring、MG.split、MG.set、MG.clip、MG.rng、MG.noise、MG.fmt、MG.captions 等辅助函数。渲染逻辑中不得使用 Date、performance.now()、requestAnimationFrame 或 Math.random;CSS @keyframes 允许,但需用 animation-delay 计时。预览:motion.html?w=1920&h=1080&t=3.2&guides=1,实时播放加 ?play=1。渲染命令:node engine/render.mjs --html motion.html --config motion.json --stills <t1,t2,...> --stills-dir out/stills;node engine/render.mjs --html motion.html --config motion.json --out out/video.mp4 --workers 4。音频仅使用清单中授权音乐与音效,否则交付无声并说明;混音与响度目标约 −14 LUFS、真峰值不高于 −1 dBFS。QA 用 ffprobe 与 ffmpeg 生成联系表逐帧检查,修复后重渲。

适用场景:产品发布或功能预告视频、竖屏短视频与解说。限制:需安装 Node、Playwright Chromium 与 ffmpeg;一次只跑一个完整渲染;字体与图片须在清单内;未提供授权音频时只能静音交付。