Communitygithub.com

motion-design-codice

创建动态设计动画(展示片、Logo开场、品牌视频),通过Node、canvas和ffmpeg以代码生成,交付可直接用于剪辑的片段。当用户说“给我做个动画”、“动画展示片”、“品牌动态图形”、“Logo动画”、“不用After Effects做视频”,或遇到动画卡顿、静帧、图形消失等问题时使用。

motion-design-codice 是什么?

该技能通过编写代码生成动态图形动画(如展示片、Logo开场、品牌宣传片),适用于那些希望在无需After Effects等视觉软件的情况下,通过编程方式完成高质量运动设计的开发者。其核心引擎基于Node.js、`@napi-rs/canvas`库(用于绘制)和ffmpeg(用于编码),每一帧都被定义为时间的纯函数(`draw(ctx, t)`),确保无状态、可并行渲染和精确可重复性。输出格式灵活:预览/社交使用H.264 MP4,剪辑交付使用ProRes 422 HQ MOV。它支持多种运动设计理念,包括基于弹簧缓动的平滑运动(带预设参数)、180度快门角度的运动模糊、连续变形(形状从上一场景的几何体自然演变)、严格的元素连续性(无突然消失/重现)。实用工具包括:帧的contact sheet预览、每0.5秒图像变化分析脚本(用于检测静帧或突变),以及通过`ffprobe`对最终文件进行验证。该技能还特别针对Instagram Reel定义了安全区域(图形中心位于540×960,关键内容在y≈420至1500之间),确保在平台裁剪后内容完整。对于Windows环境,Python命令使用`py`。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Radwtsm/claude-crew/tree/main/plugins/motion-design-codice/skills/motion-design-codice

在你喜欢的 AI 中提问

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

文档

代码化的运动设计

首先询问用户

  • 格式和时长(例如:Reel 9:16 1080×1920 30fps),以及将在哪里发布。
  • 品牌色、字体、Logo,以及哪些元素不可修改(Logo必须原样使用)。
  • 参考风格(一个视频或图片),以及是否包含文字或仅为图形。
  • 最终剪辑是否由用户自己完成(Premiere/After Effects):如果是,则交付独立的片段,而非单一视频。

引擎

  • Node + @napi-rs/canvas 进行绘制,ffmpeg 进行编码。
  • 每一帧都是时间的纯函数 draw(ctx, t):帧之间无状态,因此任何时刻都可以重新生成、检查或并行渲染。
  • 文件分离:库(调色板、字体、缓动、弹簧)、序列、背景、渲染、contact sheet、分析。
  • 在 Windows 上,Python 命令为 py。

运动

  • 弹簧(阻尼弹簧的闭式响应)用于入场和位移:起始果断、到达柔和、超调仅轻微可感知。保留 3–4 个预设(标准、快速用于退场、慢速用于大位移、柔和),而不是分散的值。
  • 柔和的 缓入缓出 用于形状变形和线条绘制。
  • 运动模糊:4 个子帧,180 度快门角度,取平均值。会减慢渲染速度:提供一个无模糊选项用于预览。
  • 序列元素之间偏移 0.05–0.15 秒。
  • 如果风格优雅,则避免卡通式弹跳;保持放松的节奏,动作之间留有空间。

连续性

  • 采用“形状变形”风格:每个场景从上一场景的几何体演变而来,没有生硬的切换。
  • 元素不会在变换过程中消失后又重新出现:当新元素诞生的同一帧内,原始元素停止绘制,且位置、大小和颜色保持一致。
  • 两个互换的形状在互换瞬间共享旋转、缩放和颜色;淡入淡出效果叠加(永远不要出现空帧或双重帧)。
  • 大的白色填充:从中心以实心方式生长,而不是通过淡入(淡入会显得发灰)。
  • 如果风格需要,不要有静止元素:加入呼吸感、缓慢旋转、漂浮、轻微的摄像机推进。

控制

  • 在完整渲染之前,生成 contact sheet(帧缩略图)。
  • 一个分析脚本,每 0.5 秒测量图像变化:找出静止片段和突变部分。
  • 使用 ffprobe 验证最终文件的时长、分辨率和帧率。

导出

  • 预览/社交:MP4 H.264 -crf 14 -pix_fmt yuv420p。
  • 剪辑:MOV ProRes 422 HQ 10 位。
  • 音频随后添加:
ffmpeg -i video.mp4 -i audio.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 256k -shortest finale.mp4

Instagram Reel

  • 图形中心位于 (540, 960);可用宽度最大约 900 px。
  • 个人主页网格将中心裁剪为 4:5 (1080×1350) 和 3:4:关键内容位于 y≈420 至 y≈1500 之间。
  • 底部和右侧有 app 的说明文字和按钮:请留出空间。
  • 其他导出尺寸请参见 grafica 插件。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相关技能