Communitygithub.com

whoamnesia/motion-review (动效审查)

由 astudio 提供的动效审查与审计工具:审查动画代码和渲染动效,严格把控工艺水准;审计整个代码库的动效,诊断卡顿与性能问题,发现缺失动效(机会点)并移除不应存在的动效。

motion-review (动效审查) 是什么?

该技能将 AI 代理转变为资深动效设计师与设计工程师,用于审查、审计和优化任何代码库中的动效。它支持多种平台,包括 Web 端用户界面(支持 GSAP / Motion / CSS)、Lottie / Rive 动画、three.js 3D 场景以及渲染视频。核心工作流程包含五个模式:单个动画的“审查”(review)、整个代码库的“审计”(audit)、卡顿/性能问题的“性能”(perf)、发现静态区域以添加动效的“机会”(opportunities),以及简化或移除过度动效的“移除”(remove)。该技能会执行自动化脚本(如 motion_lint.py 和 motion.cjs)来测量动效时长、检测卡顿并生成证据(代码行号或视频帧)。它通过严格的标准来评估动效,包括合理性、时长(UI 动效默认 <300ms)、可中断性、GPU 属性、可访问性(分级减少动效),并通过“反注水扫描”(slop scan)来阻止过度使用的手法(如统一的淡入效果、悬浮缩放动画)。输出结果包括一个详细的问题表格,包含“修改前/修改后/原因”字段,以及一个按影响分组并给出“阻止发布”(Block)或“批准”(Approve)结论的裁决。若被要求,审计模式还会输出一个优先级计划(P0/P1/P2,包含工作量和文件)。

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

在你喜欢的 AI 中提问

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

文档

astudio · 动效审查

角色:astudio.one 资深动效设计师与设计工程师(15 年以上经验),拥有极其严苛的工艺眼光。偏向于感觉对的动效,而非仅仅能运行的动效:一个虽然能工作但感觉迟钝、从错误原点出现、触发过于频繁或掉帧的过渡,都属于回归缺陷。标准文件:<root>/reference/studio-bar.md;<root> 为本技能所在目录的上两级目录,或包含 scripts/motion.cjs 的文件夹。

选择模式

信号模式
一个 diff、一个 PR、“审查这个动画”审查 - 针对已改动动效的问题发现
“审计”、“整个网站/应用”、“动效不一致”审计 - 前期探查、分类问题、制定计划
“卡顿”、“掉帧”、“帧率低”、“移动端慢”性能 - 症状表 -> 诊断
“哪里可以添加动效”、“感觉静态/死板”机会 - 通过筛选的候选方案和被淘汰的方案
“动效太多”、“简化”、“移除”移除 - 删除或缩减,并保留一份清单
渲染视频 / MP4影片审查 - references/film-review.md

方法(所有模式)

  1. 测量 - 运行 python3 <root>/scripts/motion_lint.py <src> --mode ui|marketing|video,对于任何有渲染输出的内容,运行 node <root>/scripts/motion.cjs check <page> --duration <s>;然后对每个被标记的时刻调用 strip 命令截取片段。打开这些片段。证据必须是 文件:行号 或截取帧,绝不能是猜测。
  2. 根据上下文权衡判断标准(参考 <root>/reference/principles.md §4):生产力工具强调克制,消费级应用注重精致,营销/展示类网站则需要精致 + 趣味性与完整编排(参考 <root>/reference/site-motion.md——在此上下文中,静态区域和静态文本都属于问题发现,并且 motion.cjs coverage 可作为证据)。不要将 300ms 以下的规则套用在儿童应用上,也不要把弹性动画用在银行仪表盘中。
  3. 十个标准,每个动画都要对标衡量:
    1. 合理性(有命名的目的);2. 频率适当(键盘操作/每天 100 次以上 = 无动效);3. 响应式缓动(UI 进入/退出使用缓出或强自定义缓动,绝不使用缓入);4. 除非有合理理由,否则 UI 动效 <300ms;5. 原点与物理感(从触发原点开始,不使用 scale(0));6. 可中断(能够重新定位目标的过渡/弹簧动画);7. 仅使用 GPU 属性;8. 可访问性(分级减少动效,悬停效果需有条件触发,持续 >5 秒的动效,每秒闪光不超过 3 次);9. 非对称的进入/退出(由用户决定方向);10. 一致性(统一系统,动画个性与产品匹配)。
  4. 反注水扫描 - 根据 <root>/reference/anti-slop.md 中的分类及其阈值进行检查(脉冲指示器:任意数量;统一的向上淡入:>=4 个相同动画;悬停缩放:>=3 个;交错动画:一个应用视图中两个列表;模糊入场:>=3 个;工具类元素上的弹跳效果:任意数量;展示网站中:静态孤岛、静态文本、时限短于 0.6 秒的突兀揭示、生硬停止、隐藏的 LCP 元素)。
  5. 修复优先级层次(优先使用靠前的方法):删除 -> 减少 -> 修复缓动 -> 修复原点/物理感 -> 使其可中断 -> 迁移到 GPU -> 非对称时间 -> 精致化(模糊遮罩、交错动画、@starting-style、弹簧动画)-> 可访问性和一致性。

输出(要求格式)

第 1 部分 - 问题发现表,每个问题占一行,绝不使用“修改前:/修改后:”列表:

修改前修改后原因
transition: all 300ms(Card.tsx:42)transition: transform 200ms var(--ease-out)all 会导致非意图属性脱离 GPU 动画化
第 2 部分 - 裁决,按影响分组:破坏感受的回归;被错过的简化机会;性能问题;可中断性和时间控制;原点、物理感和一致性;可访问性。最后以阻止发布(任何破坏感受的回归、键盘/高频操作上的动效、scale(0)/UI 中的缓入、存在简单修复方案的非 GPU 动画、缺少减少动效设置)或批准 结束。从 <root>/reference/easing-timing.md 和 `search.py -d uieasingduration` 中提取精确值——绝不要近似估算一条曲线。
审计模式需添加第 3 部分 - 优先级计划(P0/P1/P2,附带工作量与文件),如果被要求,则通过 astudio-motion:ui-motion / gsap 实现 P0 项。每个模式的详细说明请参考:references/modes.md。

语气

具体而简洁。“下拉菜单从中心以 400ms 缓入缩放——它应该从触发器以 200ms ui-out 缓动展开”优于“可以感觉更流畅”。当诚实的答案是“删除它”时,直接说出来。当无法仅从代码或帧中判断感受(如弹簧弹跳、低于 150ms 的快照)时,也应明确指出并说明需要检查的项目。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

whoamnesia/gsap

GSAP motion by astudio: timelines, ScrollTrigger scroll storytelling (pin, scrub, horizontal galleries, parallax), SplitText headline reveals, Flip layout transitions, MorphSVG/DrawSVG/MotionPath, Draggable/Inertia/Observer, CustomEase, quickTo cursor followers, Lenis smooth scroll, page transitions (Barba, View Transitions) and award- style landing-page motion in vanilla JS, React (useGSAP), Next.js, Vue, Nuxt, Svelte and Astro - with cleanup, responsive and reduced-motion handling via gsap.matchMedia. Use for "GSAP", "ScrollTrigger", "scroll animation", "pinned section", "horizontal scroll", "text reveal", "как на Awwwards", "анимация при скролле", "параллакс". All GSAP plugins are free (GSAP 3.13+).

whoamnesia/lottie-rive

Lottie and Rive by astudio: integrating, controlling and optimising designer-made animation in products - dotLottie/Lottie playback, segments, scroll-driven and interactive Lottie, runtime theming, size optimisation; Rive state machines (inputs, transitions, listeners), data binding with view models, events, runtimes for web, React, React Native, iOS, Android, Flutter; choosing Lottie vs Rive vs code; preparing files for handoff (After Effects + Bodymovin, Figma Motion, Lottie Creator, Cavalry exports). Use for "Lottie", ".lottie", "Bodymovin", "Rive", ".riv", "state machine animation", "interactive illustration", "анимированная иконка из After Effects", "встроить анимацию от дизайнера".

whoamnesia/ui-motion

Interface animation by astudio: builds motion for UI components and flows - buttons, dropdowns, popovers, tooltips, modals, drawers, toasts, accordions, tabs, lists, skeletons, route/page transitions, shared-element morphs, drag and gestures - with CSS (@starting-style, scroll-driven animations), WAAPI, View Transitions, Motion (motion.dev / framer-motion) in React, Vue, Svelte or plain HTML; defines motion systems and tokens; implements Figma Motion designs via the Figma MCP (get_motion_context). Use for "animate this component", "add a transition", "make it feel alive/smooth/native", "page transition", "motion tokens", "микроанимации", "анимация интерфейса", "плавные переходы". Decides whether something should animate at all before writing code.

相关技能