ai-react-animations 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AiCreating.cjs +1 -0
- package/dist/AiCreating.mjs +133 -0
- package/dist/AiCreating2.cjs +1 -0
- package/dist/AiCreating2.mjs +184 -0
- package/dist/index.d.ts +18 -1
- package/dist/index.js +6 -149
- package/dist/index.mjs +197 -17
- package/package.json +5 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
module.exports = require('./index.mjs').AiCreating;
|
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* AiCreating - AI Assistant Processing Animation
|
|
5
|
+
* Shows AI helping user with their tasks/requests
|
|
6
|
+
* Relatable user scenario: AI reading, processing, delivering results
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export default function AiCreating({ isLoading, onComplete, size = 'md' }) {
|
|
10
|
+
const [stage, setStage] = useState('idle');
|
|
11
|
+
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (isLoading) {
|
|
14
|
+
setStage('reading');
|
|
15
|
+
const t1 = setTimeout(() => setStage('processing'), 1800);
|
|
16
|
+
const t2 = setTimeout(() => setStage('delivering'), 3600);
|
|
17
|
+
return () => { clearTimeout(t1); clearTimeout(t2); };
|
|
18
|
+
} else if (stage !== 'idle' && stage !== 'reading') {
|
|
19
|
+
setStage('complete');
|
|
20
|
+
const t = setTimeout(() => {
|
|
21
|
+
onComplete?.();
|
|
22
|
+
setStage('idle');
|
|
23
|
+
}, 1200);
|
|
24
|
+
return () => clearTimeout(t);
|
|
25
|
+
}
|
|
26
|
+
}, [isLoading]);
|
|
27
|
+
|
|
28
|
+
const stageText = {
|
|
29
|
+
idle: '',
|
|
30
|
+
reading: 'Reading your request',
|
|
31
|
+
processing: 'Working on it',
|
|
32
|
+
delivering: 'Almost there',
|
|
33
|
+
complete: 'Done!'
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<div className={`ai-creating-wrapper size-${size}`}>
|
|
38
|
+
<div className={`ai-creating-container stage-${stage}`}>
|
|
39
|
+
|
|
40
|
+
{/* Animated Background Particles */}
|
|
41
|
+
<div className="particles">
|
|
42
|
+
<span></span><span></span><span></span>
|
|
43
|
+
<span></span><span></span><span></span>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
{/* Main Content */}
|
|
47
|
+
<div className="ai-scene">
|
|
48
|
+
|
|
49
|
+
{/* AI Robot Character */}
|
|
50
|
+
<div className={`ai-robot ${stage}`}>
|
|
51
|
+
<div className="robot-head">
|
|
52
|
+
<div className="robot-face">
|
|
53
|
+
<div className="robot-eyes">
|
|
54
|
+
<div className="eye left">
|
|
55
|
+
<div className="pupil"></div>
|
|
56
|
+
</div>
|
|
57
|
+
<div className="eye right">
|
|
58
|
+
<div className="pupil"></div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div className="robot-mouth"></div>
|
|
62
|
+
</div>
|
|
63
|
+
<div className="antenna">
|
|
64
|
+
<div className="antenna-ball"></div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
<div className="robot-body">
|
|
68
|
+
<div className="chest-light"></div>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
{/* User Request Card - Reading Stage */}
|
|
73
|
+
{(stage === 'reading' || stage === 'processing') && (
|
|
74
|
+
<div className={`request-card ${stage}`}>
|
|
75
|
+
<div className="card-icon">📝</div>
|
|
76
|
+
<div className="card-lines">
|
|
77
|
+
<span className="line"></span>
|
|
78
|
+
<span className="line short"></span>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
)}
|
|
82
|
+
|
|
83
|
+
{/* Processing Gears - Processing Stage */}
|
|
84
|
+
{stage === 'processing' && (
|
|
85
|
+
<div className="processing-visual">
|
|
86
|
+
<div className="gear gear-1">⚙️</div>
|
|
87
|
+
<div className="gear gear-2">⚙️</div>
|
|
88
|
+
<div className="sparkles">
|
|
89
|
+
<span>✨</span><span>✨</span><span>✨</span>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
)}
|
|
93
|
+
|
|
94
|
+
{/* Result Card - Delivering Stage */}
|
|
95
|
+
{(stage === 'delivering' || stage === 'complete') && (
|
|
96
|
+
<div className={`result-card ${stage}`}>
|
|
97
|
+
<div className="result-icon">{stage === 'complete' ? '✅' : '📄'}</div>
|
|
98
|
+
<div className="result-lines">
|
|
99
|
+
<span className="line"></span>
|
|
100
|
+
<span className="line"></span>
|
|
101
|
+
<span className="line short"></span>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
)}
|
|
105
|
+
|
|
106
|
+
{/* Status Text */}
|
|
107
|
+
{stage !== 'idle' && (
|
|
108
|
+
<div className="status-area">
|
|
109
|
+
<span className={`status-text ${stage}`}>{stageText[stage]}</span>
|
|
110
|
+
{stage !== 'complete' && (
|
|
111
|
+
<span className="dots">
|
|
112
|
+
<span>.</span><span>.</span><span>.</span>
|
|
113
|
+
</span>
|
|
114
|
+
)}
|
|
115
|
+
</div>
|
|
116
|
+
)}
|
|
117
|
+
|
|
118
|
+
{/* Progress Indicator */}
|
|
119
|
+
<div className="progress-track">
|
|
120
|
+
<div className={`progress-bar stage-${stage}`}></div>
|
|
121
|
+
<div className="progress-steps">
|
|
122
|
+
<div className={`step ${stage !== 'idle' ? 'active' : ''}`}></div>
|
|
123
|
+
<div className={`step ${stage === 'processing' || stage === 'delivering' || stage === 'complete' ? 'active' : ''}`}></div>
|
|
124
|
+
<div className={`step ${stage === 'delivering' || stage === 'complete' ? 'active' : ''}`}></div>
|
|
125
|
+
<div className={`step ${stage === 'complete' ? 'active' : ''}`}></div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
);
|
|
133
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
module.exports = require('./index.mjs').AiCreating2;
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { motion, AnimatePresence } from 'framer-motion';
|
|
3
|
+
import { Sparkles, Brain, Zap } from 'lucide-react';
|
|
4
|
+
const iconMap = {
|
|
5
|
+
sparkles: Sparkles,
|
|
6
|
+
brain: Brain,
|
|
7
|
+
zap: Zap,
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export function AiCreating2({
|
|
11
|
+
isLoading,
|
|
12
|
+
onComplete,
|
|
13
|
+
message = "Creating your plan...",
|
|
14
|
+
subMessage = "AI is analyzing your goals and building a personalized plan",
|
|
15
|
+
primaryColor = "#6366F1",
|
|
16
|
+
backgroundColor = "#0f172a",
|
|
17
|
+
textColor = "#ffffff",
|
|
18
|
+
contained = false,
|
|
19
|
+
statusMessages = [
|
|
20
|
+
{ icon: 'sparkles', text: 'Analyzing your goals' },
|
|
21
|
+
{ icon: 'brain', text: 'Designing daily structure' },
|
|
22
|
+
{ icon: 'zap', text: 'Generating action items' },
|
|
23
|
+
],
|
|
24
|
+
}) {
|
|
25
|
+
|
|
26
|
+
const containerClass = contained
|
|
27
|
+
? "relative w-full h-full min-h-[400px] rounded-xl flex items-center justify-center overflow-hidden"
|
|
28
|
+
: "fixed inset-0 z-[70] flex items-center justify-center";
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<AnimatePresence>
|
|
32
|
+
{isLoading && (
|
|
33
|
+
<motion.div
|
|
34
|
+
initial={{ opacity: 0 }}
|
|
35
|
+
animate={{ opacity: 1 }}
|
|
36
|
+
exit={{ opacity: 0 }}
|
|
37
|
+
className={containerClass}
|
|
38
|
+
style={{ backgroundColor }}
|
|
39
|
+
>
|
|
40
|
+
<div className="text-center max-w-md px-6">
|
|
41
|
+
{/* Animated AI Brain */}
|
|
42
|
+
<div className="relative w-32 h-32 mx-auto mb-8">
|
|
43
|
+
{/* Outer rotating ring */}
|
|
44
|
+
<motion.div
|
|
45
|
+
className="absolute inset-0 rounded-full"
|
|
46
|
+
style={{ border: `2px solid ${primaryColor}30` }}
|
|
47
|
+
animate={{ rotate: 360 }}
|
|
48
|
+
transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
|
|
49
|
+
/>
|
|
50
|
+
|
|
51
|
+
{/* Middle pulsing ring */}
|
|
52
|
+
<motion.div
|
|
53
|
+
className="absolute inset-2 rounded-full"
|
|
54
|
+
style={{ border: `2px solid ${primaryColor}80` }}
|
|
55
|
+
animate={{
|
|
56
|
+
scale: [1, 1.1, 1],
|
|
57
|
+
opacity: [0.5, 1, 0.5]
|
|
58
|
+
}}
|
|
59
|
+
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
|
|
60
|
+
/>
|
|
61
|
+
|
|
62
|
+
{/* Inner ring with gradient */}
|
|
63
|
+
<motion.div
|
|
64
|
+
className="absolute inset-4 rounded-full"
|
|
65
|
+
style={{
|
|
66
|
+
background: `linear-gradient(135deg, ${primaryColor}40, ${primaryColor}10)`
|
|
67
|
+
}}
|
|
68
|
+
animate={{ rotate: -360 }}
|
|
69
|
+
transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
|
|
70
|
+
/>
|
|
71
|
+
|
|
72
|
+
{/* Center icon */}
|
|
73
|
+
<motion.div
|
|
74
|
+
className="absolute inset-0 flex items-center justify-center"
|
|
75
|
+
animate={{
|
|
76
|
+
scale: [1, 1.05, 1],
|
|
77
|
+
}}
|
|
78
|
+
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
|
|
79
|
+
>
|
|
80
|
+
<Brain className="w-12 h-12" style={{ color: primaryColor }} />
|
|
81
|
+
</motion.div>
|
|
82
|
+
|
|
83
|
+
{/* Floating particles */}
|
|
84
|
+
{[...Array(6)].map((_, i) => (
|
|
85
|
+
<motion.div
|
|
86
|
+
key={i}
|
|
87
|
+
className="absolute w-2 h-2 rounded-full"
|
|
88
|
+
style={{
|
|
89
|
+
top: '50%',
|
|
90
|
+
left: '50%',
|
|
91
|
+
backgroundColor: primaryColor,
|
|
92
|
+
}}
|
|
93
|
+
animate={{
|
|
94
|
+
x: [0, Math.cos(i * 60 * Math.PI / 180) * 60],
|
|
95
|
+
y: [0, Math.sin(i * 60 * Math.PI / 180) * 60],
|
|
96
|
+
opacity: [0, 1, 0],
|
|
97
|
+
scale: [0, 1, 0],
|
|
98
|
+
}}
|
|
99
|
+
transition={{
|
|
100
|
+
duration: 2,
|
|
101
|
+
repeat: Infinity,
|
|
102
|
+
delay: i * 0.3,
|
|
103
|
+
ease: "easeOut"
|
|
104
|
+
}}
|
|
105
|
+
/>
|
|
106
|
+
))}
|
|
107
|
+
</div>
|
|
108
|
+
|
|
109
|
+
{/* Text */}
|
|
110
|
+
<motion.h3
|
|
111
|
+
className="text-2xl font-bold mb-3"
|
|
112
|
+
style={{ color: textColor }}
|
|
113
|
+
animate={{ opacity: [0.7, 1, 0.7] }}
|
|
114
|
+
transition={{ duration: 2, repeat: Infinity }}
|
|
115
|
+
>
|
|
116
|
+
{message}
|
|
117
|
+
</motion.h3>
|
|
118
|
+
|
|
119
|
+
<motion.p
|
|
120
|
+
className="text-sm mb-6"
|
|
121
|
+
style={{ color: `${textColor}99` }}
|
|
122
|
+
initial={{ opacity: 0, y: 10 }}
|
|
123
|
+
animate={{ opacity: 1, y: 0 }}
|
|
124
|
+
transition={{ delay: 0.3 }}
|
|
125
|
+
>
|
|
126
|
+
{subMessage}
|
|
127
|
+
</motion.p>
|
|
128
|
+
|
|
129
|
+
{/* Progress dots */}
|
|
130
|
+
<div className="flex justify-center gap-2">
|
|
131
|
+
{[0, 1, 2, 3, 4].map((i) => (
|
|
132
|
+
<motion.div
|
|
133
|
+
key={i}
|
|
134
|
+
className="w-2 h-2 rounded-full"
|
|
135
|
+
style={{ backgroundColor: primaryColor }}
|
|
136
|
+
animate={{
|
|
137
|
+
opacity: [0.3, 1, 0.3],
|
|
138
|
+
scale: [0.8, 1.2, 0.8],
|
|
139
|
+
}}
|
|
140
|
+
transition={{
|
|
141
|
+
duration: 1,
|
|
142
|
+
repeat: Infinity,
|
|
143
|
+
delay: i * 0.15,
|
|
144
|
+
}}
|
|
145
|
+
/>
|
|
146
|
+
))}
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
{/* Status messages */}
|
|
150
|
+
<motion.div
|
|
151
|
+
className="mt-8 space-y-2"
|
|
152
|
+
initial={{ opacity: 0 }}
|
|
153
|
+
animate={{ opacity: 1 }}
|
|
154
|
+
transition={{ delay: 1 }}
|
|
155
|
+
>
|
|
156
|
+
{statusMessages.map((status, index) => {
|
|
157
|
+
const Icon = iconMap[status.icon];
|
|
158
|
+
return (
|
|
159
|
+
<motion.div
|
|
160
|
+
key={index}
|
|
161
|
+
className="flex items-center justify-center gap-2 text-sm"
|
|
162
|
+
initial={{ opacity: 0, x: -20 }}
|
|
163
|
+
animate={{ opacity: [0, 1, 1, 0.5], x: 0 }}
|
|
164
|
+
transition={{
|
|
165
|
+
delay: index * 2,
|
|
166
|
+
duration: 4,
|
|
167
|
+
repeat: Infinity,
|
|
168
|
+
repeatDelay: (statusMessages.length - 1) * 2 + 4
|
|
169
|
+
}}
|
|
170
|
+
>
|
|
171
|
+
<Icon className="w-4 h-4" style={{ color: primaryColor }} />
|
|
172
|
+
<span style={{ color: `${textColor}99` }}>{status.text}</span>
|
|
173
|
+
</motion.div>
|
|
174
|
+
);
|
|
175
|
+
})}
|
|
176
|
+
</motion.div>
|
|
177
|
+
</div>
|
|
178
|
+
</motion.div>
|
|
179
|
+
)}
|
|
180
|
+
</AnimatePresence>
|
|
181
|
+
);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
export default AiCreating2;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,10 +1,27 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ComponentType } from 'react';
|
|
2
2
|
|
|
3
|
+
// AiCreating Props
|
|
3
4
|
export interface AiCreatingProps {
|
|
4
5
|
isLoading: boolean;
|
|
5
6
|
onComplete?: () => void;
|
|
6
7
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
|
|
7
8
|
}
|
|
8
9
|
|
|
10
|
+
// AiCreating2 Props
|
|
11
|
+
export interface AiCreating2Props {
|
|
12
|
+
isLoading: boolean;
|
|
13
|
+
onComplete?: () => void;
|
|
14
|
+
message?: string;
|
|
15
|
+
subMessage?: string;
|
|
16
|
+
primaryColor?: string;
|
|
17
|
+
backgroundColor?: string;
|
|
18
|
+
textColor?: string;
|
|
19
|
+
contained?: boolean;
|
|
20
|
+
statusMessages?: Array<{ icon: 'sparkles' | 'brain' | 'zap'; text: string }>;
|
|
21
|
+
}
|
|
22
|
+
|
|
9
23
|
declare const AiCreating: FC<AiCreatingProps>;
|
|
24
|
+
declare const AiCreating2: FC<AiCreating2Props>;
|
|
25
|
+
|
|
26
|
+
export { AiCreating, AiCreating2 };
|
|
10
27
|
export default AiCreating;
|
package/dist/index.js
CHANGED
|
@@ -1,154 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* AiCreating - AI Assistant Processing Animation
|
|
7
|
-
* Shows AI helping user with their tasks/requests
|
|
8
|
-
* Relatable user scenario: AI reading, processing, delivering results
|
|
9
|
-
*/
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
// CSS must be imported separately: import 'ai-react-animations/styles.css'
|
|
15
|
-
|
|
16
|
-
interface AiCreatingProps {
|
|
17
|
-
isLoading: boolean;
|
|
18
|
-
onComplete?: () => void;
|
|
19
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function AiCreating({
|
|
23
|
-
isLoading,
|
|
24
|
-
onComplete,
|
|
25
|
-
size = 'md'
|
|
26
|
-
}: AiCreatingProps) {
|
|
27
|
-
const [stage, setStage] = useState<'idle' | 'reading' | 'processing' | 'delivering' | 'complete'>('idle');
|
|
28
|
-
|
|
29
|
-
useEffect(() => {
|
|
30
|
-
if (isLoading) {
|
|
31
|
-
setStage('reading');
|
|
32
|
-
const t1 = setTimeout(() => setStage('processing'), 1800);
|
|
33
|
-
const t2 = setTimeout(() => setStage('delivering'), 3600);
|
|
34
|
-
return () => { clearTimeout(t1); clearTimeout(t2); };
|
|
35
|
-
} else if (stage !== 'idle' && stage !== 'reading') {
|
|
36
|
-
setStage('complete');
|
|
37
|
-
const t = setTimeout(() => {
|
|
38
|
-
onComplete?.();
|
|
39
|
-
setStage('idle');
|
|
40
|
-
}, 1200);
|
|
41
|
-
return () => clearTimeout(t);
|
|
42
|
-
}
|
|
43
|
-
}, [isLoading]);
|
|
44
|
-
|
|
45
|
-
const stageText = {
|
|
46
|
-
idle: '',
|
|
47
|
-
reading: 'Reading your request',
|
|
48
|
-
processing: 'Working on it',
|
|
49
|
-
delivering: 'Almost there',
|
|
50
|
-
complete: 'Done!'
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<div className={`ai-creating-wrapper size-${size}`}>
|
|
55
|
-
<div className={`ai-creating-container stage-${stage}`}>
|
|
56
|
-
|
|
57
|
-
{/* Animated Background Particles */}
|
|
58
|
-
<div className="particles">
|
|
59
|
-
<span></span><span></span><span></span>
|
|
60
|
-
<span></span><span></span><span></span>
|
|
61
|
-
</div>
|
|
62
|
-
|
|
63
|
-
{/* Main Content */}
|
|
64
|
-
<div className="ai-scene">
|
|
65
|
-
|
|
66
|
-
{/* AI Robot Character */}
|
|
67
|
-
<div className={`ai-robot ${stage}`}>
|
|
68
|
-
<div className="robot-head">
|
|
69
|
-
<div className="robot-face">
|
|
70
|
-
<div className="robot-eyes">
|
|
71
|
-
<div className="eye left">
|
|
72
|
-
<div className="pupil"></div>
|
|
73
|
-
</div>
|
|
74
|
-
<div className="eye right">
|
|
75
|
-
<div className="pupil"></div>
|
|
76
|
-
</div>
|
|
77
|
-
</div>
|
|
78
|
-
<div className="robot-mouth"></div>
|
|
79
|
-
</div>
|
|
80
|
-
<div className="antenna">
|
|
81
|
-
<div className="antenna-ball"></div>
|
|
82
|
-
</div>
|
|
83
|
-
</div>
|
|
84
|
-
<div className="robot-body">
|
|
85
|
-
<div className="chest-light"></div>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
|
|
89
|
-
{/* User Request Card - Reading Stage */}
|
|
90
|
-
{(stage === 'reading' || stage === 'processing') && (
|
|
91
|
-
<div className={`request-card ${stage}`}>
|
|
92
|
-
<div className="card-icon">📝</div>
|
|
93
|
-
<div className="card-lines">
|
|
94
|
-
<span className="line"></span>
|
|
95
|
-
<span className="line short"></span>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
)}
|
|
99
|
-
|
|
100
|
-
{/* Processing Gears - Processing Stage */}
|
|
101
|
-
{stage === 'processing' && (
|
|
102
|
-
<div className="processing-visual">
|
|
103
|
-
<div className="gear gear-1">⚙️</div>
|
|
104
|
-
<div className="gear gear-2">⚙️</div>
|
|
105
|
-
<div className="sparkles">
|
|
106
|
-
<span>✨</span><span>✨</span><span>✨</span>
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
)}
|
|
110
|
-
|
|
111
|
-
{/* Result Card - Delivering Stage */}
|
|
112
|
-
{(stage === 'delivering' || stage === 'complete') && (
|
|
113
|
-
<div className={`result-card ${stage}`}>
|
|
114
|
-
<div className="result-icon">{stage === 'complete' ? '✅' : '📄'}</div>
|
|
115
|
-
<div className="result-lines">
|
|
116
|
-
<span className="line"></span>
|
|
117
|
-
<span className="line"></span>
|
|
118
|
-
<span className="line short"></span>
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
)}
|
|
122
|
-
|
|
123
|
-
{/* Status Text */}
|
|
124
|
-
{stage !== 'idle' && (
|
|
125
|
-
<div className="status-area">
|
|
126
|
-
<span className={`status-text ${stage}`}>{stageText[stage]}</span>
|
|
127
|
-
{stage !== 'complete' && (
|
|
128
|
-
<span className="dots">
|
|
129
|
-
<span>.</span><span>.</span><span>.</span>
|
|
130
|
-
</span>
|
|
131
|
-
)}
|
|
132
|
-
</div>
|
|
133
|
-
)}
|
|
134
|
-
|
|
135
|
-
{/* Progress Indicator */}
|
|
136
|
-
<div className="progress-track">
|
|
137
|
-
<div className={`progress-bar stage-${stage}`}></div>
|
|
138
|
-
<div className="progress-steps">
|
|
139
|
-
<div className={`step ${stage !== 'idle' ? 'active' : ''}`}></div>
|
|
140
|
-
<div className={`step ${stage === 'processing' || stage === 'delivering' || stage === 'complete' ? 'active' : ''}`}></div>
|
|
141
|
-
<div className={`step ${stage === 'delivering' || stage === 'complete' ? 'active' : ''}`}></div>
|
|
142
|
-
<div className={`step ${stage === 'complete' ? 'active' : ''}`}></div>
|
|
143
|
-
</div>
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
</div>
|
|
147
|
-
</div>
|
|
148
|
-
</div>
|
|
149
|
-
);
|
|
150
|
-
}
|
|
2
|
+
// ai-react-animations - CommonJS Build
|
|
3
|
+
// For full functionality, use ESM import
|
|
151
4
|
|
|
5
|
+
const AiCreating = require('./AiCreating.cjs');
|
|
6
|
+
const AiCreating2 = require('./AiCreating2.cjs');
|
|
152
7
|
|
|
153
8
|
module.exports = AiCreating;
|
|
154
9
|
module.exports.default = AiCreating;
|
|
10
|
+
module.exports.AiCreating = AiCreating;
|
|
11
|
+
module.exports.AiCreating2 = AiCreating2;
|
package/dist/index.mjs
CHANGED
|
@@ -1,26 +1,20 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
// ai-react-animations - ESM Build
|
|
3
|
+
// CSS: import 'ai-react-animations/styles.css'
|
|
4
|
+
|
|
5
|
+
import { useEffect, useState } from 'react';
|
|
6
|
+
import { motion, AnimatePresence } from 'framer-motion';
|
|
7
|
+
import { Sparkles, Brain, Zap } from 'lucide-react';
|
|
8
|
+
|
|
9
|
+
// AiCreating Component
|
|
1
10
|
/**
|
|
2
11
|
* AiCreating - AI Assistant Processing Animation
|
|
3
12
|
* Shows AI helping user with their tasks/requests
|
|
4
13
|
* Relatable user scenario: AI reading, processing, delivering results
|
|
5
14
|
*/
|
|
6
15
|
|
|
7
|
-
'
|
|
8
|
-
|
|
9
|
-
import { useEffect, useState } from 'react';
|
|
10
|
-
// CSS must be imported separately: import 'ai-react-animations/styles.css'
|
|
11
|
-
|
|
12
|
-
export interface AiCreatingProps {
|
|
13
|
-
isLoading: boolean;
|
|
14
|
-
onComplete?: () => void;
|
|
15
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export default function AiCreating({
|
|
19
|
-
isLoading,
|
|
20
|
-
onComplete,
|
|
21
|
-
size = 'md'
|
|
22
|
-
}: AiCreatingProps) {
|
|
23
|
-
const [stage, setStage] = useState<'idle' | 'reading' | 'processing' | 'delivering' | 'complete'>('idle');
|
|
16
|
+
export default function AiCreating({ isLoading, onComplete, size = 'md' }) {
|
|
17
|
+
const [stage, setStage] = useState('idle');
|
|
24
18
|
|
|
25
19
|
useEffect(() => {
|
|
26
20
|
if (isLoading) {
|
|
@@ -145,3 +139,189 @@ export default function AiCreating({
|
|
|
145
139
|
);
|
|
146
140
|
}
|
|
147
141
|
|
|
142
|
+
|
|
143
|
+
// AiCreating2 Component
|
|
144
|
+
const iconMap = {
|
|
145
|
+
sparkles: Sparkles,
|
|
146
|
+
brain: Brain,
|
|
147
|
+
zap: Zap,
|
|
148
|
+
};
|
|
149
|
+
|
|
150
|
+
export function AiCreating2({
|
|
151
|
+
isLoading,
|
|
152
|
+
onComplete,
|
|
153
|
+
message = "Creating your plan...",
|
|
154
|
+
subMessage = "AI is analyzing your goals and building a personalized plan",
|
|
155
|
+
primaryColor = "#6366F1",
|
|
156
|
+
backgroundColor = "#0f172a",
|
|
157
|
+
textColor = "#ffffff",
|
|
158
|
+
contained = false,
|
|
159
|
+
statusMessages = [
|
|
160
|
+
{ icon: 'sparkles', text: 'Analyzing your goals' },
|
|
161
|
+
{ icon: 'brain', text: 'Designing daily structure' },
|
|
162
|
+
{ icon: 'zap', text: 'Generating action items' },
|
|
163
|
+
],
|
|
164
|
+
}) {
|
|
165
|
+
|
|
166
|
+
const containerClass = contained
|
|
167
|
+
? "relative w-full h-full min-h-[400px] rounded-xl flex items-center justify-center overflow-hidden"
|
|
168
|
+
: "fixed inset-0 z-[70] flex items-center justify-center";
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<AnimatePresence>
|
|
172
|
+
{isLoading && (
|
|
173
|
+
<motion.div
|
|
174
|
+
initial={{ opacity: 0 }}
|
|
175
|
+
animate={{ opacity: 1 }}
|
|
176
|
+
exit={{ opacity: 0 }}
|
|
177
|
+
className={containerClass}
|
|
178
|
+
style={{ backgroundColor }}
|
|
179
|
+
>
|
|
180
|
+
<div className="text-center max-w-md px-6">
|
|
181
|
+
{/* Animated AI Brain */}
|
|
182
|
+
<div className="relative w-32 h-32 mx-auto mb-8">
|
|
183
|
+
{/* Outer rotating ring */}
|
|
184
|
+
<motion.div
|
|
185
|
+
className="absolute inset-0 rounded-full"
|
|
186
|
+
style={{ border: `2px solid ${primaryColor}30` }}
|
|
187
|
+
animate={{ rotate: 360 }}
|
|
188
|
+
transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
|
|
189
|
+
/>
|
|
190
|
+
|
|
191
|
+
{/* Middle pulsing ring */}
|
|
192
|
+
<motion.div
|
|
193
|
+
className="absolute inset-2 rounded-full"
|
|
194
|
+
style={{ border: `2px solid ${primaryColor}80` }}
|
|
195
|
+
animate={{
|
|
196
|
+
scale: [1, 1.1, 1],
|
|
197
|
+
opacity: [0.5, 1, 0.5]
|
|
198
|
+
}}
|
|
199
|
+
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
|
|
200
|
+
/>
|
|
201
|
+
|
|
202
|
+
{/* Inner ring with gradient */}
|
|
203
|
+
<motion.div
|
|
204
|
+
className="absolute inset-4 rounded-full"
|
|
205
|
+
style={{
|
|
206
|
+
background: `linear-gradient(135deg, ${primaryColor}40, ${primaryColor}10)`
|
|
207
|
+
}}
|
|
208
|
+
animate={{ rotate: -360 }}
|
|
209
|
+
transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
|
|
210
|
+
/>
|
|
211
|
+
|
|
212
|
+
{/* Center icon */}
|
|
213
|
+
<motion.div
|
|
214
|
+
className="absolute inset-0 flex items-center justify-center"
|
|
215
|
+
animate={{
|
|
216
|
+
scale: [1, 1.05, 1],
|
|
217
|
+
}}
|
|
218
|
+
transition={{ duration: 1.5, repeat: Infinity, ease: "easeInOut" }}
|
|
219
|
+
>
|
|
220
|
+
<Brain className="w-12 h-12" style={{ color: primaryColor }} />
|
|
221
|
+
</motion.div>
|
|
222
|
+
|
|
223
|
+
{/* Floating particles */}
|
|
224
|
+
{[...Array(6)].map((_, i) => (
|
|
225
|
+
<motion.div
|
|
226
|
+
key={i}
|
|
227
|
+
className="absolute w-2 h-2 rounded-full"
|
|
228
|
+
style={{
|
|
229
|
+
top: '50%',
|
|
230
|
+
left: '50%',
|
|
231
|
+
backgroundColor: primaryColor,
|
|
232
|
+
}}
|
|
233
|
+
animate={{
|
|
234
|
+
x: [0, Math.cos(i * 60 * Math.PI / 180) * 60],
|
|
235
|
+
y: [0, Math.sin(i * 60 * Math.PI / 180) * 60],
|
|
236
|
+
opacity: [0, 1, 0],
|
|
237
|
+
scale: [0, 1, 0],
|
|
238
|
+
}}
|
|
239
|
+
transition={{
|
|
240
|
+
duration: 2,
|
|
241
|
+
repeat: Infinity,
|
|
242
|
+
delay: i * 0.3,
|
|
243
|
+
ease: "easeOut"
|
|
244
|
+
}}
|
|
245
|
+
/>
|
|
246
|
+
))}
|
|
247
|
+
</div>
|
|
248
|
+
|
|
249
|
+
{/* Text */}
|
|
250
|
+
<motion.h3
|
|
251
|
+
className="text-2xl font-bold mb-3"
|
|
252
|
+
style={{ color: textColor }}
|
|
253
|
+
animate={{ opacity: [0.7, 1, 0.7] }}
|
|
254
|
+
transition={{ duration: 2, repeat: Infinity }}
|
|
255
|
+
>
|
|
256
|
+
{message}
|
|
257
|
+
</motion.h3>
|
|
258
|
+
|
|
259
|
+
<motion.p
|
|
260
|
+
className="text-sm mb-6"
|
|
261
|
+
style={{ color: `${textColor}99` }}
|
|
262
|
+
initial={{ opacity: 0, y: 10 }}
|
|
263
|
+
animate={{ opacity: 1, y: 0 }}
|
|
264
|
+
transition={{ delay: 0.3 }}
|
|
265
|
+
>
|
|
266
|
+
{subMessage}
|
|
267
|
+
</motion.p>
|
|
268
|
+
|
|
269
|
+
{/* Progress dots */}
|
|
270
|
+
<div className="flex justify-center gap-2">
|
|
271
|
+
{[0, 1, 2, 3, 4].map((i) => (
|
|
272
|
+
<motion.div
|
|
273
|
+
key={i}
|
|
274
|
+
className="w-2 h-2 rounded-full"
|
|
275
|
+
style={{ backgroundColor: primaryColor }}
|
|
276
|
+
animate={{
|
|
277
|
+
opacity: [0.3, 1, 0.3],
|
|
278
|
+
scale: [0.8, 1.2, 0.8],
|
|
279
|
+
}}
|
|
280
|
+
transition={{
|
|
281
|
+
duration: 1,
|
|
282
|
+
repeat: Infinity,
|
|
283
|
+
delay: i * 0.15,
|
|
284
|
+
}}
|
|
285
|
+
/>
|
|
286
|
+
))}
|
|
287
|
+
</div>
|
|
288
|
+
|
|
289
|
+
{/* Status messages */}
|
|
290
|
+
<motion.div
|
|
291
|
+
className="mt-8 space-y-2"
|
|
292
|
+
initial={{ opacity: 0 }}
|
|
293
|
+
animate={{ opacity: 1 }}
|
|
294
|
+
transition={{ delay: 1 }}
|
|
295
|
+
>
|
|
296
|
+
{statusMessages.map((status, index) => {
|
|
297
|
+
const Icon = iconMap[status.icon];
|
|
298
|
+
return (
|
|
299
|
+
<motion.div
|
|
300
|
+
key={index}
|
|
301
|
+
className="flex items-center justify-center gap-2 text-sm"
|
|
302
|
+
initial={{ opacity: 0, x: -20 }}
|
|
303
|
+
animate={{ opacity: [0, 1, 1, 0.5], x: 0 }}
|
|
304
|
+
transition={{
|
|
305
|
+
delay: index * 2,
|
|
306
|
+
duration: 4,
|
|
307
|
+
repeat: Infinity,
|
|
308
|
+
repeatDelay: (statusMessages.length - 1) * 2 + 4
|
|
309
|
+
}}
|
|
310
|
+
>
|
|
311
|
+
<Icon className="w-4 h-4" style={{ color: primaryColor }} />
|
|
312
|
+
<span style={{ color: `${textColor}99` }}>{status.text}</span>
|
|
313
|
+
</motion.div>
|
|
314
|
+
);
|
|
315
|
+
})}
|
|
316
|
+
</motion.div>
|
|
317
|
+
</div>
|
|
318
|
+
</motion.div>
|
|
319
|
+
)}
|
|
320
|
+
</AnimatePresence>
|
|
321
|
+
);
|
|
322
|
+
}
|
|
323
|
+
|
|
324
|
+
export default AiCreating2;
|
|
325
|
+
|
|
326
|
+
|
|
327
|
+
export { AiCreating, AiCreating2 };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ai-react-animations",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "Beautiful AI loading animation components for React/Next.js. Shows AI processing states with friendly robot character.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -41,6 +41,10 @@
|
|
|
41
41
|
"type": "git",
|
|
42
42
|
"url": "https://github.com/johnbekele/ai-react-animations"
|
|
43
43
|
},
|
|
44
|
+
"dependencies": {
|
|
45
|
+
"framer-motion": "^11.0.0",
|
|
46
|
+
"lucide-react": "^0.344.0"
|
|
47
|
+
},
|
|
44
48
|
"peerDependencies": {
|
|
45
49
|
"react": ">=17.0.0",
|
|
46
50
|
"react-dom": ">=17.0.0"
|