Communitygithub.com

whoamnesia/motion-review

來自 astudio 的動畫審查與稽核:嚴格把關動態品質,審查動畫程式碼與渲染結果,診斷卡頓與效能問題,找出缺少動畫的機會,並移除不該存在的動畫。

motion-review 是什麼?

此技能為 AI 代理提供一套嚴謹的動畫審查與稽核系統,由 astudio 資深動態設計師(15+ 年經驗)打造。它支援多種模式:個別動畫審查(review)、全站稽核(audit)、效能診斷(perf)、發掘動畫機會(opportunities)、過度動畫移除(remove),以及渲染影片審查(film review)。適用於網站、產品 UI、GSAP/Motion/CSS、Lottie/Rive、three.js 等技術。其運作方式透過 Python 與 Node.js 腳本進行程式碼與渲染偵測,並以十項標準(如正當性、頻率、緩動、時長、中斷性、GPU 屬性、無障礙等)逐一檢驗每支動畫。最終產出「發現表格」與「封鎖/核准」 verdict,必要時附帶渲染截圖作為證據。此工具特別適合開發者與設計師用於解決「動畫卡頓」、「感覺廉價/緩慢/像 AI 生成的」、「動畫不一致」等常見問題,其預設立場是「標記問題」,只有通過嚴格標準才給予核准。

相容平台~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、「審查這個動畫」review - 針對變更動畫的發現結果
「稽核」、「整個網站/應用」、「動畫不一致」audit - 調查、分類發現結果、計畫
「卡頓」、「跳動」、「掉幀」、「在手機上很慢」perf - 症狀表格 -> 診斷
「哪裡可以加入動畫」、「感覺靜態/死板」opportunities - 篩選候選與排除項目
「動畫太多」、「簡化」、「移除」remove - 刪除/減少,保留清單
一段渲染影片 / MP4film review - 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。開啟這些片段。證據是 file:line 或一個片段幀,絕非猜測。
  2. 根據情境加權鏡頭(<root>/reference/principles.md §4):生產力工具需節制,消費應用需精緻,行銷/展示網站需精緻 + 趣味與完整編排(<root>/reference/site-motion.md - 在那裡,靜態區塊與靜態文字都是發現項目,且 motion.cjs coverage 是證據)。不要對兒童應用強制小於 300 毫秒的規則,也不要對銀行儀表板施加彈性趣味。
  3. 十項標準,每支動畫都要以此衡量:
    1. 有正當理由(命名目的);2. 頻率適當(鍵盤 / 每日超過 100 次 = 無動畫);3. 響應式緩動(進入/離開使用 ease-out 或強自訂緩動,UI 上絕不使用 ease-in);4. 除非有正當理由,UI 動畫小於 300 毫秒;5. 原點與物理感(觸發原點,無 scale(0));6. 可中斷(可重新定位的過渡/彈簧);7. 僅使用 GPU 屬性;8. 無障礙(分級減少動畫、滑鼠懸停需條件觸發、暫停超過 5 秒、每秒少於 3 次閃爍);9. 不對稱進入/離開(由使用者決定);10. 連貫一致(單一系統,個性符合產品)。
  4. 粗糙掃描 - <root>/reference/anti-slop.md 類別及其門檻(脈衝指示器:任何;統一淡入:>=4 個相同;懸停縮放:>=3;交錯:應用程式中 >=2 個清單;模糊進入:>=3;實用元件上的彈跳:任何;展示網站:靜態孤島、靜態文字、快速揭露 < 0.6 秒、硬停止、隱藏 LCP)。
  5. 修正層級(優先選擇前面的):刪除 -> 減少 -> 修正緩動 -> 修正原點/物理感 -> 使其可中斷 -> 移至 GPU -> 非對稱時序 -> 精緻(模糊遮罩、交錯、@starting-style、彈簧)-> 無障礙與連貫性。

輸出(必要格式)

第一部分 - 發現表格,每個問題一行,絕不使用「修改前:/修改後:」列表:

修改前修改後原因
transition: all 300ms(Card.tsx:42)transition: transform 200ms var(--ease-out)all 會動畫化 GPU 外的非預期屬性
第二部分 - verdict,按影響分組:破壞感受的回歸;遺漏的簡化;效能;可中斷性與時序;原點、物理感與連貫性;無障礙。結尾為封鎖(任何破壞感受的回歸、鍵盤/高頻動作上的動畫、scale(0)/UI 上的 ease-in、有簡易修正的非 GPU 動畫、無減少動畫)或核准。從 <root>/reference/easing-timing.md 和 `search.py -d uieasingduration` 中提取精確值 - 切勿近似曲線。
稽核需增加第三部分 - 優先計畫(P0/P1/P2、工作量、檔案)以及,若被要求,透過 astudio-motion:ui-motion / gsap 實作 P0。各模式的詳細內容:references/modes.md。

語氣

具體且簡潔。「下拉選單從中心以 400 毫秒 ease-in 縮放 - 它應從觸發點以 200 毫秒 ui-out 生長」勝過「感覺可以更順暢」。當老實答案是「刪掉它」時,就說出來。當無法從程式碼或幀判斷感覺時(彈簧彈跳、小於 150 毫秒的快照),就指出來並指定要檢查的項目。

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.

相關技能