skills.rest
ayofemiade
ayofemiadeCOMMUNITY
Explore all skills by this author →
GitHub

animated-component-libraries

Implement pre-built animated React components from Magic UI and React Bits libraries.

Updated Jun 30, 2026
Search Tags:#React#components#Framer Motion#tailwind css#animation#magic ui#react bits
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill animated-component-libraries-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: animated-component-libraries
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/animated-component-libraries
Command: npx skills add https://github.com/ayofemiade/cleva --skill animated-component-libraries-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? Hand-crafting animations for landing pages, dashboards, and marketing sites is time-consuming and error-prone. This Skill provides ready-to-use animated React components from Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency components), eliminating the need to build animations from scratch with Framer Motion or GSAP. ## Core Features & Use Cases - Component Installation Guidance: Step-by-step instructions for installing Magic UI components via the shadcn CLI and React Bits components via copy-paste, including required dependencies and CSS keyframes. - Component Catalogs & Customization: Detailed references covering props, usage patterns, theming with CSS variables, responsive behavior, and accessibility for components like GridPattern, ShimmerButton, Marquee, BlurText, CountUp, Dock, and Particles. - Helper Scripts: Interactive Python scripts that generate installation commands and prop configurations for selected components. - Use Case: Building a SaaS landing page with an animated grid hero, shimmer CTA button, scrolling testimonial marquee, and animated revenue counters—without writing any animation logic manually. ## Quick Start Ask the assistant to add a Magic UI animated grid pattern hero section with a shimmer button to your Next.js page.

Frequently Asked Questions about animated-component-libraries

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install Magic UI components in a Next.js project?▼

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 motion, clsx, and tailwind-merge installed, plus the cn() utility in lib/utils.ts and required CSS keyframes in globals.css.

Magic UI vs React Bits: which animated component library should I use?▼

Magic UI suits projects already using shadcn/ui and Tailwind, offering CLI-installed TypeScript components like patterns and marquees. React Bits suits lightweight setups with copy-paste components focused on text animations, interactive elements, and WebGL backgrounds.

How do I add animated number counters to a React dashboard?▼

Use the CountUp component from React Bits with props like end, duration, decimals, prefix, suffix, and separator. It animates numbers when scrolled into view using Intersection Observer, ideal for statistics like revenue or uptime.

Why are Magic UI animations not working after manual installation?▼

Animations fail when required CSS keyframes are missing from globals.css. Add the animation definitions such as marquee, shimmer-slide, and ripple under @theme inline, and verify the cn() utility exists in lib/utils.ts.

Do React Bits WebGL components like Particles work on mobile devices?▼

WebGL components work on mobile but can cause performance issues on low-end devices. Reduce particleCount based on navigator.hardwareConcurrency, lazy-load the components, or fall back to lighter alternatives like static gradients.

How do I make animated components accessible for reduced motion users?▼

Check the prefers-reduced-motion media query and disable or simplify animations accordingly, such as setting BlurText delay to 0 or skipping particle effects. Also mark decorative backgrounds with aria-hidden and provide aria-labels for counters.

Related Skills

Explore More Software Engineering Skills→
aicodeproaicodepro

aceternity-ui

Install and configure 100+ animated Aceternity UI React components in Next.js projects via the shadcn CLI.

Official
Intermediate
riffluvriffluv

optimize

Audit UI performance and implement image, code-splitting, and lazy-loading optimizations.

Community
Advanced
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
VXerysVXerys

migrate-scroll-to-gsap

Convert scroll-driven animations from Framer Motion to GSAP ScrollTrigger in React/Next.js components.

Community
Intermediate