{"_id":"@eden_zxpzhang/ai-animator-react","name":"@eden_zxpzhang/ai-animator-react","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@eden_zxpzhang/ai-animator-react","version":"0.1.0","description":"🎨 Lightweight React animation library with 10+ presets","type":"module","main":"dist/index.js","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"dev":"vite build --watch","build":"vite build && tsc --emitDeclarationOnly","preview":"vite preview"},"keywords":["animation","react","ai","component"],"author":{"name":"edenxpzhang"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"react":"^18.2.0","react-dom":"^18.2.0","@types/react":"^18.0.0","@types/react-dom":"^18.0.0","typescript":"^5.0.0","vite":"^4.3.0","@vitejs/plugin-react":"^4.0.0"},"_id":"@eden_zxpzhang/ai-animator-react@0.1.0","gitHead":"8ca37b039bc550c873313c376895c805ad950d15","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-oa9xLhyNaqEh5cmOWvvyjr9pfw+H0b5j7QT5KphKxQ5nOeoJ4oPDHU75srRyNf8bRONhOJ+uPNqbQ9V7G3Zq3w==","shasum":"34fdcde9dcdd352a1853ce65893b2dcf352cbe88","tarball":"https://registry.npmjs.org/@eden_zxpzhang/ai-animator-react/-/ai-animator-react-0.1.0.tgz","fileCount":9,"unpackedSize":52177,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFgIIP2wTr6yY+HT58KtPGwIg43wLixvfGAc6u4LsQ8QAiEAntbpxcRe/x/e6Ow6AcYxf/brMF0ucaeQrsC0dr9TmGA="}]},"_npmUser":{"name":"eden_zxpzhang","email":"1405051717@qq.com"},"directories":{},"maintainers":[{"name":"eden_zxpzhang","email":"1405051717@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ai-animator-react_0.1.0_1778581598716_0.22767016175244703"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-12T10:26:38.580Z","0.1.0":"2026-05-12T10:26:38.894Z","modified":"2026-05-12T10:26:39.186Z"},"maintainers":[{"name":"eden_zxpzhang","email":"1405051717@qq.com"}],"description":"🎨 Lightweight React animation library with 10+ presets","keywords":["animation","react","ai","component"],"author":{"name":"edenxpzhang"},"license":"MIT","readme":"# 🎨 AI Animator\r\n\r\n[![npm version](https://badge.fury.io/js/%40edenxpzhang%2Fai-animator-react.svg)](https://www.npmjs.com/package/@edenxpzhang/ai-animator-react)\r\n[![GitHub stars](https://img.shields.io/github/stars/edenxpzhang/ai-animator?style=social)](https://github.com/edenxpzhang/ai-animator)\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r\n[![Build Status](https://img.shields.io/github/actions/workflow/status/edenxpzhang/ai-animator/build.yml?label=build)](https://github.com/edenxpzhang/ai-animator/actions)\r\n[![npm downloads](https://img.shields.io/npm/dm/@edenxpzhang/ai-animator-react?label=npm%20downloads)](https://www.npmjs.com/package/@edenxpzhang/ai-animator-react)\r\n\r\n**🚀 Lightweight React animation library** - Create stunning animations with simple configs. AI-powered generation coming soon!\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n- 🎯 **Zero Config** - Sensible defaults, works out of the box\r\n- 🚀 **Lightweight** - Only 7.5KB gzipped\r\n- 🎨 **10+ Presets** - Ready-to-use animation presets\r\n- 🔧 **TypeScript** - Full type support with generated declarations\r\n- ⚛️ **React 18+** - Hooks-based modern API\r\n- 🤖 **AI Ready** (Phase 2) - Natural language → AnimationConfig\r\n\r\n---\r\n\r\n## 🚀 Quick Start\r\n\r\n### Installation\r\n\r\n```bash\r\n# Using npm\r\nnpm install @edenxpzhang/ai-animator-react\r\n\r\n# Using yarn\r\nyarn add @edenxpzhang/ai-animator-react\r\n\r\n# Using pnpm\r\npnpm add @edenxpzhang/ai-animator-react\r\n```\r\n\r\n### Basic Usage\r\n\r\n```tsx\r\nimport { Animator, AnimatorPresets } from '@edenxpzhang/ai-animator-react';\r\n\r\nfunction App() {\r\n  return (\r\n    <Animator config={AnimatorPresets.fadeIn()}>\r\n      <div className=\"card\">\r\n        Hello, AI Animator!\r\n      </div>\r\n    </Animator>\r\n  );\r\n}\r\n```\r\n\r\n### Live Demo\r\n\r\n👉 **[Try it online](https://stackblitz.com/edit/ai-animator-demo)** (StackBlitz)\r\n\r\n---\r\n\r\n## 🎨 Animation Presets\r\n\r\n| Preset | Description | Example |\r\n|--------|-------------|---------|\r\n| `fadeIn()` | Fade in | `opacity: 0 → 1` |\r\n| `fadeOut()` | Fade out | `opacity: 1 → 0` |\r\n| `slideInLeft()` | Slide in from left | `translateX(-100%) → 0` |\r\n| `slideInRight()` | Slide in from right | `translateX(100%) → 0` |\r\n| `slideInUp()` | Slide in from top | `translateY(-100%) → 0` |\r\n| `slideInDown()` | Slide in from bottom | `translateY(100%) → 0` |\r\n| `bounce()` | Bounce effect | Spring-like animation |\r\n| `pulse()` | Pulse effect | Scale oscillation |\r\n| `zoomIn()` | Zoom in | `scale(0) → scale(1)` |\r\n| `zoomOut()` | Zoom out | `scale(1) → scale(0)` |\r\n\r\n---\r\n\r\n## 📖 API Reference\r\n\r\n### `<Animator>` Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `config` | `AnimationConfig` | required | Animation configuration object |\r\n| `children` | `ReactNode` | required | Element to animate |\r\n| `className` | `string` | `''` | Additional CSS class |\r\n| `style` | `CSSProperties` | `{}` | Additional inline style |\r\n\r\n### `AnimationConfig`\r\n\r\n```typescript\r\ninterface AnimationConfig {\r\n  type: 'fade' | 'slide' | 'scale' | 'rotate' | 'bounce' | 'pulse';\r\n  direction?: 'left' | 'right' | 'up' | 'down';  // for slide type\r\n  duration?: number;    // ms, default: 500\r\n  delay?: number;      // ms, default: 0\r\n  easing?: string;     // CSS easing, default: 'ease'\r\n  repeat?: number;     // times, default: 1 (0 = infinite)\r\n}\r\n```\r\n\r\n### Presets with Custom Options\r\n\r\n```tsx\r\n// All presets accept optional config overrides\r\n<Animator config={AnimatorPresets.fadeIn({ duration: 1000, delay: 200 })}>\r\n  <div>Slow fade in</div>\r\n</Animator>\r\n\r\n<Animator config={AnimatorPresets.slideInLeft({ duration: 800, repeat: 2 })}>\r\n  <div>Slide with repeat</div>\r\n</Animator>\r\n```\r\n\r\n---\r\n\r\n## 🎯 Advanced Usage\r\n\r\n### Staggered Animations\r\n\r\n```tsx\r\nfunction App() {\r\n  const items = ['Item 1', 'Item 2', 'Item 3'];\r\n  \r\n  return (\r\n    <div>\r\n      {items.map((item, index) => (\r\n        <Animator \r\n          key={item} \r\n          config={AnimatorPresets.fadeIn({ delay: index * 100 })}\r\n        >\r\n          <div className=\"item\">{item}</div>\r\n        </Animator>\r\n      ))}\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### Conditional Animation\r\n\r\n```tsx\r\nfunction App() {\r\n  const [visible, setVisible] = useState(false);\r\n  \r\n  return (\r\n    <>\r\n      <button onClick={() => setVisible(!visible)}>Toggle</button>\r\n      \r\n      {visible && (\r\n        <Animator config={AnimatorPresets.zoomIn()}>\r\n          <div>Now you see me!</div>\r\n        </Animator>\r\n      )}\r\n    </>\r\n  );\r\n}\r\n```\r\n\r\n---\r\n\r\n## 🗺️ Roadmap\r\n\r\n### ✅ Phase 1: MVP (Current)\r\n- [x] Core rendering engine\r\n- [x] CSS animation renderer\r\n- [x] React component wrapper\r\n- [x] 10+ animation presets\r\n- [x] TypeScript support\r\n- [x] npm package publish\r\n\r\n### 🤖 Phase 2: AI Integration\r\n- [ ] OpenAI API integration\r\n- [ ] Natural language → AnimationConfig\r\n- [ ] Real-time preview editor\r\n- [ ] Animation code generator\r\n\r\n### 🌐 Phase 3: Ecosystem\r\n- [ ] Canvas/WebGL renderers for complex animations\r\n- [ ] Figma plugin\r\n- [ ] CLI tool for animation export\r\n- [ ] Vue components\r\n- [ ] Community template marketplace\r\n\r\n---\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! Please feel free to submit a PR.\r\n\r\n1. Fork the repository\r\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\r\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\r\n4. Push to the branch (`git push origin feature/amazing-feature`)\r\n5. Open a Pull Request\r\n\r\n---\r\n\r\n## 📄 License\r\n\r\n[MIT License](LICENSE) - see LICENSE file for details\r\n\r\n---\r\n\r\n## ⭐ Show Your Support\r\n\r\nGive a ⭐️ if this project helped you!\r\n\r\n---\r\n\r\n## 🔗 Links\r\n\r\n- [Documentation](https://github.com/edenxpzhang/ai-animator/wiki)\r\n- [Issue Tracker](https://github.com/edenxpzhang/ai-animator/issues)\r\n- [Discussions](https://github.com/edenxpzhang/ai-animator/discussions)\r\n- [npm Package](https://www.npmjs.com/package/@edenxpzhang/ai-animator-react)\r\n\r\n---\r\n\r\n**Made with ❤️ by [edenxpzhang](https://github.com/edenxpzhang)**\r\n","readmeFilename":"README.md","_rev":"1-dad5e36413c9813ffafd15f4d46e7e6c"}