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.

✨ 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

• Start the server:

  cd web
  python3 -m http.server 8000
  

• Open browser: http://localhost:8000

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

• Open transcript interface: http://localhost:8000/transcript.html

• Paste video transcript describing workflows or automation processes

• Select parser mode:

  • Workflow/Automation: For automation platforms (Zapier, n8n, AppMixer)
  • System Architecture: For technical system descriptions
  • Smart Detection: Automatically detects the best parser

• 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

• Scene Introduction (15%)

  • Animated title and subtitle
  • System overview text

• Client Layer (20%)

  • Reveal user-facing applications
  • Highlight client components

• API Layer (20%)

  • Show API gateways and load balancers
  • Animate client → API connections

• Service Layer (20%)

  • Display business logic services
  • Connect APIs to services

• Complete System (25%)

  • Show full architecture
  • Activate data flow animations

Workflow Automation Flow 🎬 NEW!

• Workflow Introduction (20%)

  • Extract title from transcript
  • Show automation overview

• Platform Layer (20%)

  • Reveal automation platform (Zapier, n8n, etc.)
  • Highlight workflow designer

• Service Integrations (25%)

  • Show connected services (Gmail, Notion, Slack)
  • Color-coded by service type

• 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

• Enhanced Animation Quality

  • More sophisticated easing curves
  • Better component entrance effects
  • Improved connection drawing animations

• Smarter Parsing

  • Better entity recognition
  • More relationship patterns
  • Custom architecture templates

• Visual Variety

  • More component types (CDN, monitoring, etc.)
  • Custom icons and visual indicators
  • Color coding for different services

Medium Priority

• Data Flow Animations

  • Realistic packet movement
  • Different flow types (HTTP, WebSocket, etc.)
  • Error states and retries

• Export Features

  • Video export (MP4/WebM)
  • GIF generation
  • High-resolution renders

Future Enhancements

• Embed System

  • Shareable animation URLs
  • Customizable embed sizes
  • Social media integration

• Advanced Features

  • Custom component library
  • Animation speed controls
  • Voice narration sync