Yes, Magic UI is free and open-source under the MIT license, with a Pro tier (around a one-time 149 USD as of 2026-06) for the full component set. Annnimate is subscription-only from EUR 249/year. If free and open-source is a requirement, Magic UI is the option.

Does Magic UI support Vue?

No. Magic UI is React-only, built on Motion (formerly Framer Motion). If you're on Vue or vanilla JS, it isn't usable. Annnimate ships each component in React, Vue, and HTML/CSS/JS, which is a primary reason to choose it on non-React stacks.

Both use the copy-and-own model, so what's the real difference?

The engine and the framework reach. Both let you paste the code into your project with no runtime lock-in. But Magic UI's code is Motion + React; Annnimate's is GSAP and comes in React, Vue, or HTML. If you need GSAP's scroll depth or non-React output, that difference is the whole decision.

Why pay for Annnimate when Magic UI is free?

You pay for GSAP-engine depth, multi-framework output (Vue and HTML, not just React), and production tuning (accessibility, reduced-motion, documented attributes) maintained over time. If none of those matter to your project and you're React-only, Magic UI's free open-source catalog is the right call, that's an honest answer.

Comparison

Annnimate vs Magic UI

Magic UI and Annnimate both ship animated components, but on different engines and business models. Magic UI is free, open-source, React-only, and Motion based. Annnimate is paid, GSAP based, and ships React, Vue, and HTML. Here's the honest comparison.

Updated June 2, 2026

Verdict

Where it lands

Pick Magic UI when you're React-only and want a free, open-source catalog with breadth, its 150+ MIT-licensed Motion components and the shadcn-style copy-and-own workflow are a strong, honest choice. Pick Annnimate when you need the same component in Vue or HTML, want GSAP's scroll and timeline depth, or want accessibility and reduced-motion tuned and maintained rather than copied from a demo.

Dimensions

By dimension

Price

Winner: Magic UI

Magic UI is free and open-source (MIT), with a Pro tier around a one-time 149 USD for the full set (as of 2026-06). Annnimate is subscription-only from EUR 249/year. On cost, Magic UI wins clearly.

Animation engine

Winner: Annnimate

Annnimate runs on GSAP, stronger on scroll-driven motion, timelines, and text effects. Magic UI runs on Motion (formerly Framer Motion), excellent for React entrance animations and marketing effects but lighter on complex scroll work.

Framework support

Winner: Annnimate

Annnimate ships React, Vue, and HTML/CSS/JS. Magic UI is React-only. On Vue or vanilla, Magic UI isn't an option.

Open source

Winner: Magic UI

Magic UI is fully open-source under MIT, you can read, fork, and contribute. Annnimate's components are source-available to subscribers but it's a paid product, not an open-source project.

Copy-and-own model

Winner: Tie

Both follow the shadcn-style 'copy the code into your project, no runtime dependency' model. Magic UI components paste into your React app; Annnimate gives you the source per framework. Neither locks you into a hosted runtime.

Component count

Winner: Magic UI

Magic UI offers 150+ components and effects (as of 2026-06). Annnimate ships around 50 production-tuned components. Magic UI has more breadth; Annnimate goes deeper per component.

Production tuning

Winner: Annnimate

Annnimate components ship with documented tuning attributes, accessibility, and reduced-motion handling as a baseline. Magic UI's components are strong but, like most free catalogs, vary in how much production hardening they include.

Difference

How they actually differ

Magic UI is a free, open-source, React-only library built on Motion, aimed at design engineers building marketing pages. Annnimate is a paid, GSAP-based library that ships each component in React, Vue, and HTML/CSS/JS, aimed at teams shipping production motion across frameworks.

Magic UI's strength is a large, free, open-source catalog with the copy-and-own model design engineers like.

Annnimate's strength is GSAP depth plus framework portability and tuning, the same component runs in Vue or vanilla, with accessibility and reduced-motion handled.

Pick Magic UI

When to choose Magic UI

You're on React and want free, open-source components
You like the shadcn-style copy-and-own workflow
You're building marketing or landing pages and want breadth fast
You're already using Motion / Framer Motion

Pick Annnimate

When to choose Annnimate

You're on GSAP, or want its scroll and timeline depth
You need the same component in Vue or HTML/CSS/JS, not just React
You want production tuning (accessibility, reduced-motion, documented attributes) by default
You prefer one consistent animation engine across every component

Where Annnimate sits

Annnimate position

Annnimate is the GSAP-native, multi-framework option for teams that need motion to work beyond React and want it tuned for production. The subscription pays for maintenance and tuning, not just a snapshot of demos.

If you're React-only and want a free, open-source catalog with breadth, Magic UI is a strong, honest choice. Pick by engine and framework first.

FAQ

Common questions

Is Magic UI free?: Yes, Magic UI is free and open-source under the MIT license, with a Pro tier (around a one-time 149 USD as of 2026-06) for the full component set. Annnimate is subscription-only from EUR 249/year. If free and open-source is a requirement, Magic UI is the option.
Does Magic UI support Vue?: No. Magic UI is React-only, built on Motion (formerly Framer Motion). If you're on Vue or vanilla JS, it isn't usable. Annnimate ships each component in React, Vue, and HTML/CSS/JS, which is a primary reason to choose it on non-React stacks.
Both use the copy-and-own model, so what's the real difference?: The engine and the framework reach. Both let you paste the code into your project with no runtime lock-in. But Magic UI's code is Motion + React; Annnimate's is GSAP and comes in React, Vue, or HTML. If you need GSAP's scroll depth or non-React output, that difference is the whole decision.
Why pay for Annnimate when Magic UI is free?: You pay for GSAP-engine depth, multi-framework output (Vue and HTML, not just React), and production tuning (accessibility, reduced-motion, documented attributes) maintained over time. If none of those matter to your project and you're React-only, Magic UI's free open-source catalog is the right call, that's an honest answer.

PreviousAnnnimate vs Aceternity UIAnnnimate and Aceternity UI both give you ready-made animated components, but they sit on different engines and serve different buyers. Acet NextAnnnimate vs React BitsReact Bits and Annnimate both offer animated components, but React Bits is a free, open-source, React-only catalog, while Annnimate is a pai

Related comparisons

Other comparisons

Annnimate vs Aceternity UIAnnnimate and Aceternity UI both give you ready-made animated components, but they sit on different engines and serve different buyers.Annnimate vs React BitsReact Bits and Annnimate both offer animated components, but React Bits is a free, open-source, React-only catalog, while Annnimate is a paid, GSAP-based library shipping React, Vue, and HTML.AOS vs Framer MotionAOS and Framer Motion (renamed Motion in 2025) are both used for scroll reveals, but they are different tools: AOS is a tiny, framework-agnostic attribute-based reveal library, Motion is a full React animation system.Best Animation LibrariesThe best JavaScript or CSS animation library in 2026 is not one library, it is the right one for the job: GSAP for scroll-driven and timeline-heavy motion, Motion (formerly Framer Motion) for React UI transitions, Anime.js for lightweight tweens, native CSS for the basics, AOS for zero-config scroll reveals, and Lenis as the smooth-scroll layer under any of them.