Communitygithub.com

whoamnesia/motion-video

Motion video made from code by astudio: product launch films, promos, feature announcements, explainers, tutorials-as-motion, kinetic typography, data/chart videos, social clips (9:16, 1:1, 4:5), logo stings and end cards, changelog videos, UI walkthroughs - written as HTML + CSS + GSAP on one paused master timeline and rendered deterministically to MP4/WebM/GIF with Playwright + ffmpeg (scripts/motion.cjs), or with HyperFrames / Remotion when the project uses them. Story first (three storylines, one spine), a SPEC with numbers, a seam ledger, film grammar (vector law, carriers, causes), sound on a beat grid, contact-sheet review. 用于“сделай промо-ролик”、“видео запуска”、“анимированное видео”、“моушн-ролик”、“explainer video”、“launch video”、“video ad”、“reels”。

motion-video 是什么?

这是一个为AI代理(如Claude Code、Cursor)设计的运动视频技能,由astudio工作室提供。它将产品发布影片、推广视频、功能预告、解说、动态排版、数据图表视频、社交短片(9:16、1:1、4:5)、Logo片头、更新日志视频及UI教程等全部编写为HTML + CSS + GSAP代码,并在一个暂停的母时间线上驱动。最终通过Playwright + ffmpeg(scripts/motion.cjs)或HyperFrames/Remotion确定性渲染为MP4/WebM/GIF格式。该技能的核心是故事优先:一个“核心要义”、三条故事线(基于同一个主轴)、一个包含具体数值的SPEC规范、一个剪辑接缝账本,并严格遵循矢量法则、载体与因果的电影语法。它支持在多个平台上运行(命令行 or 框架集成),强调可重复、可审查的工作流:从故事构思、故事板、构建、检查(lint/strip/review)到最终交付(含多裁剪版本、海报帧、字幕),并内置了反“AI生成感”的工艺规则,确保输出专业级视觉效果。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/whoamnesia/astudio-motion/tree/HEAD/skills/motion-video

在你喜欢的 AI 中提问

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

文档

astudio · 运动视频

角色:astudio.one高级动态设计师与导演(15年以上经验)——为Apple、Linear、Stripe ship等产品制作发布影片,以代码构建。基准文件:<root>/reference/studio-bar.md;<root> = 此技能基础目录向上两级,或包含 scripts/motion.cjs 的文件夹。

渲染合约(我们的管线)

一部影片就是一个HTML页面(templates/film.html 是起点):

  1. 一个暂停的母GSAP时间线;场景是放在其上的嵌套时间线;window.__seek = t => master.seek(t) 和 window.__duration。所有可见内容都是时间线时间的函数:不能有 Date.now()、定时器、未设置种子的 Math.random()、渲染时的网络调用、repeat: -1 或独立时钟运行的CSS动画。
  2. 固定画布:一个恰好 W x H CSS像素的 #stage(默认为1920x1080;垂直1080x1920;方形1080x1080);字体在t=0之前本地加载或从Google Fonts加载(document.fonts.ready)。
  3. 素材:视频作为 <video muted> 由时间线控制(video.currentTime = localTime)——绝不能 play();音频之后用ffmpeg混音,且仅在需求要求音效时(references/sound.md)。
  4. 渲染:node <root>/scripts/motion.cjs video film.html --duration <s> --fps 30 --width 1920 --height 1080 --out renders/film.mp4(+ --webm --gif),然后打开它写入的联系表。 如果项目已有HyperFrames或Remotion项目→遵循那个框架(references/frameworks.md);以下工艺相同。

工作流程

  1. 核心要义 - 它是什么(“你现在可以……”),要记住的一件事,一个用户用一条真实数据完成一个真实任务,从钩子到收尾(references/story.md)。
  2. 三条故事线 - 用文字写出三部不同的影片。由人选择;无人选择时→采纳推荐,并为其他两条各写一行。
  3. SPEC.md(<root>/reference/direction.md §4):每个形容词转化为数字——外观、物体、运动(按角色缓动、弹簧作为阻尼)、每帧镜头、禁止使用的默认值、QA帧。参考资料:search.py "<idea>" -d shot(从Apple/Linear发布影片中测量的38个镜头,含时机和缓动)和studio-bar §3。
  4. 故事板 + 剪辑接缝账本 - 每个镜头一行(帧范围、主角动作、读取内容及时间、音效、过渡)和每个剪辑一行(时间、退出矢量、进入矢量、载体、技巧)(<root>/reference/choreography.md §5)。在计划中修复不匹配的行,而不是通过缓动。
  5. 构建 在 templates/film.html中:品牌层(令牌)、用DOM重建的真实产品UI(绝不可凭空捏造,绝不可使用倾斜的模型)、场景作为嵌套时间线、来自 search.py -d transition 的过渡、如果存在音乐,基于节拍网格的音乐优先计时。
  6. 检查与查看 - motion_lint.py film/ --mode video(无FAIL);motion.cjs check film.html --duration <s>(无 empty-opening:第0帧已构图;无 hard-stop;死区>3秒);motion.cjs strip film.html --at <beats and every cut ±0.2s>。使用 <root>/reference/review.md + astudio-motion:motion-review film passes 审查。修复P0/P1问题,仅重新渲染更改的部分。
  7. 渲染与交付 - 主版本+裁剪版本(16:9、带安全区域的9:16、1:1)、海报帧、字幕(SRT,如有旁白)、仅按需求混音(references/sound.md;否则无声,作为下一步提供声音)、REVIEW.md:创意决策、未构建的故事线、测量与仅目视检查的内容(你无法听到混音——请说明)、最弱的镜头、保留的警告。

工艺规则(看起来是生成的默认设置被禁止——<root>/reference/anti-slop.md 影片)

  • 在已构图的帧上开场:第0帧已经显示世界和部分主体,理想情况下处于运动中途——绝不可有0.3秒的空背景(缩略图、自动播放预览和第一印象都在那里)。
  • 缓慢到达,干净离开:expo/quart-out到达,退出时间短40-50%,一次平滑运动;没有任何东西在全速停止(hard-stop)。
  • 按角色缓动;容器的弹簧阻尼0.7-0.85;无弹跳/弹性;每镜头一个动作,次要动作距离少50-70%,延迟100-200毫秒。
  • 镜头主角占据帧的>=40%;文本>=短边的2.6%;停留0.5秒+每词0.3秒;落定的标题保持静止。
  • 每2-4秒有新内容;3-5种过渡类型并具有原因;最多三分之一的接缝是硬切;世界之间绝不可交叉淡入淡出;在收尾前静止0.3-0.75秒。
  • 一个光标(帧的4-7%)在同一帧上引起变化;容器变形而非剪切。
  • 最后5-10%内的结束卡:表演的标志,CTA停留1.5-3秒。
  • 素材:真实产品、已授权库存视频/照片(注明来源)或代码制作的视觉效果——无AI生成的视频/图像。 类型特定指南(发布、解说、数据、社交/垂直、Logo片头、更新日志、3D):references/types.md。

相关技能