SuperStoryboard
AI-Powered Storyboard Platform with Real-time Figma Sync
🏆 2nd Place Winner at Supabase Hackathon 2025!
Write-up: rustman.org/projects/project-superstoryboard
Built for Supabase Hackathon 2025 - A full-stack platform for creating professional video storyboards using AI-powered scene generation with real-time synchronization to Figma.
🎥 Demo Video
Watch Demo on YouTube →
See SuperStoryboard in action - AI-powered storyboard generation with real-time Figma sync!
👨💻 Developer
Rustam Salavatov - CTO at SuperDuperAI
10+ years building AI systems | Multi-agent orchestration | Generative AI (video, image, voice) | Full-stack development
🌐 Live Demo
AI Chat Dashboard - Interactive AI chat interface powered by Google Gemini Nano and Veo 3 models
Try the live demo to see real-time storyboard generation with AI-powered scene creation!
🎨 Figma Community Template
AI Storyboard with Google Nana Banana and VEO 3.1
Get the Figma template and start creating your own AI-powered storyboards!
🎯 What is SuperStoryboard?
Transform natural language into professional video storyboards with AI-powered scene generation and real-time Figma collaboration.
Inspiration: SuperDuperAI's multi-agent video production platform.
✨ Features
Currently Implemented
✅ Figma Plugin with Real-time Sync (/figma-plugin)
- WebSocket-based real-time sync with Supabase Realtime
- Automatic scene CREATE/UPDATE/DELETE
- Hybrid architecture workaround for QuickJS limitations
- FigJam and Figma support
- 37kb plugin with AI image generation
- Selection tracking and image editing
✅ AI Generation Backend (/supabase)
- Instant queue processing via Database Webhooks (< 1 second trigger)
- Queue-based image generation with Google Gemini (gemini-2.5-flash-image-preview)
- Queue-based video generation with Google Veo 3.1 Fast (8-second videos, 720p/1080p)
- Smart model fallback: VEO 3.1 Fast → VEO 3.0 Fast → VEO 2.0
- 4 generation modes: text-to-image/video, image-to-image/video
- Entity linking for scenes and characters
- PGMQ (Postgres Message Queue) for async job processing
- Edge Functions for serverless compute
- Supabase Storage for generated assets
- Complete API documentation and deployment guide
Coming Soon
🚧 Web Application
- AI-powered scene generation from natural language
- Character consistency across scenes
- Style presets (Cinematic, Anime, Comic Book, etc.)
- Storyboard export for different platforms (YouTube, TikTok, Instagram)
🏗️ Architecture
SuperStoryboard Platform
├─ Web App (coming soon) → Create & edit storyboards
├─ Figma Plugin ✅ → Real-time canvas sync
└─ Supabase Backend ✅ → Database, Realtime, AI Generation
├─ PGMQ Queues ✅ → image_generation_queue, video_generation_queue
├─ Edge Functions ✅ → process-image-generation, process-video-generation
├─ Google Gemini ✅ → Image generation (PNG, text-to-image, image-to-image)
└─ Google Veo 3.1 ✅ → Video generation (MP4, 4-8s, 720p/1080p, with audio)
Tech Stack:
- Frontend: React 19, TypeScript, Vite
- Backend: Supabase (Postgres + Realtime + Edge Functions + Storage)
- AI Generation: Google Gemini (images), Google Veo 3.1 Fast (videos)
- Queue System: PGMQ (Postgres Message Queue)
- Figma Plugin: esbuild, QuickJS-compatible architecture
- Real-time: Supabase Realtime (Phoenix Channels WebSocket protocol)
Key Innovation: Hybrid architecture bypasses QuickJS limitations - UI handles network operations, plugin manages canvas.
🚀 Quick Start
Figma Plugin
cd figma-plugin
npm install
# Configure environment variables
cp .env.example .env
# Edit .env with your Supabase credentials
# Build plugin
npm run plugin:build && npm run ui:build
Then import figma-plugin/manifest.json in Figma Desktop App:
Menu → Plugins → Development → Import plugin from manifest...
Environment Variables Required:
VITE_SUPABASE_PROJECT_ID - Your Supabase project IDVITE_SUPABASE_ANON_KEY - Your Supabase anon (public) keyVITE_DEFAULT_STORYBOARD_ID - Default storyboard ID for testing
See figma-plugin/README.md for detailed setup instructions.
Test It
- Open plugin → Sync Storyboard
- Change data in Supabase (Dashboard or REST API)
- Watch instant updates in Figma
📖 Documentation
🛠️ Project Structure
superstoryboard/
├── figma-plugin/ # Figma plugin with real-time sync ✅
│ ├── plugin/ # Plugin backend (QuickJS)
│ ├── ui/ # React UI (browser)
│ └── README.md
├── supabase/ # Backend infrastructure ✅
│ ├── functions/ # Edge Functions (image/video generation)
│ ├── migrations/ # Database migrations
│ └── README.md # Complete technical documentation
├── web-app/ # Web application (coming soon)
├── docs/ # Documentation
├── CLAUDE.md # Project guidelines
└── .mcp.json # MCP server config (Supabase)
🎓 Technical Highlights
Figma QuickJS Workaround
QuickJS lacks WebSocket API and fetch with headers → Hybrid architecture: UI handles network, plugin manages canvas via postMessage
Supabase Realtime
Phoenix Channels with 30s heartbeat, object-based messages, scene diffing for change detection
📝 License
MIT © Rustam Salavatov
🙏 Acknowledgments
Special thanks to:
- Supabase - For organizing the amazing Hackathon 2025 and providing an incredible platform with Realtime, Edge Functions, and Storage that made this project possible
- Figma - For the powerful plugin API and design tools that enable seamless collaboration
- All Hackathon Participants - For the inspiring projects, feedback, and community spirit during the event
- Google AI - For Gemini and Veo 3.1 models that power the AI generation
- figma-plugin-boilerplate by @gnchrv - For the excellent plugin foundation
- SuperDuperAI - For platform inspiration
🏆 2nd Place Winner - Supabase Hackathon 2025 🚀
