ai-react-animations 1.1.0 → 1.1.2
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.mjs +6 -17
- package/dist/AiCreating2.mjs +4 -22
- package/dist/index.mjs +12 -42
- package/package.json +1 -1
package/dist/AiCreating.mjs
CHANGED
|
@@ -1,26 +1,13 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { useEffect, useState } from 'react';
|
|
1
3
|
/**
|
|
2
4
|
* AiCreating - AI Assistant Processing Animation
|
|
3
5
|
* Shows AI helping user with their tasks/requests
|
|
4
6
|
* Relatable user scenario: AI reading, processing, delivering results
|
|
5
7
|
*/
|
|
6
8
|
|
|
7
|
-
'
|
|
8
|
-
|
|
9
|
-
import { useEffect, useState } from 'react';
|
|
10
|
-
// CSS: 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');
|
|
9
|
+
function AiCreating({ isLoading, onComplete, size = 'md' }) {
|
|
10
|
+
const [stage, setStage] = useState('idle');
|
|
24
11
|
|
|
25
12
|
useEffect(() => {
|
|
26
13
|
if (isLoading) {
|
|
@@ -144,3 +131,5 @@ export default function AiCreating({
|
|
|
144
131
|
</div>
|
|
145
132
|
);
|
|
146
133
|
}
|
|
134
|
+
|
|
135
|
+
export default AiCreating;
|
package/dist/AiCreating2.mjs
CHANGED
|
@@ -1,32 +1,13 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
|
|
3
2
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
4
3
|
import { Sparkles, Brain, Zap } from 'lucide-react';
|
|
5
|
-
|
|
6
|
-
export interface AiCreating2Props {
|
|
7
|
-
isLoading: boolean;
|
|
8
|
-
onComplete?: () => void;
|
|
9
|
-
message?: string;
|
|
10
|
-
subMessage?: string;
|
|
11
|
-
/** Primary color for animations (hex) */
|
|
12
|
-
primaryColor?: string;
|
|
13
|
-
/** Background color (hex) */
|
|
14
|
-
backgroundColor?: string;
|
|
15
|
-
/** Text color (hex) */
|
|
16
|
-
textColor?: string;
|
|
17
|
-
/** If true, renders in a contained box instead of full-screen overlay */
|
|
18
|
-
contained?: boolean;
|
|
19
|
-
/** Status messages to cycle through */
|
|
20
|
-
statusMessages?: Array<{ icon: 'sparkles' | 'brain' | 'zap'; text: string }>;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
4
|
const iconMap = {
|
|
24
5
|
sparkles: Sparkles,
|
|
25
6
|
brain: Brain,
|
|
26
7
|
zap: Zap,
|
|
27
8
|
};
|
|
28
9
|
|
|
29
|
-
|
|
10
|
+
function AiCreating2({
|
|
30
11
|
isLoading,
|
|
31
12
|
onComplete,
|
|
32
13
|
message = "Creating your plan...",
|
|
@@ -40,7 +21,7 @@ export function AiCreating2({
|
|
|
40
21
|
{ icon: 'brain', text: 'Designing daily structure' },
|
|
41
22
|
{ icon: 'zap', text: 'Generating action items' },
|
|
42
23
|
],
|
|
43
|
-
}
|
|
24
|
+
}) {
|
|
44
25
|
|
|
45
26
|
const containerClass = contained
|
|
46
27
|
? "relative w-full h-full min-h-[400px] rounded-xl flex items-center justify-center overflow-hidden"
|
|
@@ -200,4 +181,5 @@ export function AiCreating2({
|
|
|
200
181
|
);
|
|
201
182
|
}
|
|
202
183
|
|
|
203
|
-
|
|
184
|
+
|
|
185
|
+
export default AiCreating2;
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
+
'use client';
|
|
1
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
|
+
|
|
2
9
|
// AiCreating Component
|
|
3
10
|
/**
|
|
4
11
|
* AiCreating - AI Assistant Processing Animation
|
|
@@ -6,23 +13,8 @@
|
|
|
6
13
|
* Relatable user scenario: AI reading, processing, delivering results
|
|
7
14
|
*/
|
|
8
15
|
|
|
9
|
-
'
|
|
10
|
-
|
|
11
|
-
import { useEffect, useState } from 'react';
|
|
12
|
-
// CSS: import 'ai-react-animations/styles.css'
|
|
13
|
-
|
|
14
|
-
export interface AiCreatingProps {
|
|
15
|
-
isLoading: boolean;
|
|
16
|
-
onComplete?: () => void;
|
|
17
|
-
size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
export default function AiCreating({
|
|
21
|
-
isLoading,
|
|
22
|
-
onComplete,
|
|
23
|
-
size = 'md'
|
|
24
|
-
}: AiCreatingProps) {
|
|
25
|
-
const [stage, setStage] = useState<'idle' | 'reading' | 'processing' | 'delivering' | 'complete'>('idle');
|
|
16
|
+
function AiCreating({ isLoading, onComplete, size = 'md' }) {
|
|
17
|
+
const [stage, setStage] = useState('idle');
|
|
26
18
|
|
|
27
19
|
useEffect(() => {
|
|
28
20
|
if (isLoading) {
|
|
@@ -149,35 +141,13 @@ export default function AiCreating({
|
|
|
149
141
|
|
|
150
142
|
|
|
151
143
|
// AiCreating2 Component
|
|
152
|
-
'use client';
|
|
153
|
-
|
|
154
|
-
import { motion, AnimatePresence } from 'framer-motion';
|
|
155
|
-
import { Sparkles, Brain, Zap } from 'lucide-react';
|
|
156
|
-
|
|
157
|
-
export interface AiCreating2Props {
|
|
158
|
-
isLoading: boolean;
|
|
159
|
-
onComplete?: () => void;
|
|
160
|
-
message?: string;
|
|
161
|
-
subMessage?: string;
|
|
162
|
-
/** Primary color for animations (hex) */
|
|
163
|
-
primaryColor?: string;
|
|
164
|
-
/** Background color (hex) */
|
|
165
|
-
backgroundColor?: string;
|
|
166
|
-
/** Text color (hex) */
|
|
167
|
-
textColor?: string;
|
|
168
|
-
/** If true, renders in a contained box instead of full-screen overlay */
|
|
169
|
-
contained?: boolean;
|
|
170
|
-
/** Status messages to cycle through */
|
|
171
|
-
statusMessages?: Array<{ icon: 'sparkles' | 'brain' | 'zap'; text: string }>;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
144
|
const iconMap = {
|
|
175
145
|
sparkles: Sparkles,
|
|
176
146
|
brain: Brain,
|
|
177
147
|
zap: Zap,
|
|
178
148
|
};
|
|
179
149
|
|
|
180
|
-
|
|
150
|
+
function AiCreating2({
|
|
181
151
|
isLoading,
|
|
182
152
|
onComplete,
|
|
183
153
|
message = "Creating your plan...",
|
|
@@ -191,7 +161,7 @@ export function AiCreating2({
|
|
|
191
161
|
{ icon: 'brain', text: 'Designing daily structure' },
|
|
192
162
|
{ icon: 'zap', text: 'Generating action items' },
|
|
193
163
|
],
|
|
194
|
-
}
|
|
164
|
+
}) {
|
|
195
165
|
|
|
196
166
|
const containerClass = contained
|
|
197
167
|
? "relative w-full h-full min-h-[400px] rounded-xl flex items-center justify-center overflow-hidden"
|
|
@@ -351,7 +321,7 @@ export function AiCreating2({
|
|
|
351
321
|
);
|
|
352
322
|
}
|
|
353
323
|
|
|
354
|
-
export default AiCreating2;
|
|
355
324
|
|
|
356
325
|
|
|
357
326
|
export { AiCreating, AiCreating2 };
|
|
327
|
+
export default AiCreating;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ai-react-animations",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2",
|
|
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",
|