ai-react-animations 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 AI Animation Framework Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# ai-react-animations
+
+Beautiful AI loading animation components for React/Next.js. Shows AI processing states with a friendly robot character.
+
+## Installation
+
+```bash
+npm install ai-react-animations
+```
+
+## Usage
+
+```tsx
+import AiCreating from 'ai-react-animations';
+import 'ai-react-animations/styles.css';
+
+function MyComponent() {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <AiCreating
+      isLoading={isLoading}
+      size="md"
+      onComplete={() => console.log('Done!')}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `isLoading` | `boolean` | required | Controls the animation state |
+| `size` | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `'md'` | Size of the animation |
+| `onComplete` | `() => void` | - | Callback when animation completes |
+
+## Sizes
+
+- `xs` - 100px height (for buttons)
+- `sm` - 160px height (for small cards)
+- `md` - 240px height (default)
+- `lg` - 340px height (for large displays)
+- `full` - 100% height (fills container)
+
+## Animation Stages
+
+The component shows 4 stages when `isLoading={true}`:
+
+1. **Reading** - Robot reads the request
+2. **Processing** - Gears spin, sparkles appear
+3. **Delivering** - Result card slides in
+4. **Complete** - Success state with green checkmark
+
+## Features
+
+- Pure CSS animations (no external dependencies)
+- Responsive design
+- Accessibility support (prefers-reduced-motion)
+- TypeScript support
+- Works with React 17+
+
+## Example with API Call
+
+```tsx
+const [loading, setLoading] = useState(false);
+
+async function handleSubmit() {
+  setLoading(true);
+  await fetch('/api/generate');
+  setLoading(false); // Triggers completion animation
+}
+
+return (
+  <div>
+    <button onClick={handleSubmit}>Generate</button>
+    <AiCreating isLoading={loading} />
+  </div>
+);
+```
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+
+export interface AiCreatingProps {
+  isLoading: boolean;
+  onComplete?: () => void;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+}
+
+declare const AiCreating: FC<AiCreatingProps>;
+export default AiCreating;

package/dist/index.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const { useEffect, useState } = require('react');
+
+/**
+ * AiCreating - AI Assistant Processing Animation
+ * Shows AI helping user with their tasks/requests
+ * Relatable user scenario: AI reading, processing, delivering results
+ */
+
+
+
+
+// CSS must be imported separately: import 'ai-react-animations/styles.css'
+
+interface AiCreatingProps {
+  isLoading: boolean;
+  onComplete?: () => void;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+}
+
+function AiCreating({
+  isLoading,
+  onComplete,
+  size = 'md'
+}: AiCreatingProps) {
+  const [stage, setStage] = useState<'idle' | 'reading' | 'processing' | 'delivering' | 'complete'>('idle');
+
+  useEffect(() => {
+    if (isLoading) {
+      setStage('reading');
+      const t1 = setTimeout(() => setStage('processing'), 1800);
+      const t2 = setTimeout(() => setStage('delivering'), 3600);
+      return () => { clearTimeout(t1); clearTimeout(t2); };
+    } else if (stage !== 'idle' && stage !== 'reading') {
+      setStage('complete');
+      const t = setTimeout(() => {
+        onComplete?.();
+        setStage('idle');
+      }, 1200);
+      return () => clearTimeout(t);
+    }
+  }, [isLoading]);
+
+  const stageText = {
+    idle: '',
+    reading: 'Reading your request',
+    processing: 'Working on it',
+    delivering: 'Almost there',
+    complete: 'Done!'
+  };
+
+  return (
+    <div className={`ai-creating-wrapper size-${size}`}>
+      <div className={`ai-creating-container stage-${stage}`}>
+
+        {/* Animated Background Particles */}
+        <div className="particles">
+          <span></span><span></span><span></span>
+          <span></span><span></span><span></span>
+        </div>
+
+        {/* Main Content */}
+        <div className="ai-scene">
+
+          {/* AI Robot Character */}
+          <div className={`ai-robot ${stage}`}>
+            <div className="robot-head">
+              <div className="robot-face">
+                <div className="robot-eyes">
+                  <div className="eye left">
+                    <div className="pupil"></div>
+                  </div>
+                  <div className="eye right">
+                    <div className="pupil"></div>
+                  </div>
+                </div>
+                <div className="robot-mouth"></div>
+              </div>
+              <div className="antenna">
+                <div className="antenna-ball"></div>
+              </div>
+            </div>
+            <div className="robot-body">
+              <div className="chest-light"></div>
+            </div>
+          </div>
+
+          {/* User Request Card - Reading Stage */}
+          {(stage === 'reading' || stage === 'processing') && (
+            <div className={`request-card ${stage}`}>
+              <div className="card-icon">📝</div>
+              <div className="card-lines">
+                <span className="line"></span>
+                <span className="line short"></span>
+              </div>
+            </div>
+          )}
+
+          {/* Processing Gears - Processing Stage */}
+          {stage === 'processing' && (
+            <div className="processing-visual">
+              <div className="gear gear-1">⚙️</div>
+              <div className="gear gear-2">⚙️</div>
+              <div className="sparkles">
+                <span>✨</span><span>✨</span><span>✨</span>
+              </div>
+            </div>
+          )}
+
+          {/* Result Card - Delivering Stage */}
+          {(stage === 'delivering' || stage === 'complete') && (
+            <div className={`result-card ${stage}`}>
+              <div className="result-icon">{stage === 'complete' ? '✅' : '📄'}</div>
+              <div className="result-lines">
+                <span className="line"></span>
+                <span className="line"></span>
+                <span className="line short"></span>
+              </div>
+            </div>
+          )}
+
+          {/* Status Text */}
+          {stage !== 'idle' && (
+            <div className="status-area">
+              <span className={`status-text ${stage}`}>{stageText[stage]}</span>
+              {stage !== 'complete' && (
+                <span className="dots">
+                  <span>.</span><span>.</span><span>.</span>
+                </span>
+              )}
+            </div>
+          )}
+
+          {/* Progress Indicator */}
+          <div className="progress-track">
+            <div className={`progress-bar stage-${stage}`}></div>
+            <div className="progress-steps">
+              <div className={`step ${stage !== 'idle' ? 'active' : ''}`}></div>
+              <div className={`step ${stage === 'processing' || stage === 'delivering' || stage === 'complete' ? 'active' : ''}`}></div>
+              <div className={`step ${stage === 'delivering' || stage === 'complete' ? 'active' : ''}`}></div>
+              <div className={`step ${stage === 'complete' ? 'active' : ''}`}></div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+
+
+module.exports = AiCreating;
+module.exports.default = AiCreating;

package/dist/index.mjs

@@ -0,0 +1,147 @@
+/**
+ * AiCreating - AI Assistant Processing Animation
+ * Shows AI helping user with their tasks/requests
+ * Relatable user scenario: AI reading, processing, delivering results
+ */
+
+'use client';
+
+import { useEffect, useState } from 'react';
+// CSS must be imported separately: import 'ai-react-animations/styles.css'
+
+export interface AiCreatingProps {
+  isLoading: boolean;
+  onComplete?: () => void;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'full';
+}
+
+export default function AiCreating({
+  isLoading,
+  onComplete,
+  size = 'md'
+}: AiCreatingProps) {
+  const [stage, setStage] = useState<'idle' | 'reading' | 'processing' | 'delivering' | 'complete'>('idle');
+
+  useEffect(() => {
+    if (isLoading) {
+      setStage('reading');
+      const t1 = setTimeout(() => setStage('processing'), 1800);
+      const t2 = setTimeout(() => setStage('delivering'), 3600);
+      return () => { clearTimeout(t1); clearTimeout(t2); };
+    } else if (stage !== 'idle' && stage !== 'reading') {
+      setStage('complete');
+      const t = setTimeout(() => {
+        onComplete?.();
+        setStage('idle');
+      }, 1200);
+      return () => clearTimeout(t);
+    }
+  }, [isLoading]);
+
+  const stageText = {
+    idle: '',
+    reading: 'Reading your request',
+    processing: 'Working on it',
+    delivering: 'Almost there',
+    complete: 'Done!'
+  };
+
+  return (
+    <div className={`ai-creating-wrapper size-${size}`}>
+      <div className={`ai-creating-container stage-${stage}`}>
+
+        {/* Animated Background Particles */}
+        <div className="particles">
+          <span></span><span></span><span></span>
+          <span></span><span></span><span></span>
+        </div>
+
+        {/* Main Content */}
+        <div className="ai-scene">
+
+          {/* AI Robot Character */}
+          <div className={`ai-robot ${stage}`}>
+            <div className="robot-head">
+              <div className="robot-face">
+                <div className="robot-eyes">
+                  <div className="eye left">
+                    <div className="pupil"></div>
+                  </div>
+                  <div className="eye right">
+                    <div className="pupil"></div>
+                  </div>
+                </div>
+                <div className="robot-mouth"></div>
+              </div>
+              <div className="antenna">
+                <div className="antenna-ball"></div>
+              </div>
+            </div>
+            <div className="robot-body">
+              <div className="chest-light"></div>
+            </div>
+          </div>
+
+          {/* User Request Card - Reading Stage */}
+          {(stage === 'reading' || stage === 'processing') && (
+            <div className={`request-card ${stage}`}>
+              <div className="card-icon">📝</div>
+              <div className="card-lines">
+                <span className="line"></span>
+                <span className="line short"></span>
+              </div>
+            </div>
+          )}
+
+          {/* Processing Gears - Processing Stage */}
+          {stage === 'processing' && (
+            <div className="processing-visual">
+              <div className="gear gear-1">⚙️</div>
+              <div className="gear gear-2">⚙️</div>
+              <div className="sparkles">
+                <span>✨</span><span>✨</span><span>✨</span>
+              </div>
+            </div>
+          )}
+
+          {/* Result Card - Delivering Stage */}
+          {(stage === 'delivering' || stage === 'complete') && (
+            <div className={`result-card ${stage}`}>
+              <div className="result-icon">{stage === 'complete' ? '✅' : '📄'}</div>
+              <div className="result-lines">
+                <span className="line"></span>
+                <span className="line"></span>
+                <span className="line short"></span>
+              </div>
+            </div>
+          )}
+
+          {/* Status Text */}
+          {stage !== 'idle' && (
+            <div className="status-area">
+              <span className={`status-text ${stage}`}>{stageText[stage]}</span>
+              {stage !== 'complete' && (
+                <span className="dots">
+                  <span>.</span><span>.</span><span>.</span>
+                </span>
+              )}
+            </div>
+          )}
+
+          {/* Progress Indicator */}
+          <div className="progress-track">
+            <div className={`progress-bar stage-${stage}`}></div>
+            <div className="progress-steps">
+              <div className={`step ${stage !== 'idle' ? 'active' : ''}`}></div>
+              <div className={`step ${stage === 'processing' || stage === 'delivering' || stage === 'complete' ? 'active' : ''}`}></div>
+              <div className={`step ${stage === 'delivering' || stage === 'complete' ? 'active' : ''}`}></div>
+              <div className={`step ${stage === 'complete' ? 'active' : ''}`}></div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/dist/styles.css

@@ -0,0 +1,638 @@
+/**
+ * AiCreating - AI Assistant Animation Styles
+ * Friendly, user-focused design showing AI processing requests
+ */
+
+/* ============================================
+   SIZE VARIANTS
+   ============================================ */
+.ai-creating-wrapper {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+
+.ai-creating-wrapper.size-xs .ai-creating-container { height: 100px; }
+.ai-creating-wrapper.size-sm .ai-creating-container { height: 160px; }
+.ai-creating-wrapper.size-md .ai-creating-container { height: 240px; }
+.ai-creating-wrapper.size-lg .ai-creating-container { height: 340px; }
+.ai-creating-wrapper.size-full .ai-creating-container { height: 100%; min-height: 240px; }
+
+/* ============================================
+   CONTAINER
+   ============================================ */
+.ai-creating-container {
+  width: 100%;
+  height: 240px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border-radius: 20px;
+  position: relative;
+  overflow: hidden;
+  transition: all 0.5s ease;
+}
+
+.ai-creating-container.stage-reading {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.ai-creating-container.stage-processing {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+}
+
+.ai-creating-container.stage-delivering {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.ai-creating-container.stage-complete {
+  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+}
+
+.ai-scene {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ============================================
+   BACKGROUND PARTICLES
+   ============================================ */
+.particles {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.particles span {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: rgba(255,255,255,0.3);
+  border-radius: 50%;
+  animation: float 4s ease-in-out infinite;
+}
+
+.particles span:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
+.particles span:nth-child(2) { left: 20%; top: 60%; animation-delay: 0.5s; width: 8px; height: 8px; }
+.particles span:nth-child(3) { left: 70%; top: 30%; animation-delay: 1s; width: 12px; height: 12px; }
+.particles span:nth-child(4) { left: 80%; top: 70%; animation-delay: 1.5s; width: 6px; height: 6px; }
+.particles span:nth-child(5) { left: 50%; top: 10%; animation-delay: 2s; }
+.particles span:nth-child(6) { left: 90%; top: 50%; animation-delay: 2.5s; width: 8px; height: 8px; }
+
+@keyframes float {
+  0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
+  50% { transform: translateY(-20px) scale(1.2); opacity: 0.6; }
+}
+
+/* ============================================
+   AI ROBOT CHARACTER
+   ============================================ */
+.ai-robot {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -60%);
+  transition: all 0.5s ease;
+}
+
+.size-xs .ai-robot { transform: translate(-50%, -60%) scale(0.5); }
+.size-sm .ai-robot { transform: translate(-50%, -60%) scale(0.7); }
+.size-lg .ai-robot { transform: translate(-50%, -60%) scale(1.2); }
+
+.ai-robot.reading { animation: robotBob 1s ease-in-out infinite; }
+.ai-robot.processing { animation: robotWork 0.5s ease-in-out infinite; }
+.ai-robot.delivering { animation: robotHappy 0.8s ease-in-out infinite; }
+.ai-robot.complete { animation: robotCelebrate 0.6s ease-out forwards; }
+
+@keyframes robotBob {
+  0%, 100% { transform: translate(-50%, -60%) rotate(0); }
+  50% { transform: translate(-50%, -63%) rotate(-3deg); }
+}
+
+@keyframes robotWork {
+  0%, 100% { transform: translate(-50%, -60%) scale(1); }
+  50% { transform: translate(-50%, -60%) scale(1.05); }
+}
+
+@keyframes robotHappy {
+  0%, 100% { transform: translate(-50%, -60%); }
+  25% { transform: translate(-50%, -63%) rotate(-5deg); }
+  75% { transform: translate(-50%, -63%) rotate(5deg); }
+}
+
+@keyframes robotCelebrate {
+  0% { transform: translate(-50%, -60%) scale(1); }
+  50% { transform: translate(-50%, -70%) scale(1.15); }
+  100% { transform: translate(-50%, -60%) scale(1); }
+}
+
+/* Robot Head */
+.robot-head {
+  width: 70px;
+  height: 60px;
+  background: linear-gradient(180deg, #e8e8e8, #c0c0c0);
+  border-radius: 15px;
+  position: relative;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+
+.robot-face {
+  position: absolute;
+  inset: 8px;
+  background: #1a1a2e;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+/* Robot Eyes */
+.robot-eyes {
+  display: flex;
+  gap: 12px;
+}
+
+.eye {
+  width: 16px;
+  height: 16px;
+  background: #00d4ff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 10px #00d4ff;
+  animation: eyeGlow 2s ease-in-out infinite;
+}
+
+.ai-robot.processing .eye {
+  background: #ff6b6b;
+  box-shadow: 0 0 10px #ff6b6b;
+}
+
+.ai-robot.complete .eye {
+  background: #51cf66;
+  box-shadow: 0 0 10px #51cf66;
+}
+
+@keyframes eyeGlow {
+  0%, 100% { box-shadow: 0 0 10px currentColor; }
+  50% { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
+}
+
+.pupil {
+  width: 6px;
+  height: 6px;
+  background: #fff;
+  border-radius: 50%;
+  animation: look 3s ease-in-out infinite;
+}
+
+@keyframes look {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-3px); }
+  75% { transform: translateX(3px); }
+}
+
+/* Robot Mouth */
+.robot-mouth {
+  width: 20px;
+  height: 4px;
+  background: #00d4ff;
+  border-radius: 2px;
+  transition: all 0.3s ease;
+}
+
+.ai-robot.processing .robot-mouth {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: transparent;
+  border: 3px solid #ff6b6b;
+  animation: mouthSpin 1s linear infinite;
+}
+
+.ai-robot.complete .robot-mouth {
+  width: 24px;
+  height: 12px;
+  border-radius: 0 0 12px 12px;
+  background: #51cf66;
+}
+
+@keyframes mouthSpin {
+  from { transform: rotate(0); }
+  to { transform: rotate(360deg); }
+}
+
+/* Antenna */
+.antenna {
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 15px;
+  background: #888;
+}
+
+.antenna-ball {
+  position: absolute;
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  background: #ff6b6b;
+  border-radius: 50%;
+  animation: antennaPulse 1s ease-in-out infinite;
+}
+
+.ai-robot.complete .antenna-ball {
+  background: #51cf66;
+}
+
+@keyframes antennaPulse {
+  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 5px currentColor; }
+  50% { transform: translateX(-50%) scale(1.2); box-shadow: 0 0 15px currentColor; }
+}
+
+/* Robot Body */
+.robot-body {
+  width: 50px;
+  height: 35px;
+  background: linear-gradient(180deg, #c0c0c0, #909090);
+  border-radius: 0 0 10px 10px;
+  margin: 0 auto;
+  position: relative;
+  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
+}
+
+.chest-light {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 12px;
+  height: 12px;
+  background: #00d4ff;
+  border-radius: 50%;
+  animation: chestPulse 1.5s ease-in-out infinite;
+}
+
+.ai-robot.processing .chest-light {
+  background: #ff6b6b;
+  animation: chestFast 0.3s ease-in-out infinite;
+}
+
+.ai-robot.complete .chest-light {
+  background: #51cf66;
+}
+
+@keyframes chestPulse {
+  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
+  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
+}
+
+@keyframes chestFast {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+/* ============================================
+   REQUEST CARD
+   ============================================ */
+.request-card {
+  position: absolute;
+  left: 15%;
+  top: 25%;
+  width: 60px;
+  background: white;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
+  animation: cardFloat 0.5s ease-out, cardHover 2s ease-in-out infinite 0.5s;
+}
+
+.size-xs .request-card { width: 40px; padding: 6px; left: 10%; }
+.size-sm .request-card { width: 50px; padding: 8px; }
+.size-lg .request-card { width: 80px; padding: 14px; }
+
+.request-card.processing {
+  animation: cardToRobot 0.8s ease-in-out forwards;
+}
+
+@keyframes cardFloat {
+  from { opacity: 0; transform: translateY(-20px) scale(0.8); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes cardHover {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-5px); }
+}
+
+@keyframes cardToRobot {
+  to { transform: translateX(80px) scale(0.5); opacity: 0; }
+}
+
+.card-icon {
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 6px;
+}
+
+.size-xs .card-icon { font-size: 14px; }
+.size-lg .card-icon { font-size: 26px; }
+
+.card-lines .line {
+  display: block;
+  height: 4px;
+  background: #e0e0e0;
+  border-radius: 2px;
+  margin-bottom: 4px;
+  animation: lineLoad 0.6s ease-out forwards;
+}
+
+.card-lines .line.short { width: 60%; }
+
+@keyframes lineLoad {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+.card-lines .line.short {
+  animation: lineLoadShort 0.6s ease-out forwards;
+}
+
+@keyframes lineLoadShort {
+  from { width: 0; }
+  to { width: 60%; }
+}
+
+/* ============================================
+   PROCESSING VISUAL
+   ============================================ */
+.processing-visual {
+  position: absolute;
+  top: 20%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gear {
+  position: absolute;
+  font-size: 24px;
+  animation: spin 2s linear infinite;
+}
+
+.size-xs .gear { font-size: 16px; }
+.size-lg .gear { font-size: 32px; }
+
+.gear-1 { left: -30px; top: 0; }
+.gear-2 { left: 10px; top: 5px; animation-direction: reverse; font-size: 18px; }
+
+@keyframes spin {
+  from { transform: rotate(0); }
+  to { transform: rotate(360deg); }
+}
+
+.sparkles {
+  position: absolute;
+  top: -20px;
+  left: -20px;
+  width: 80px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.sparkles span {
+  animation: sparkle 0.8s ease-in-out infinite;
+  font-size: 14px;
+}
+
+.sparkles span:nth-child(1) { animation-delay: 0s; }
+.sparkles span:nth-child(2) { animation-delay: 0.2s; }
+.sparkles span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes sparkle {
+  0%, 100% { opacity: 0; transform: scale(0) translateY(0); }
+  50% { opacity: 1; transform: scale(1) translateY(-10px); }
+}
+
+/* ============================================
+   RESULT CARD
+   ============================================ */
+.result-card {
+  position: absolute;
+  right: 15%;
+  top: 25%;
+  width: 70px;
+  background: white;
+  border-radius: 8px;
+  padding: 10px;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
+  animation: resultAppear 0.5s ease-out;
+}
+
+.size-xs .result-card { width: 45px; padding: 6px; right: 10%; }
+.size-sm .result-card { width: 55px; padding: 8px; }
+.size-lg .result-card { width: 90px; padding: 14px; }
+
+.result-card.complete {
+  box-shadow: 0 5px 25px rgba(81, 207, 102, 0.4);
+  animation: resultSuccess 0.5s ease-out;
+}
+
+@keyframes resultAppear {
+  from { opacity: 0; transform: translateX(20px) scale(0.8); }
+  to { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@keyframes resultSuccess {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+}
+
+.result-icon {
+  font-size: 22px;
+  text-align: center;
+  margin-bottom: 6px;
+}
+
+.size-xs .result-icon { font-size: 14px; }
+.size-lg .result-icon { font-size: 28px; }
+
+.result-lines .line {
+  display: block;
+  height: 4px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  border-radius: 2px;
+  margin-bottom: 4px;
+  animation: resultLine 0.4s ease-out forwards;
+  opacity: 0;
+}
+
+.result-lines .line:nth-child(1) { animation-delay: 0.1s; }
+.result-lines .line:nth-child(2) { animation-delay: 0.2s; }
+.result-lines .line:nth-child(3) { animation-delay: 0.3s; }
+
+.result-card.complete .result-lines .line {
+  background: linear-gradient(90deg, #43e97b, #38f9d7);
+}
+
+@keyframes resultLine {
+  from { width: 0; opacity: 0; }
+  to { width: 100%; opacity: 1; }
+}
+
+.result-lines .line.short {
+  animation: resultLineShort 0.4s ease-out forwards;
+}
+
+@keyframes resultLineShort {
+  from { width: 0; opacity: 0; }
+  to { width: 70%; opacity: 1; }
+}
+
+/* ============================================
+   STATUS TEXT
+   ============================================ */
+.status-area {
+  position: absolute;
+  bottom: 45px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.status-text {
+  font-size: 14px;
+  font-weight: 600;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.size-xs .status-text { font-size: 10px; }
+.size-sm .status-text { font-size: 12px; }
+.size-lg .status-text { font-size: 16px; }
+
+.status-text.complete {
+  animation: textPop 0.4s ease-out;
+}
+
+@keyframes textPop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.2); }
+  100% { transform: scale(1); }
+}
+
+.dots {
+  display: flex;
+  margin-left: 2px;
+}
+
+.dots span {
+  animation: dotBlink 1.4s ease-in-out infinite;
+  font-size: inherit;
+  color: white;
+}
+
+.dots span:nth-child(1) { animation-delay: 0s; }
+.dots span:nth-child(2) { animation-delay: 0.2s; }
+.dots span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes dotBlink {
+  0%, 60%, 100% { opacity: 0; }
+  30% { opacity: 1; }
+}
+
+/* ============================================
+   PROGRESS TRACK
+   ============================================ */
+.progress-track {
+  position: absolute;
+  bottom: 15px;
+  left: 20px;
+  right: 20px;
+  height: 6px;
+  background: rgba(255,255,255,0.2);
+  border-radius: 3px;
+  overflow: visible;
+}
+
+.size-xs .progress-track { bottom: 10px; left: 10px; right: 10px; height: 4px; }
+.size-lg .progress-track { bottom: 20px; height: 8px; }
+
+.progress-bar {
+  height: 100%;
+  background: white;
+  border-radius: 3px;
+  transition: width 0.5s ease;
+  box-shadow: 0 0 10px rgba(255,255,255,0.5);
+}
+
+.progress-bar.stage-idle { width: 0; }
+.progress-bar.stage-reading { width: 25%; animation: progressPulse 1s ease-in-out infinite; }
+.progress-bar.stage-processing { width: 50%; animation: progressPulse 0.5s ease-in-out infinite; }
+.progress-bar.stage-delivering { width: 75%; animation: progressPulse 1s ease-in-out infinite; }
+.progress-bar.stage-complete { width: 100%; animation: none; }
+
+@keyframes progressPulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.progress-steps {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  transform: translateY(-50%);
+  display: flex;
+  justify-content: space-between;
+  padding: 0 2px;
+}
+
+.step {
+  width: 10px;
+  height: 10px;
+  background: rgba(255,255,255,0.3);
+  border-radius: 50%;
+  transition: all 0.3s ease;
+}
+
+.size-xs .step { width: 6px; height: 6px; }
+.size-lg .step { width: 12px; height: 12px; }
+
+.step.active {
+  background: white;
+  box-shadow: 0 0 10px white;
+  transform: scale(1.2);
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 640px) {
+  .request-card { left: 8%; }
+  .result-card { right: 8%; }
+  .status-text { font-size: 12px; }
+}
+
+/* ============================================
+   ACCESSIBILITY
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "ai-react-animations",
+  "version": "1.0.0",
+  "description": "Beautiful AI loading animation components for React/Next.js. Shows AI processing states with friendly robot character.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "build:lib": "node scripts/build.js",
+    "prepublishOnly": "npm run build:lib"
+  },
+  "keywords": [
+    "react",
+    "nextjs",
+    "animation",
+    "ai",
+    "loading",
+    "spinner",
+    "typescript",
+    "components"
+  ],
+  "author": "johnbekele",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/johnbekele/ai-react-animations"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3",
+    "tailwindcss": "^3.4.1",
+    "postcss": "^8.4.33",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "^14.2.0",
+    "next": "^14.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  }
+}