Best Animated React Component Libraries (2026)

Yes, there are free libraries like shadcn/ui with animation built in, and you get the source code. For landing-page polish, start with Magic UI. For subtler motion inside a product, Motion Primitives. To animate shadcn-style primitives you already use, Animate UI. For bold hero effects, Aceternity UI, with some of it behind a paid plan. If you want your coding agent to find and adapt motion for you, including WebGL shaders, use Subframe's motion library: it's open source, and its Motion MCP works in Claude Code, Codex and Cursor with no account. For plain CSS animations, Animista and Animate.css.

The short version:

• Magic UI: free, open-source animated components for landing pages, made to sit next to shadcn/ui.
• Aceternity UI: big visual effects and full landing-page blocks; free to copy, plus a paid All-Access plan.
• Motion Primitives: an open-source kit of quieter, interface-level motion components.
• Animate UI: adds animation to Radix UI, Base UI or React Aria primitives with one CLI command.
• useLayouts: free interactive components you copy as single files.
• Subframe motion library: open-source React animations, Motion components and WebGL shaders your coding agent can use directly through an MCP, no account needed.

The best animated React component libraries at a glance

Library	Best for	Kind of motion	How you add it	Built with	Price
Magic UI	Landing pages on shadcn/ui	Marketing effects: text effects, marquees, animated backgrounds	Copy-paste or shadcn CLI	React, TypeScript, Tailwind, Motion	Free and open source; Magic UI Pro adds blocks and templates
Aceternity UI	Bold hero sections	Cinematic effects, shader backgrounds, full blocks and pages	Copy-paste, or an AI agent with MCP	React, Tailwind, Motion	Free components plus a paid All-Access plan
Motion Primitives	Product interfaces	Subtle text effects, transitions, micro-interactions	Copy-paste	React, Tailwind, Motion	Free and open source
Animate UI	Animating components you already have	Animated versions of standard primitives (tabs, switches, accordions)	One CLI command; an agent skill	React (Radix UI, Base UI, React Aria); Vue version	Free
useLayouts	One-off interactions	Interactive layouts, navigation, hover and drag effects	Copy a single file	React, Motion, Tailwind	Free
Subframe motion library	Letting your coding agent pick and adapt motion	Interface animations, Motion components and WebGL shaders	Through the Motion MCP in Claude Code, Codex or Cursor, no account	React, Motion, WebGL	Free and open source

How we compared them

Every library here is free to start and gives you code you can edit. They differ on four things, and those decide the pick:

1. Kind of motion. Landing-page effects, quiet interface motion, scroll moments or WebGL shaders.
2. Source and price. Whether the components are open source, and what sits behind a paid tier.
3. How you add it. Copy-paste, the shadcn CLI, an agent skill, or an MCP your coding agent calls.
4. Stack fit. All of them are React; most assume Tailwind and Motion (previously Framer Motion).

1. Magic UI: best for landing-page polish on shadcn/ui

Magic UI is the default answer to "shadcn, but animated". It ships more than 150 free, open-source animated components and effects built with React, TypeScript, Tailwind CSS and Motion, and it's designed as a companion to shadcn/ui rather than a replacement.

• Best for: SaaS landing pages and marketing sites that need polish fast.
• Strengths: a large set of drop-in effects, and it matches shadcn/ui's conventions.
• Limitations: it's built for marketing pages; most effects are more than a product interface needs.
• Price: free and open source. Magic UI Pro adds blocks and templates.

2. Aceternity UI: best for bold hero sections

Aceternity UI goes for impact: more than 200 components, blocks and templates built with React, Tailwind CSS and Motion, including shader backgrounds and full landing-page sections. You copy and paste them, or let Claude Code, Codex or another agent with MCP install them.

• Best for: hero sections and product pages that need to look custom.
• Strengths: whole blocks and pages, not just components; agent install.
• Limitations: effects can be heavy for everyday interface work, and the full set needs the paid All-Access plan.
• Price: free components to copy, plus a paid All-Access plan.

3. Motion Primitives: best for subtle interface motion

Motion Primitives is an open-source UI kit of motion components you copy, paste and customize. Its motion is quieter than Magic UI or Aceternity, closer to what you'd ship inside a product than on a launch page.

• Best for: dashboards and product interfaces that need refined motion.
• Strengths: restrained defaults that rarely feel template-like.
• Limitations: a smaller set, and less for big landing-page moments.
• Price: free and open source.

4. Animate UI: best for animating components you already use

Animate UI takes a different route: it gives you animated versions of the primitives you already build on, for Radix UI, Base UI and React Aria. One CLI command animates them, and you keep your components, styles and API. It also offers an Animate UI skill so your AI agent can add motion from a plain-language request.

• Best for: apps already built on shadcn/ui or Radix that need motion everywhere.
• Strengths: no redesign; motion lands in components you already have.
• Limitations: it animates standard interface parts, not showpiece effects.
• Price: free.

5. useLayouts: best for single-file interactions

useLayouts offers free animated React components built with React, Motion and Tailwind CSS. You preview one, copy a single file and drop it in.

• Best for: adding one or two memorable interactions without a library.
• Strengths: each component is self-contained.
• Limitations: a smaller catalog than the bigger libraries.
• Price: free.

6. Subframe motion library: best for letting your coding agent pick the motion

Subframe's motion library is a free, open-source collection of React animations, Motion components and WebGL shaders made for agents to use. Instead of browsing and copying, you connect the Motion MCP to Claude Code, Codex or Cursor and ask for what you want ("an image reveal for the case studies section"); the agent works from the library's finished examples and adapts them to your page. No Subframe account is needed. If you already use the Subframe MCP, the same motion tools are included.

• Best for: builders who work in a coding agent and want motion that doesn't look generic, from interface details to WebGL shaders.
• Strengths: the agent starts from finished motion instead of describing an effect from scratch, which is where AI-made animation usually goes generic.
• Limitations: it's a library for your agent to work from, not a set of shadcn CLI installs; if you never use a coding agent, browsing Magic UI or Motion Primitives may suit you better.
• Price: free and open source.

To set it up in Claude Code:

claude mcp add --transport http subframe-motion https://mcp.subframe.com/motion/mcp

Looking for plain CSS animations instead?

If you want catalogues of simple CSS animations for text and buttons, without React:

• Animista: an on-demand library of CSS animations.
• Animate.css: a cross-browser library of ready-made CSS animations.
• Hover.css: a collection of CSS3 hover effects for buttons and links.

For inspiration rather than code, browse Awwwards and CodePen and note the timing of what you like.

Which animated React component library should you choose?

• Building a SaaS landing page on shadcn/ui: Magic UI.
• You need one unforgettable hero: Aceternity UI.
• Motion inside a product, not a launch page: Motion Primitives.
• Your app already uses Radix or shadcn and you want it all to move: Animate UI.
• You only need one or two interactions: useLayouts.
• You build with Claude Code, Codex or Cursor and want the agent to choose and adapt motion, including shaders: the Subframe motion library.

You can mix them: Magic UI for the hero and Motion Primitives or Animate UI for the interface work fine together.

Using the Subframe motion library with Claude Code

1. Add the Motion MCP with the command above, or use the Subframe MCP if you already have it.
2. Tell Claude Code your stack ("Next.js, Tailwind, Motion").
3. Ask for an effect by its job, not its adjectives: "a subtle entrance for the pricing cards", "a liquid shader behind the hero".
4. Run the page, look at the motion, and ask for exact changes ("shorter delay, less movement").

FAQ

Is there a free library like shadcn/ui with animated components?

Yes. Magic UI, Motion Primitives, Animate UI, useLayouts and Subframe's motion library are free and give you the source. Aceternity UI has free components plus a paid plan.

Which animated component library works best with Framer Motion?

Magic UI, Aceternity UI, Motion Primitives and useLayouts are all built on Motion, which was previously called Framer Motion.

Can Claude Code add animated components for me?

Yes. Aceternity UI and Subframe's motion library can be used through MCP, and Animate UI offers an agent skill. With Subframe's Motion MCP, Claude Code works from finished examples and adapts them to your page, with no account.

Where can I find simple CSS animations for text and buttons?

Animista, Animate.css and Hover.css are the usual starting points; CodePen and Awwwards are good for inspiration.

Try the Subframe motion library

Browse open-source React animations, Motion components and WebGL shaders at subframe.com/motion, then connect the Motion MCP to Claude Code, Codex or Cursor.