animated-component-libraries

Install Magic UI components using the shadcn CLI with a command like npx shadcn@latest add https://magicui.design/r/grid-pattern. You also need the motion, clsx, and tailwind-merge packages, a cn() utility in lib/utils.ts, and required CSS keyframes in globals.css.

React Bits uses a copy-paste installation model: visit reactbits.dev, find the component, and copy its code into your project. Install framer-motion for animation-heavy components and ogl for WebGL components like Particles, Plasma, and Aurora.

Magic UI suits projects already using shadcn/ui and Tailwind, offering CLI-installed TypeScript components like patterns, marquees, and buttons. React Bits offers standalone, minimal-dependency components including WebGL backgrounds and text animations, and both libraries can be combined in one project.

Animations fail when required CSS keyframes are missing from globals.css or the cn() utility is absent. Add keyframes such as marquee, shimmer-slide, and ripple under the @theme inline block, and verify Tailwind content paths include your components directory.

Reduce particleCount based on navigator.hardwareConcurrency, lower speed and spread values, and conditionally render heavy components only on high-end devices. You can also lazy-load WebGL components with React.lazy and respect the prefers-reduced-motion media query.