agent-animate

# 🎬 Agent Animate **AI-powered cinematic animations from workflow transcripts** Transform automation tutorials into stunning visualizations with Jony Ive precision and Hans Zimmer timing. [![npm version](https://badge.fury.io/js/agent-animate.svg)](https://badge.fury.io/js/agent-animate) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) ## ✨ Features - **🤖 AI-Powered**: Uses OpenAI's advanced models to understand and visualize workflows - **🎯 Zero Overlaps**: Physics-based layout algorithms ensure perfect component positioning - **👤 Human-in-the-Loop**: Quality assurance with human review at critical phases - **🎨 Cinematic Quality**: Jony Ive design principles + Hans Zimmer timing structure - **⚡ Developer-First**: Production-ready CLI with modern tooling - **🔧 Highly Configurable**: Flexible templates and configuration system ## 🚀 Quick Start ### CLI Installation ```bash # Install globally npm install -g agent-animate # Or use with npx npx agent-animate --help ``` ### Basic CLI Usage ```bash # Create a new project agent-animate create my-animation-project # Configure your OpenAI API key agent-animate config # Generate animation from transcript agent-animate generate --input transcript.txt --output animation.html # Start development server agent-animate serve --open ``` ### Web Development ```bash # Start local development server cd web python3 -m http.server 8000 # Open http://localhost:8000 ``` ## 🎯 Vision Create smooth, professional animations that explain systems architecture and business logic with the precision of Jony Ive and the timing of Hans Zimmer. ## ✅ Current Features ### Core Animation System - **GSAP-powered animations** with smooth easing curves - **SVG-based components** for crisp, scalable graphics - **Responsive layout** that adapts to different screen sizes - **Dark developer theme** with monospace fonts ### Component System - **Auto-detection** of component types (clients, APIs, services, databases) - **Smart positioning** using tier-based layout - **Visual indicators** with type labels and status dots - **Connection paths** with curved lines and arrows ### Timeline Controls - **Play/Pause/Restart** with visual feedback - **Progress tracking** with time display - **Scene navigation** between animation phases - **Duration controls** (10s, 15s, 20s, 30s) ### Architecture Parser - **Natural language parsing** of technical descriptions - **Pattern matching** for component identification - **Relationship detection** between services - **Default architectures** for common patterns ## 🏗️ Project Structure ``` web/ ├── index.html # Main application interface ├── debug.html # Debugging/testing interface ├── test.html # Component visibility testing ├── src/ │ ├── AgentAnimate.js # Main orchestrator class │ ├── parsers/ │ │ └── ArchitectureParser.js # Natural language → architecture │ ├── components/ │ │ ├── Component.js # SVG component creation/animation │ │ ├── Connection.js # Connection lines between components │ │ └── DataPacket.js # Animated data flow particles │ ├── animations/ │ │ ├── CinematicTimeline.js # GSAP timeline orchestration │ │ └── SceneManager.js # Scene creation and management │ └── utils/ │ └── ResponsiveManager.js # Layout and responsive handling └── README.md # This file ``` ## 🚀 Usage ### Architecture Visualizations 1. **Start the server:** ```bash cd web python3 -m http.server 8000 ``` 2. **Open browser:** http://localhost:8000 3. **Enter a prompt:** - "oauth authentication with jwt tokens and session management" - "microservices with API gateway and message queue" - "e-commerce system with payment processing" ### Video Transcript Visualizations 🎬 NEW! 1. **Open transcript interface:** http://localhost:8000/transcript.html 2. **Paste video transcript** describing workflows or automation processes 3. **Select parser mode:** - **Workflow/Automation**: For automation platforms (Zapier, n8n, AppMixer) - **System Architecture**: For technical system descriptions - **Smart Detection**: Automatically detects the best parser 4. **Examples that work well:** - AppMixer/Zapier/n8n tutorial transcripts - Workflow automation demos - Integration setup walkthroughs - API connection tutorials ### Controls - Space bar: Play/Pause - R key: Restart - Ctrl+Enter: Generate from transcript - Timeline controls: Navigate scenes ## 🎬 Animation Flows ### System Architecture Flow 1. **Scene Introduction** (15%) - Animated title and subtitle - System overview text 2. **Client Layer** (20%) - Reveal user-facing applications - Highlight client components 3. **API Layer** (20%) - Show API gateways and load balancers - Animate client → API connections 4. **Service Layer** (20%) - Display business logic services - Connect APIs to services 5. **Complete System** (25%) - Show full architecture - Activate data flow animations ### Workflow Automation Flow 🎬 NEW! 1. **Workflow Introduction** (20%) - Extract title from transcript - Show automation overview 2. **Platform Layer** (20%) - Reveal automation platform (Zapier, n8n, etc.) - Highlight workflow designer 3. **Service Integrations** (25%) - Show connected services (Gmail, Notion, Slack) - Color-coded by service type 4. **Data Flow** (35%) - Animate workflow execution - Show trigger → action flow - Demonstrate data mapping ## 🎨 Design Principles ### Visual Style - **Monospace fonts** for technical authenticity - **Black background** with white text/borders - **Minimal, clean aesthetics** focused on clarity - **Smooth transitions** with professional easing ### Animation Timing - **Cinematic pacing** with proper scene holds - **Staggered reveals** to guide viewer attention - **Bounce effects** for satisfying feedback - **Smooth curves** using cubic-bezier timing ### User Experience - **Immediate feedback** from all interactions - **Keyboard shortcuts** for power users - **Responsive design** for all screen sizes - **Clear visual hierarchy** in components ## 🛠️ Technical Details ### Dependencies - **GSAP 3.12.2** - Animation engine - **MotionPathPlugin** - Data packet animations - **Modern browser** with SVG support ### Performance - **60 FPS animations** with hardware acceleration - **Efficient SVG rendering** for crisp graphics - **Smart component batching** to minimize DOM operations - **Responsive viewBox** scaling for all devices ### Browser Support - Chrome/Edge 88+ - Firefox 85+ - Safari 14+ ## 🔧 Development Notes ### Key Classes - `AgentAnimate`: Main application controller - `ArchitectureParser`: Converts prompts to architecture data - `Component`: SVG component creation and animation - `CinematicTimeline`: GSAP timeline orchestration - `ResponsiveManager`: Layout and positioning ### Animation Strategy - Components start hidden (`opacity: 0, scale: 0.3`) - Timeline reveals them in logical groups - Connections animate after components are visible - Data packets flow along connection paths ### Debugging - Console logging for all major operations - Visual debugging in `debug.html` and `test.html` - Component position and connection path verification ## 📈 Next Improvements ### High Priority 1. **Enhanced Animation Quality** - More sophisticated easing curves - Better component entrance effects - Improved connection drawing animations 2. **Smarter Parsing** - Better entity recognition - More relationship patterns - Custom architecture templates 3. **Visual Variety** - More component types (CDN, monitoring, etc.) - Custom icons and visual indicators - Color coding for different services ### Medium Priority 4. **Data Flow Animations** - Realistic packet movement - Different flow types (HTTP, WebSocket, etc.) - Error states and retries 5. **Export Features** - Video export (MP4/WebM) - GIF generation - High-resolution renders ### Future Enhancements 6. **Embed System** - Shareable animation URLs - Customizable embed sizes - Social media integration 7. **Advanced Features** - Custom component library - Animation speed controls - Voice narration sync