Communitygithub.com

不硬切的动效成片

把静帧收成一条跟着对方自己的音乐走的连续动效成片。画面不硬切,缓动偏液态。仓库里有静音示范 mp4,换上音乐之前就能看完成度。

不硬切的动效成片 是什么?

MotionKit 用 HyperFrames 把界面静帧和一条给定音轨渲成一条不硬切的动效成片。运镜、连贯和完成度都写成了规则。README 挂了完整静音成片,包括 a-ember-lumen.mp4、b-morph-nook.mp4、c-neon-aura.mp4、d-saas-tally.mp4,另有 webp 预览。

兼容平台✓Claude Code✓Codex CLI~Cursor
npx skills add https://github.com/DyneStein/motionkit/tree/main/skill

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

MotionKit

工具包根目录:此技能文件所在的上一级文件夹(称为 $KIT);如果技能是符号链接,请解析链接(例如 ~/.claude/skills/motionkit → <克隆>/skill,因此 $KIT = <克隆>)。该技能提炼自用户整理的 60 个参考视频;请遵循本技能而非通用的运动图形默认值。

不可协商的规则(用户的长期偏好)

  1. 无突然剪辑。 每个场景变化必须由两侧的内容共同承载($KIT/grammar/01-continuity.md)。最多 1/3 的场景过渡可以是硬切,且只能发生在强节拍上。
  2. 液体、流畅、圆润。 长尾缓出、接触时挤压/拉伸、形状之前的材质变化、模糊作为粘合剂(02-motion-easing.md)。
  3. 切勿生成或合成音乐。 使用用户的曲目。如果没有提供,请索要一个。工具包不附带任何音乐。
  4. 相机由内容决定(第 3-4 轮): 规划一条多样化的路线(切勿连续两次朝同一方向移动:左右平移、上下升降、对角线、推近、拉远、静止),并在静止相机下用抛光元素交替相机节拍与元素节拍;将事件与音乐同步(sync_check.py 提升 ≥ ×1.35;环境音乐使用 beatSync(),节奏音乐使用节拍网格)。文本驱动影片 → 滑行跟随相机(通过单词目标使用样条线 e:"glide",在区域间使用钟形缓动——绝不用逐词跳跃);元素驱动影片 → 近乎锁定的相机,仅使用有动机的、种籽化运动(camSeed,seed)——绝不为了运动而运动,绝不重复模式。早期规则(对文本影片仍适用):(第 2 轮:“这只是视角,相机并没有移动”):跟随相机跟随活跃单词/主角穿越比画面更大的世界,单一物体故事时在站点间运载旅行,始终有视差参考层($KIT/grammar/08-camera.md § v3,$KIT/research/camera-notes.md,primitives §19–20)。另外(用户称其缺失为“重大重大重大缺陷”):将每部影片构建为通过 camera-rig.js 观看的 3D 世界;相机至少 65% 的帧处于运动状态(参考中位数 77%,使用 research/camera_motion.py 测量);字幕随世界移动,停顿处继续运动,停顿-扫视节奏,至少 3 个深度层带视差、景深、手持漂移、扫视时运动模糊($KIT/grammar/08-camera.md)。
  5. 抛光标准($KIT/grammar/09-polish-bar.md):紧致辉光(无光晕,切勿缩放发光元素,无大尺度 SVG 模糊滤镜——使用渐变+颗粒);容器变形为 SVG 几何体,确保每帧边角圆润(无蒙版揭示);带文本的 UI 从深度/柔焦中显现——无缩放弹出,无倾斜贴纸布局;每个平面物体获得阴影+边缘光+接触阴影。
  6. 专业元素和字体: 从 $KIT/elements/ 构建 UI/3D 部件(参见 elements/showcase/ 和 research/element-notes.md);字体来自 $KIT/fonts/FONTS.md——绝不使用通用默认值。
  7. 专业完成度: 每行一个强调,斜体衬线或权重跳跃强调,每帧 ≤ 3 个焦点元素,影片中始终存在一个持续常量(画布、标题、水平线或雾)。
  8. 默认使用竖屏视频(除非另有说明):1080×1920,文字位于 168–1330 像素带内,每行 ≤ 5 个单词,无任何内容小于 28 像素,第 0 帧是钩子(绝不能是黑色或标志)。
  9. 保持 token 高效:每个章节一个场景文件(或整个连续变形一个文件),仅快照状态变化。

工作流程

  1. 简报(简短)。 主题/品牌、信息、格式、长度、音乐文件。仅询问缺失的信息;一轮完成。
  2. 选择风格 从 $KIT/styles/STYLES.md(底部的表格将简报映射到风格)。完整阅读该卡片;打开 1–2 个 $KIT/research/video-notes/ 中的参考笔记以获取细节。
  3. 分析音乐: npx hyperframes audio <曲目> --only kind,bpm,beats,downbeats,sections,onsets --json。节奏型 → 节拍网格(beat(n),bar(k),primitives §1)。环境型 → 按段落边界划分章节,在最强音头处放置主角事件(--threshold 0.3)。
  4. 用一个表格规划: 章节 ×(时间窗口、进入下一个场景的运载器、物体状态、字幕、相机运动)。为每个过渡命名运载器和相机运动;如果无法命名,则重新设计过渡。将这些章节布局为同一个 3D 世界中的地点。
  5. 使用 HyperFrames 构建(首先加载 /hyperframes 以获取合约)。从最接近的样本开始(v2 = 带相机):$KIT/samples/a-ember-lumen(S1),b-morph-nook(S2),c-neon-aura(S3),d-saas-tally(S4)——将其 cp -R 到新项目,然后重写。使用 $KIT/primitives/PRIMITIVES.md 中的代码块。将调色板和字体放入根目录的 data-composition-variables 中。
  6. 验证: npx hyperframes check --json 2>/dev/null(标准错误输出嘈杂)→ 修复错误,权衡警告 → npx hyperframes snapshot --at <每个状态变化 + 扫视中间> -o .snap/x → 读取联系表 → 修复(放大检查角落和辉光:snapshot --zoom)。通读 07-engineering-pitfalls.md 和 09-polish-bar.md 清单。渲染后,测量相机运动:python3 $KIT/research/camera_motion.py <包含 .mp4 的目录> out.json——目标 moving_frac ≥ 0.65(参考的下四分位数;中位数 0.77)。
  7. 渲染: npx hyperframes render -o <输出>.mp4。在用户评审时,在交付渲染前打开 Studio 预览。

快速参考

  • 运载器(每部影片选 3–5 个):元素变成世界 · 穿过缩放 · 形状变形 · 引导物体 · 一张卡片多种状态 · 虹膜 · 颜色泛滥 · 模糊扫视 · 连续世界相机 · 锚定单词 · 形状押韵 · 携运穿过 · 粒子溶解 · 介质擦拭。
  • 缓动调色板:进入 expo.out/power4.out 0.5–0.9 秒 · 退出 power3.in(入场时间的 40–50%)· 相机/变形 power2.inOut · 高级弹簧 back.out(1.4) · 仅轨道/旋转/进度使用线性。
  • 文字:逐词模糊进入(无平移)· 灰色→墨水按读跟随 · 老虎机单词 · 高亮药丸关键词 · 斜体衬线强调 · 句子中的内联图标。
  • 故事形态:问题(黑暗)→揭示→功能→行动号召 · 混乱→秩序 · 一个主角多种状态 · 提示→结果 · 带锚定单词的宣言 · 微循环。

扩展工具包

当用户添加新的参考视频时:制作联系表(带时间戳,0.33–1 秒采样)+ 过渡处的 10 fps 条带,为每个视频在 research/video-notes/ 中写笔记,向 research/INDEX.md 添加行,并将新模式融入语法/风格文件。当构建过程教会新的 bug 或原型时,将其添加到 07-engineering-pitfalls.md / PRIMITIVES.md。

相关技能