Guides · 03
Performance
What the web components cost, measured on this build, and how to reproduce the numbers.
Measurements
Measured on 2026-09-28 with Chrome 153.0.8010.52 (headless, Playwright). Each browser figure is the largest of three runs.
| What | How it is measured | Result |
|---|---|---|
| Package size | The whole web entry (all 16 exports) bundled and minified with esbuild, React external, gzip level 9 | 28.0 KB (84.3 KB minified) |
| One component | Only MotionNumber imported, same bundling | 18.6 KB |
| JS frame callbacks | Calls to requestAnimationFrame on the page for 1.2 s while MotionNumber, MotionHeight and MotionHighlight change together (12 animations running) | 0 |
| React commits per change | Profiler commits around MotionNumber for 10 value changes, each left to finish | 10 for 10 changes |
| Streaming | Profiler commits while MotionStream reveals 3000 characters that arrived at once (about 4081 ms) | 11 |
| Interruptions | 200 new values 5 ms apart, then a pause: animations left on the page and whether the final text is exact | 0 left, exact text |
2026-09-28 · @kkwaenggwari/animated-chorus@0.1.0 · Chrome 153.0.8010.52 (headless, Playwright) · Windows_NT 10.0.22631 · Intel(R) Core(TM) i7-14700K
Why it is fast
Four design choices keep the cost low.
- No animation library on the web: motion is handed to the browser's Web Animations API, with springs sampled analytically.
- No React render per frame: components render when your data changes, not while they move.
- Streamed text is appended to the page directly and folded into React state only a few times per second.
- Every component stands alone: there is no provider that re-renders the tree and no global store.
Limits
MotionStream uses an animation frame loop while it reveals text; it is the one component that needs work on every frame. On React Native, width and height changes run on the JS driver because they are layout. The measurements describe one machine and one browser, so your numbers will differ.
Reproduce
The figures come from a script in the website repository. It bundles the package, opens the installed Chrome without a window, runs every scenario three times and writes the results this page reads.
node scripts/measure-chorus.mjs