Get started with MotionScore
MotionScore is an animation performance auditing tool that safeguards against shipping slow user experiences.
Across both desktop and mobile viewports, MotionScore analyses your website's animations, scroll interactions, layout thrashing, and GPU memory usage.
You receive a report with easy-to-digest grades, in-depth per-element data, and a list of recommendations with copy-paste prompts to help your LLM fix the underlying issues.
Rather than flaky FPS counts or slow frame analysis, MotionScore detects running animations and scores them based on Motion's Web Animation Performance Tier List.
What's analysed
MotionScore currently audits four broad areas of animation performance:
Animations: Browser (CSS/WAAPI) and JavaScript-driven animations. Flags layout-triggering properties, off-screen animations, large paint animations, and slow CSS variable inheritance chains.
Scroll animations: Scroll-linked and scroll-triggered animations, including
ScrollTimeline,ViewTimeline,IntersectionObserver, and JavaScript scroll handlers.Thrashing: Layout and style thrashing caused by interleaved DOM reads and writes during mount and animation frames.
GPU pressure: Compositor layer count, texture memory usage, overlap-promoted layers, and persistent
will-changedeclarations.
Tier system
Every animation receives a grade so you can see at-a-glance the impact of each individual animation:
Tier | Description |
|---|---|
S | Excellent. Animations are run entirely on the compositor, so animations aren't interrupted by work on the main thread. |
A | Animations don't trigger paint, but are run from the main thread. |
B | S/A-tier animations that require some style or layout measurements |
C | Animations trigger paint. |
D | Animations trigger layout. |
F | Per-frame style or layout thrashing. |
For a deep dive into the tier system and the principles behind the tier system, see The Web Animation Performance Tier List.
Each category (Animations, Scroll Animations, GPU pressure, thrashing) starts with a score of 100. Each animation, depending on its base tier, whether it's off-screen, a large paint surface etc, ends up with a score that detracts from that initial score.
Final category grades are based upon that final score.
Running an audit
There are three ways to run a MotionScore audit:
Web UI
Visit score.motion.dev, enter a URL, and click Analyse. Results are ready in around a minute.
As well as a full score breakdown, the site also provides a list of recommendations based on your report. Each recommendation comes with a copy-paste prompt that you can give to your LLM.
Learn more about the MotionScore web UI.
CLI
Run an audit from your terminal:
npx motionscore <url
The CLI will print a summary report directly in your terminal, and also provide a sharable URL to the audit.
Paid accounts can use the CLI to block CI/CD pipelines against minimum performance scores using private audits.
Learn more about the CLI.
Codebase audit AI skill
MotionScore also provides an AI skill that analyses your actual codebase and suggests performance improvements without needing to deploy.
MotionScore is an animation performance auditing tool that safeguards against shipping slow user experiences.
Across both desktop and mobile viewports, MotionScore analyses your website's animations, scroll interactions, layout thrashing, and GPU memory usage.
You receive a report with easy-to-digest grades, in-depth per-element data, and a list of recommendations with copy-paste prompts to help your LLM fix the underlying issues.
Rather than flaky FPS counts or slow frame analysis, MotionScore detects running animations and scores them based on Motion's Web Animation Performance Tier List.
What's analysed
MotionScore currently audits four broad areas of animation performance:
Animations: Browser (CSS/WAAPI) and JavaScript-driven animations. Flags layout-triggering properties, off-screen animations, large paint animations, and slow CSS variable inheritance chains.
Scroll animations: Scroll-linked and scroll-triggered animations, including
ScrollTimeline,ViewTimeline,IntersectionObserver, and JavaScript scroll handlers.Thrashing: Layout and style thrashing caused by interleaved DOM reads and writes during mount and animation frames.
GPU pressure: Compositor layer count, texture memory usage, overlap-promoted layers, and persistent
will-changedeclarations.
Tier system
Every animation receives a grade so you can see at-a-glance the impact of each individual animation:
Tier | Description |
|---|---|
S | Excellent. Animations are run entirely on the compositor, so animations aren't interrupted by work on the main thread. |
A | Animations don't trigger paint, but are run from the main thread. |
B | S/A-tier animations that require some style or layout measurements |
C | Animations trigger paint. |
D | Animations trigger layout. |
F | Per-frame style or layout thrashing. |
For a deep dive into the tier system and the principles behind the tier system, see The Web Animation Performance Tier List.
Each category (Animations, Scroll Animations, GPU pressure, thrashing) starts with a score of 100. Each animation, depending on its base tier, whether it's off-screen, a large paint surface etc, ends up with a score that detracts from that initial score.
Final category grades are based upon that final score.
Running an audit
There are three ways to run a MotionScore audit:
Web UI
Visit score.motion.dev, enter a URL, and click Analyse. Results are ready in around a minute.
As well as a full score breakdown, the site also provides a list of recommendations based on your report. Each recommendation comes with a copy-paste prompt that you can give to your LLM.
Learn more about the MotionScore web UI.
CLI
Run an audit from your terminal:
npx motionscore <url
The CLI will print a summary report directly in your terminal, and also provide a sharable URL to the audit.
Paid accounts can use the CLI to block CI/CD pipelines against minimum performance scores using private audits.
Learn more about the CLI.
Codebase audit AI skill
MotionScore also provides an AI skill that analyses your actual codebase and suggests performance improvements without needing to deploy.
MotionScore is an animation performance auditing tool that safeguards against shipping slow user experiences.
Across both desktop and mobile viewports, MotionScore analyses your website's animations, scroll interactions, layout thrashing, and GPU memory usage.
You receive a report with easy-to-digest grades, in-depth per-element data, and a list of recommendations with copy-paste prompts to help your LLM fix the underlying issues.
Rather than flaky FPS counts or slow frame analysis, MotionScore detects running animations and scores them based on Motion's Web Animation Performance Tier List.
What's analysed
MotionScore currently audits four broad areas of animation performance:
Animations: Browser (CSS/WAAPI) and JavaScript-driven animations. Flags layout-triggering properties, off-screen animations, large paint animations, and slow CSS variable inheritance chains.
Scroll animations: Scroll-linked and scroll-triggered animations, including
ScrollTimeline,ViewTimeline,IntersectionObserver, and JavaScript scroll handlers.Thrashing: Layout and style thrashing caused by interleaved DOM reads and writes during mount and animation frames.
GPU pressure: Compositor layer count, texture memory usage, overlap-promoted layers, and persistent
will-changedeclarations.
Tier system
Every animation receives a grade so you can see at-a-glance the impact of each individual animation:
Tier | Description |
|---|---|
S | Excellent. Animations are run entirely on the compositor, so animations aren't interrupted by work on the main thread. |
A | Animations don't trigger paint, but are run from the main thread. |
B | S/A-tier animations that require some style or layout measurements |
C | Animations trigger paint. |
D | Animations trigger layout. |
F | Per-frame style or layout thrashing. |
For a deep dive into the tier system and the principles behind the tier system, see The Web Animation Performance Tier List.
Each category (Animations, Scroll Animations, GPU pressure, thrashing) starts with a score of 100. Each animation, depending on its base tier, whether it's off-screen, a large paint surface etc, ends up with a score that detracts from that initial score.
Final category grades are based upon that final score.
Running an audit
There are three ways to run a MotionScore audit:
Web UI
Visit score.motion.dev, enter a URL, and click Analyse. Results are ready in around a minute.
As well as a full score breakdown, the site also provides a list of recommendations based on your report. Each recommendation comes with a copy-paste prompt that you can give to your LLM.
Learn more about the MotionScore web UI.
CLI
Run an audit from your terminal:
npx motionscore <url
The CLI will print a summary report directly in your terminal, and also provide a sharable URL to the audit.
Paid accounts can use the CLI to block CI/CD pipelines against minimum performance scores using private audits.
Learn more about the CLI.
Codebase audit AI skill
MotionScore also provides an AI skill that analyses your actual codebase and suggests performance improvements without needing to deploy.
