🎬 Agent Animate

AI-powered cinematic animations from workflow transcripts

Transform automation tutorials into stunning visualizations with Jony Ive precision and Hans Zimmer timing.

✨ 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

# Install globally
npm install -g agent-animate

# Or use with npx
npx agent-animate --help

Basic CLI Usage

# 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

# 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:

   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