Pick Motion if
- you write your own animations in React or Vue, and want one API for all of them;
- you need layout animations, drag with momentum or exit animations across your app;
- you animate Three.js too, with the same springs as the DOM.
Kodza vs Framer Motion
A Framer Motion alternative with nothing to install.
Framer Motion is now Motion, a free animation library for React, Vue and JavaScript, and a good one. Kodza isn't a library: it's finished components, already animated with CSS and the browser's own animation API. No package, no API to learn. Here's the honest comparison.
Their side checked on motion.dev,
The short version
The tools, or the finished thing.
Motion gives you an API to animate anything. Kodza gives you the menu, the dialog, the hero, already moving.
Pick Kodza if
- you'd rather paste a finished component than write the animation;
- you don't want a package for a hover, a menu or a scroll reveal;
- your site isn't a React or Vue app: WordPress, plain HTML, a CMS theme.
Side by side
The facts, no spin.
What each one is, what it weighs, what it costs. Their column comes from their own site.
| Feature | Motion | Kodza |
|---|---|---|
| What it is | An animation library: you write the animation | Finished components: the animation is written |
| Runs in | React, Vue, JavaScript | Any page: HTML, WordPress, React |
| Adding it | npm install motion |
Copy and paste, or ask your AI |
| Weight | 3.3 kB (mini) to 43 kB (React component), 5 kB+ with LazyMotion | No library: only the component's own CSS and JS |
| Ready-made | Motion UI and 510+ examples, with Motion+ | All 142 components |
| Price | Library free; Motion+ €199 once per developer | Free |
| License | MIT | Kodza License: use anywhere, don't resell |
| AI | Skill and MCP: docs search free, the rest with Motion+ | MCP: every component, free, no account |
Motion figures from their home page, their Motion+ page (opens in a new tab) and docs, read on October 27, 2026. The Motion+ price is the one shown to us in euros; teams pay yearly per seat. Prices change: theirs is the page that counts.
Install
Adding one, both ways.
One you install, then write with. The other you paste, and it already moves.
Motion
- Install the package in your app.
- Import it, then write the animation: values, timing, gestures.
npm install motion
The examples vault and the Motion UI sections come with Motion+.
Kodza
- Open a component page, any stack.
- Copy the HTML, CSS and JS. Paste them where they go.
$ npm install nothing
The motion is already tuned, reduced motion included. Or let your AI do it: the command is at the bottom of this page.
Try one
What people install Motion for.
Cards that glide to their new place, a dialog that goes back into its button, a button that leans to the pointer, a scroll scene, a word that rolls. Already written, no package.
Filter Transitions
A filterable grid: the ink pill slides to the filter, leaving cards step back, the others glide to their new place and the new ones arrive in turn.
View code
Expandable Card
A row of cards where one is always open: click another and it widens while the others step back. Stacked on small screens.
View code
Dialog
A real dialog that grows out of the button that opened it and goes back into it. The alert version asks you to type the name before it deletes anything.
View code
Magnetic Button
A button that leans towards the pointer as it comes near, its words a little further, and settles back softly. Its click area moves with it. Calm on touch screens.
View code
Horizontal Scroll
A section that pins itself while its cards slide sideways as you scroll down. Pictures drift in their frames, the counter rolls. A swipe on touch.
View code
Word Rotator
One word of a sentence keeps changing: the next one's letters rise as the old ones leave, or the word flips over. The space follows the word, the sentence moves along.
View codeFAQ
Before you switch.
The questions people ask when they compare the two.
01Is Kodza a drop-in replacement for Framer Motion?
No, and it doesn't try to be. Motion is a library you write animations with; Kodza is finished components with the animation already written. If you added Motion for a menu, a dialog, a hover or a scroll reveal, a Kodza component can do that job without the package. If you build custom layout animations or drag gestures in React, keep Motion.
02Is Framer Motion now called Motion?
Yes. Framer Motion became Motion, its own project, for React, Vue and JavaScript. You install it with npm install motion, and the library is still free under the MIT License.
03How does Kodza animate without a library?
With what the browser already has: CSS transitions and keyframes, and the Web Animations API for longer sequences. Pinning uses position: sticky, scroll is measured in a few lines of plain JS, and inertia is a small requestAnimationFrame loop. Every component handles reduced motion.
04Is Kodza free like Motion?
Yes, all of it. Every Kodza component is free in any project, client work included, with no account and no credit required. The one rule: don't resell the components themselves. The Motion library is free under the MIT License; its premium examples and Motion UI come with Motion+, a one-time payment per developer.
05Does Kodza work with React?
Yes. Most components also come as a React .tsx file on their page, with no animation package to add, and they start and stop cleanly in StrictMode.
06Can my AI assistant add Kodza components for me?
Yes. Kodza's MCP server is at https://kodza.dev/api/mcp, free, with no account and no key. Ask for a component in Claude Code, Codex, Cursor or VS Code, and it gets the code to paste. Motion has its own AI Kit, to help your agent write Motion code.
Just ask.
Copy, paste, and go home early.
claude mcp add -t http kodza https://kodza.dev/api/mcp
Also in Codex, Cursor and VS CodeBrowse 142 components