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

• 🎯 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

# Using npm
npm install @ai-animator/react

# Using yarn
yarn add @ai-animator/react

# Using pnpm
pnpm add @ai-animator/react

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

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

👉 Try it online (StackBlitz)

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)
}

// 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>

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>
  );
}

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>
      )}
    </>
  );
}

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

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

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

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

MIT License - see LICENSE file for details

Give a ⭐️ if this project helped you!

• Documentation
• Issue Tracker
• Discussions
• npm Package

Made with ❤️ by edenxpzhang