82ndrop

Instantly transform your ideas into intelligent layered video composition templates using a secure, multi-agent AI system built with Google's ADK.

Comment

82ndrop: From Idea to Production-Ready AI Video Composition System

💡 Inspiration

The inspiration came from watching content creators struggle with planning complex video compositions before filming. We realized that creators often have great ideas but lack a systematic way to plan how multiple video elements - text overlays, main content, captions, and graphics - should be layered together. Traditional video editing requires extensive planning, and creators either spend hours sketching layouts or dive in without a clear structure, leading to inconsistent results.

📚 What We Learned

Building with Google's Agent Development Kit taught us the power of specialized AI collaboration. Instead of using a single AI model, we discovered that dedicated agents working together produce sophisticated composition templates:

  • Task Master Agent - orchestrates the entire workflow seamlessly
  • Guide Agent - analyzes ideas and identifies visual structure needs
  • Search Agent - enriches concepts with trending formats and current topics
  • Prompt Writer Agent - creates intelligent layered composition templates with positioning, timing, and styling

We also learned that mobile-first design is critical - content creators need to plan compositions on-the-go, so we solved complex iOS Safari compatibility issues and built a chat interface optimized for touch interactions.

🔧 How We Built It

  • Multi-Agent Architecture: Google ADK coordinating 4 specialized agents
  • Frontend: Angular 19 with responsive chat interface and copy-to-clipboard functionality
  • Backend: FastAPI with intelligent composition generation and Firebase authentication
  • Output Format: Structured JSON templates with layer management, z-index stacking, and positioning
  • Deployment: Google Cloud Run for auto-scaling backend, Firebase Hosting for frontend

The biggest innovation was developing intelligent layer composition algorithms that automatically determine optimal layer counts (2-5 layers), positioning strategies (top_third, center_main, bottom_third), and visual styling recommendations.

🚧 Challenges We Faced

  1. Composition Intelligence: Creating AI that understands spatial relationships and layer hierarchy in video compositions
  2. JSON Structure Design: Developing a comprehensive format that captures layer types, positioning, timing, and visual styling
  3. Mobile UX Optimization: Ensuring complex JSON outputs remain readable and copyable on mobile devices
  4. Agent Coordination: Synchronizing multiple AI agents to produce cohesive composition templates rather than disconnected suggestions
  5. Copy Functionality: Implementing reliable text selection and clipboard access across iOS/Android browsers

⭐ What Makes It Unique

Unlike traditional prompt generators that provide simple text descriptions, 82ndrop creates intelligent composition blueprints that specify:

  • Layer count recommendations (2-5 layers based on complexity)
  • Precise positioning (top_third, center_main, bottom_third, floating_overlay)
  • Layer types (main_content, text_overlay, caption_layer, graphic_overlay)
  • Timing coordination (full_video, first_10_seconds, last_5_seconds)
  • Z-index stacking for proper layer ordering
  • Visual styling recommendations for each layer

🚀 What's Next

  • Immediate: Integration with popular video editing workflows and template expansion
  • Short-term: Advanced composition patterns for different content types (educational, marketing, social media)
  • Long-term: Real-time preview generation and direct export to video editing software

🌐 Live Demo: https://82ndrop.web.app
✅ Status: Production-ready with comprehensive testing suite and Google Cloud deployment
🎯 Innovation: First AI system to generate structured video composition templates with intelligent layer management

🏆 Technical Achievement

Built a complete composition intelligence system that bridges the gap between having a video idea and creating the actual layered structure - solving a fundamental problem in content creation workflow that no existing tool addresses.

Built With

  • and-development-tools-used-in-the-82ndrop-project
  • angular.js
  • cloud-services
  • cloudlogging
  • databases
  • fastapi
  • firebase
  • firebaseanalytics
  • firebaseauthentication
  • firebasefunctions
  • firebasehosting
  • firestore
  • frameworks
  • gemini2.0flash
  • git
  • github
  • googleadk
  • googlecloudrun
  • googlesearchapi
  • html5
  • javascript
  • jwt
  • mobilefirstdesign
  • node.js
  • npm
  • oauth2.0
  • platforms
  • progressivewebapp
  • python
  • responsivedesign
  • restfulapis
  • scss
  • typescript
  • vertexai
Share this project:

Updates

Submission history