The player tax
287KB of JavaScript to play a 12KB animation. Every visitor pays it, on every visit, before your product renders.
MotionHub is a tokenized motion system in plain CSS and SVG. Copy a component, paste it into your codebase, ship it. No runtime, no CDN, nothing to break.
Free tier forever. The 9 components below are running on this page right now.
Teams bolt three players onto one page to loop a checkmark. Here is what that costs.
287KB of JavaScript to play a 12KB animation. Every visitor pays it, on every visit, before your product renders.
CDN hiccup, ad blocker, strict CSP: the player never loads and your hero renders an empty grey rectangle. Nobody gets an alert.
Every embed was exported by a different artist with different timing. Your product motion reads as noise instead of a system.
Every MotionHub component is built from three shared scales. Change a token once and every animation on your page moves the same way. It is CSS, so it is already in your build.
The same set you would reach for a player to render. View source: each one is a keyframe block you can copy.
Measured on a production checkout page, January 2026: dropping the player stack cut LCP by 0.8s on a mid-range Android over 4G. The animation looked identical.
Median bundle cut when teams replace player libraries with MotionHub components.
Nothing to fetch at runtime. Your motion ships inside the stylesheet you already send.
Three tokens govern every component, so the whole product moves like one hand built it.
Every component pauses under prefers-reduced-motion. Accessibility is the default, not a patch.
MIT licensed, forever.
For designers who ship weekly.
Per team of ten, flat.
A motion designer's day rate runs $640. Pro costs $12 a month and your engineers stop re-implementing the same spinner every quarter.
We removed lottie-web and the player component in one sprint. The bundle dropped 214KB and LCP improved 0.8s on checkout. Conversion moved 1.9% the same week.
Design and engineering finally argue about the work instead of the timing. The token sheet ended the snappier-please tickets. All eleven of them.
I shipped the success check in four minutes, code review included. It was a copy, a paste, and one token change to match our brand teal.
Yes, because it is CSS and inline SVG. There is nothing framework-shaped about it. Pro adds generated React and Vue wrapper components if you want props for duration and easing instead of editing tokens.
Everything except the typed @property counter works in every evergreen browser and degrades to a static frame in older ones. The counter (used in Upload progress) needs Chrome, Edge, Safari 16.4+, or Firefox 128+; below that you see the bar without the percentage.
One media query pauses every animation on the page when the visitor has asked their OS for less motion. It ships inside each component, so you cannot forget it. This page does the same thing; try it in your system settings.
No, and we will not pretend otherwise. Rigged characters and complex illustration belong in video or canvas. MotionHub covers UI motion: state changes, feedback, loaders, transitions. That is 90% of what player libraries get used for anyway.
Components share the same token custom properties, so repeated keyframes deduplicate under compression. Ten MotionHub components on one page measured 11.2KB gzipped, total.
Free tier components are MIT. Use them in client work, products, templates, anything. Pro and Team sets are licensed per seat and stay yours to keep if you cancel.