MotionScore performance audit

AI Kit brings the performance engineer skills of MotionScore directly to your agent. Combining code and runtime analysis, MotionScore finds and fixes animation performance issues before they ship.

/motion audit

It ranks animations according to the methodology we created in the Web Animation Performance Tier List, producing a report with fix recommendations that your agent can then follow.

Install

/motion audit the homepage

The MotionScore skill is part of the Motion AI Kit: installing the AI Kit sets up the /motion skill (which includes the audit) for every supported editor. Follow the AI Kit install guide.

Usage

Run the audit by asking your agent to run a performance audit (adding /motion might be required in some agents):

By default, this will run a broad search of CSS, Motion, GSAP and Anime.js APIs in your codebase.

It's possible to limit the scope by passing a directory or filename:

/motion audit @components/Button

Additionally, you can request to scope the audit to specific types of animations, or specific APIs:

Can you perform a /motion audit of all scroll animations

It's also possible to perform a runtime analysis of a page by mentioning "runtime", a specific page, or passing a URL:

/motion performance audit on the homepage

Overall rank

The report starts with an easily-scannable letter ranking. This represents an average ranking of all discovered animations.

## Rank

:'██████::
'██... ██:
.██:::..::
. ██████::
:..... ██:
'██::: ██:
. ██████::
:......:::

Breakdown

Next, you'll receive a full breakdown describing the absolute number of animations for each tier, and the percentage of animations that this tier represents. The idea is for this graph to be top-heavy (more S, A and B tier animations than below).

## Breakdown

S █████████████████░░░░░░░░░  2 · 68%
A ░░░░░░░░░░░░░░░░░░░░░░░░░░  0 ·  0%
B ░░░░░░░░░░░░░░░░░░░░░░░░░░  0 ·  0%
C ████████░░░░░░░░░░░░░░░░░░  1 · 32%
D ░░░░░░░░░░░░░░░░░░░░░░░░░░  0 ·  0%
F ░░░░░░░░░░░░░░░░░░░░░░░░░░  0 ·  0%

Findings

In findings, there's an entry for every actionable animation that explains:

• What: Filename, line numbers and tier

• Why: The values being animated, what parts of the render pipeline they trigger

• Impact: Is it worth fixing/changing?

• Improvements: How to improve performance (where possible)

For instance, an animation like this:

<motion.div
  animate={{
    scale: [1, 2, 2, 1, 1],
    rotate: [0, 0, 180, 180, 0],
    borderRadius: ["0%", "0%", "50%", "50%", "0%"],
  }}
  transition={{ repeat: Infinity }}
/>

Will flag that as these scale and rotate values are always animating together, we can animate transform directly to run this entirely on the GPU:

<motion.div
  animate={{
    transform: [
      "scale(1) rotate(0deg)",
      "scale(2) rotate(0deg)",
      "scale(2) rotate(180deg)",
      "scale(2) rotate(180deg)",
      "scale(1) rotate(0deg)",
    ],
    borderRadius: ["0%", "0%", "50%", "50%", "0%"],
  }}
  transition={{ repeat: Infinity }}
/>

Anti-patterns

This lists general patterns that can affect animation performance, like detecting filter: blur(>10px), long running off-screen animations, excessive use of will-change etc.

For example, the animation from before is repeat: Infinity, so this part of the report will suggest that performance could be improved by swapping animate to whileInView, thereby only running the animation while inside the viewport.

<motion.div
  whileInView={keyframes}
  transition={{ repeat: Infinity }}
/>

Accessibility

This part of the report looks for things like support for prefers-reduced-motion or rapidly flashing animations and suggest ways to fix.

Top 3 Recommendations

The report concludes with the top 3 priority fixes. This is a summary of the worst offenders, so you can ask your LLM to "fix the top 3 issues", or simply "fix" to fix everything in the report.

Tiers

The broad tier list used for grading animations is as follows:

Tier	Cost	Animated properties
S	Compositor only	transform, opacity, filter, clip-path, ScrollTimeline
A	JS → Compositor	Same properties, but set from JavaScript each frame
B	One-time layout read → S/A	layout, layoutId
C	Repaint each frame	background-color, color, border-radius, box-shadow, CSS variables, SVG attributes, View Transitions
D	Layout + repaint each frame	width, height, margin, padding, top/left, font-size, gap
F	Forced sync layout per cycle	Interleaved DOM reads/writes, :root CSS variable animation

The full explanation of these can be found in the Web Animation Performance Tier List.

Code Audit vs MotionScore

The Code Audit is prevention: it reads your source statically, in your editor, so jank never ships. It can't measure what it can't run, so it predicts cost from the properties and methods you animate.

MotionScore is proof: it loads your live site in a real browser and measures what animations, scroll animations, GPU pressure and style/layout thrashing actually cost at runtime, tracks regressions over time, and can gate your CI. It's a subscription because performance is something you monitor, not check once.

Use both. Catch it in the editor with the Code Audit, then verify and keep it honest in production with MotionScore. Same S-F grading system across both, so the grades mean the same thing.