animated-component-libraries

Name: animated-component-libraries
Author: Hainrixz

210stars100forks

How to install animated-component-libraries?

hainrixz/editor-pro-max/animated-component-libraries

$npx -y skills add Hainrixz/editor-pro-max --skill animated-component-libraries

Installs into the current project.

Summary

Pre-built animated React component collections combining Magic UI (150+ TypeScript/Tailwind/Motion components) and React Bits (90+ minimal-dependency animated components). Use this skill when building landing pages, marketing sites, dashboards, or interactive UIs requiring pre-ma

Files · 1

View on GitHub

SKILL.md

1	# Animated Component Libraries
2
3	## Overview
4
5	This skill provides expertise in pre-built animated React component libraries, specifically Magic UI and React Bits. These libraries offer production-ready, animated components that significantly accelerate development of modern, interactive web applications.
6
7	Magic UI provides 150+ TypeScript components built on Tailwind CSS and Framer Motion, designed for seamless integration with shadcn/ui. Components are copy-paste ready and highly customizable.
8
9	React Bits offers 90+ animated React components with minimal dependencies, focusing on visual effects, backgrounds, and micro-interactions. Components emphasize performance and ease of customization.
10
11	Both libraries follow modern React patterns, support TypeScript, and integrate with popular design systems.
12
13	## Core Concepts
14
15	### Magic UI Architecture
16
17	Magic UI components are built on three foundational technologies:
18
19	1. Tailwind CSS: Utility-first styling with full customization via `tailwind.config.js`
20	2. Framer Motion: Physics-based animations and gesture recognition
21	3. shadcn/ui Integration: Follows shadcn conventions for CLI installation and component structure
22
23	Installation Methods:
24
25	```bash
26	# Via shadcn CLI (recommended)
27	npx shadcn@latest add https://magicui.design/r/animated-beam
28
29	# Manual installation
30	# 1. Copy component code to components/ui/
31	# 2. Install motion: npm install motion
32	# 3. Add required CSS animations to globals.css
33	# 4. Ensure cn() utility exists in lib/utils.ts
34	```
35
36	Component Structure:
37
38	```typescript
39	// All Magic UI components follow this pattern:
40	import { cn } from "@/lib/utils"
41	import { motion } from "motion/react"
42
43	interface ComponentProps extends React.ComponentPropsWithoutRef<"div"> {
44	customProp?: string
45	className?: string
46	}
47
48	export function MagicComponent({ className, customProp, ...props }: ComponentProps) {
49	return (
50	<motion.div
51	className={cn("base-styles", className)}
52	{...props}
53	>
54	{/* Component content */}
55	</motion.div>
56	)
57	}
58	```
59
60	### React Bits Architecture
61
62	React Bits emphasizes lightweight, standalone components with minimal dependencies:
63
64	1. Self-Contained: Each component has minimal external dependencies
65	2. CSS-in-JS Optional: Many components use inline styles or CSS modules
66	3. Performance-First: Optimized for 60fps animations
67	4. WebGL Support: Some components (Particles, Plasma) use WebGL for advanced effects
68
69	Installation:
70
71	```bash
72	# Manual copy-paste (primary method)
73	# Copy component files from reactbits.dev to your project
74
75	# Key dependencies (install as needed):
76	npm install framer-motion # For animation-heavy components
77	npm install ogl # For WebGL components (Particles, Plasma)
78	```
79
80	Component Categories:
81
82	- Text Animations: BlurText, CircularText, CountUp, SpinningText
83	- Interactive Elements: MagicButton, Magnet, Dock, Stepper
84	- Backgrounds: Aurora, Plasma, Particles
85	- Lists & Layouts: AnimatedList, Bento Grid
86
87	## Common Patterns
88
89	### 1. Magic UI: Animated Background Patterns
90
91	Create dynamic background effects with SVG-based patterns:
92
93	```typescript
94	import { GridPattern } from "@/components/ui/grid-pattern"
95	import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern"
96	import { cn } from "@/lib/utils"
97
98	export default function HeroSection() {
99	return (
100	<div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border">
101	{/* Static Grid Pattern */}
102	<GridPattern
103	squares={[
104	[4, 4], [5, 1], [8, 2], [5, 3], [10, 10], [12, 15]
105	]}
106	className={cn(
107	"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
108	"fill-gray-400/30 stroke-gray-400/30"
109	)}
110	/>
111
112	{/* Animated Interactive Grid */}
113	<AnimatedGridPattern
114	numSquares={50}
115	maxOpacity={0.5}
116	duration={4}
117	repeatDelay={0.5}
118	className={cn(
119	"[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
120	"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
121	)}
122	/>
123
124	<h1 className="relative z-10 text-6xl font-bold">
125	Your Content Here
126	</h1>
127	</div>
128	)
129	}
130	```
131
132	### 2. React Bits: Text Reveal Animations
133
134	Implement scroll-triggered text reveals with BlurText:
135
136	```

People who liked this also viewed

6 picks

Type

animated-component-libraries

210stars100forks

View on GitHub

How to install animated-component-libraries?

hainrixz/editor-pro-max/animated-component-libraries

$npx -y skills add Hainrixz/editor-pro-max --skill animated-component-libraries

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Animated Component Libraries
2
3	## Overview
4
5	This skill provides expertise in pre-built animated React component libraries, specifically Magic UI and React Bits. These libraries offer production-ready, animated components that significantly accelerate development of modern, interactive web applications.
6
7	Magic UI provides 150+ TypeScript components built on Tailwind CSS and Framer Motion, designed for seamless integration with shadcn/ui. Components are copy-paste ready and highly customizable.
8
9	React Bits offers 90+ animated React components with minimal dependencies, focusing on visual effects, backgrounds, and micro-interactions. Components emphasize performance and ease of customization.
10
11	Both libraries follow modern React patterns, support TypeScript, and integrate with popular design systems.
12
13	## Core Concepts
14
15	### Magic UI Architecture
16
17	Magic UI components are built on three foundational technologies:
18
19	1. Tailwind CSS: Utility-first styling with full customization via `tailwind.config.js`
20	2. Framer Motion: Physics-based animations and gesture recognition
21	3. shadcn/ui Integration: Follows shadcn conventions for CLI installation and component structure
22
23	Installation Methods:
24
25	```bash
26	# Via shadcn CLI (recommended)
27	npx shadcn@latest add https://magicui.design/r/animated-beam
28
29	# Manual installation
30	# 1. Copy component code to components/ui/
31	# 2. Install motion: npm install motion
32	# 3. Add required CSS animations to globals.css
33	# 4. Ensure cn() utility exists in lib/utils.ts
34	```
35
36	Component Structure:
37
38	```typescript
39	// All Magic UI components follow this pattern:
40	import { cn } from "@/lib/utils"
41	import { motion } from "motion/react"
42
43	interface ComponentProps extends React.ComponentPropsWithoutRef<"div"> {
44	customProp?: string
45	className?: string
46	}
47
48	export function MagicComponent({ className, customProp, ...props }: ComponentProps) {
49	return (
50	<motion.div
51	className={cn("base-styles", className)}
52	{...props}
53	>
54	{/* Component content */}
55	</motion.div>
56	)
57	}
58	```
59
60	### React Bits Architecture
61
62	React Bits emphasizes lightweight, standalone components with minimal dependencies:
63
64	1. Self-Contained: Each component has minimal external dependencies
65	2. CSS-in-JS Optional: Many components use inline styles or CSS modules
66	3. Performance-First: Optimized for 60fps animations
67	4. WebGL Support: Some components (Particles, Plasma) use WebGL for advanced effects
68
69	Installation:
70
71	```bash
72	# Manual copy-paste (primary method)
73	# Copy component files from reactbits.dev to your project
74
75	# Key dependencies (install as needed):
76	npm install framer-motion # For animation-heavy components
77	npm install ogl # For WebGL components (Particles, Plasma)
78	```
79
80	Component Categories:
81
82	- Text Animations: BlurText, CircularText, CountUp, SpinningText
83	- Interactive Elements: MagicButton, Magnet, Dock, Stepper
84	- Backgrounds: Aurora, Plasma, Particles
85	- Lists & Layouts: AnimatedList, Bento Grid
86
87	## Common Patterns
88
89	### 1. Magic UI: Animated Background Patterns
90
91	Create dynamic background effects with SVG-based patterns:
92
93	```typescript
94	import { GridPattern } from "@/components/ui/grid-pattern"
95	import { AnimatedGridPattern } from "@/components/ui/animated-grid-pattern"
96	import { cn } from "@/lib/utils"
97
98	export default function HeroSection() {
99	return (
100	<div className="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border">
101	{/* Static Grid Pattern */}
102	<GridPattern
103	squares={[
104	[4, 4], [5, 1], [8, 2], [5, 3], [10, 10], [12, 15]
105	]}
106	className={cn(
107	"[mask-image:radial-gradient(400px_circle_at_center,white,transparent)]",
108	"fill-gray-400/30 stroke-gray-400/30"
109	)}
110	/>
111
112	{/* Animated Interactive Grid */}
113	<AnimatedGridPattern
114	numSquares={50}
115	maxOpacity={0.5}
116	duration={4}
117	repeatDelay={0.5}
118	className={cn(
119	"[mask-image:radial-gradient(500px_circle_at_center,white,transparent)]",
120	"inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
121	)}
122	/>
123
124	<h1 className="relative z-10 text-6xl font-bold">
125	Your Content Here
126	</h1>
127	</div>
128	)
129	}
130	```
131
132	### 2. React Bits: Text Reveal Animations
133
134	Implement scroll-triggered text reveals with BlurText:
135
136	```

People who liked this also viewed

6 picks

Type