animated-component-libraries

Animated Component Libraries is a front-end skill that provides expertise in two pre-built animated React component collections — Magic UI (150+ TypeScript components on Tailwind CSS and Framer Motion, designed for shadcn/ui) and React Bits (90+ minimal-dependency animated components for text effects, backgrounds, and micro-interactions). It solves the problem of hand-crafting animations from scratch by helping select, install, and customize production-ready components for landing pages, marketing sites, dashboards, and interactive UIs.

The skill explains each library's architecture and installation paths: Magic UI via the shadcn CLI (npx shadcn add) or manual copy with the motion package and a cn() utility, and React Bits primarily via copy-paste with optional dependencies like framer-motion or ogl for WebGL components such as Particles and Plasma. It documents component categories (background patterns, shimmer/border-beam buttons, marquees, BlurText, CountUp, Magnet, Dock, and more) and provides extensive customization patterns through props and Tailwind classes — mask gradients, animation timing, shimmer variations, magnetic-effect strength, and dock physics. Supporting files include a customization guide, per-library component references, and helper scripts (component_importer.py and props_generator.py).

Target users are React and Tailwind developers building modern, animated interfaces who want to assemble polished UIs quickly instead of implementing animations manually with Framer Motion or GSAP. Prerequisites are a React project with Tailwind and the relevant animation dependencies. The skill is UI-focused reference and tooling; installation steps run standard package-manager and shadcn CLI commands, and the referenced WebGL components pull in the ogl library as needed.