🎨 AI Animator

🚀 Lightweight React animation library - Create stunning animations with simple configs. AI-powered generation coming soon!

✨ Features

• 🎯 Zero Config - Sensible defaults, works out of the box
• 🚀 Lightweight - Only 7.5KB gzipped
• 🎨 10+ Presets - Ready-to-use animation presets
• 🔧 TypeScript - Full type support with generated declarations
• ⚛️ React 18+ - Hooks-based modern API
• 🤖 AI Ready (Phase 2) - Natural language → AnimationConfig

🚀 Quick Start

Installation

# Using npm
npm install @edenxpzhang/ai-animator-react

# Using yarn
yarn add @edenxpzhang/ai-animator-react

# Using pnpm
pnpm add @edenxpzhang/ai-animator-react

Basic Usage

import { Animator, AnimatorPresets } from '@edenxpzhang/ai-animator-react';

function App() {
  return (
    <Animator config={AnimatorPresets.fadeIn()}>
      <div className="card">
        Hello, AI Animator!
      </div>
    </Animator>
  );
}

Live Demo

👉 Try it online (StackBlitz)

🎨 Animation Presets

| Preset | Description | Example | |--------|-------------|---------| | fadeIn() | Fade in | opacity: 0 → 1 | | fadeOut() | Fade out | opacity: 1 → 0 | | slideInLeft() | Slide in from left | translateX(-100%) → 0 | | slideInRight() | Slide in from right | translateX(100%) → 0 | | slideInUp() | Slide in from top | translateY(-100%) → 0 | | slideInDown() | Slide in from bottom | translateY(100%) → 0 | | bounce() | Bounce effect | Spring-like animation | | pulse() | Pulse effect | Scale oscillation | | zoomIn() | Zoom in | scale(0) → scale(1) | | zoomOut() | Zoom out | scale(1) → scale(0) |

📖 API Reference

<Animator> Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | config | AnimationConfig | required | Animation configuration object | | children | ReactNode | required | Element to animate | | className | string | '' | Additional CSS class | | style | CSSProperties | {} | Additional inline style |

AnimationConfig

interface AnimationConfig {
  type: 'fade' | 'slide' | 'scale' | 'rotate' | 'bounce' | 'pulse';
  direction?: 'left' | 'right' | 'up' | 'down';  // for slide type
  duration?: number;    // ms, default: 500
  delay?: number;      // ms, default: 0
  easing?: string;     // CSS easing, default: 'ease'
  repeat?: number;     // times, default: 1 (0 = infinite)
}

Presets with Custom Options

// All presets accept optional config overrides
<Animator config={AnimatorPresets.fadeIn({ duration: 1000, delay: 200 })}>
  <div>Slow fade in</div>
</Animator>

<Animator config={AnimatorPresets.slideInLeft({ duration: 800, repeat: 2 })}>
  <div>Slide with repeat</div>
</Animator>

🎯 Advanced Usage

Staggered Animations

function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];
  
  return (
    <div>
      {items.map((item, index) => (
        <Animator 
          key={item} 
          config={AnimatorPresets.fadeIn({ delay: index * 100 })}
        >
          <div className="item">{item}</div>
        </Animator>
      ))}
    </div>
  );
}

Conditional Animation

function App() {
  const [visible, setVisible] = useState(false);
  
  return (
    <>
      <button onClick={() => setVisible(!visible)}>Toggle</button>
      
      {visible && (
        <Animator config={AnimatorPresets.zoomIn()}>
          <div>Now you see me!</div>
        </Animator>
      )}
    </>
  );
}

🗺️ Roadmap

✅ Phase 1: MVP (Current)

• [x] Core rendering engine
• [x] CSS animation renderer
• [x] React component wrapper
• [x] 10+ animation presets
• [x] TypeScript support
• [x] npm package publish

🤖 Phase 2: AI Integration

• [ ] OpenAI API integration
• [ ] Natural language → AnimationConfig
• [ ] Real-time preview editor
• [ ] Animation code generator

🌐 Phase 3: Ecosystem

• [ ] Canvas/WebGL renderers for complex animations
• [ ] Figma plugin
• [ ] CLI tool for animation export
• [ ] Vue components
• [ ] Community template marketplace

🤝 Contributing

Contributions are welcome! Please feel free to submit a PR.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

MIT License - see LICENSE file for details

⭐ Show Your Support

Give a ⭐️ if this project helped you!

🔗 Links

• Documentation
• Issue Tracker
• Discussions
• npm Package

Made with ❤️ by edenxpzhang