This is not an officially supported Google product. This project is not eligible for the Google Open Source Software Vulnerability Rewards Program.
An AI-powered video storyboard generation platform that transforms text descriptions into complete video narratives using Google's generative AI models. Create cinematic scenes, generate voiceovers, compose music, and export professional videos with a modern web interface.
StoryCraft leverages Google's Imagen 4.0 for image generation, Veo 3.0 for video creation, Chirp 3 for voice synthesis, and Lyria 2 for music generation. The application provides a complete workflow from story concept to finished video, featuring a timeline-based editor for precise control over video composition.
- Web Audio API Integration: Real-time audio waveform visualization using AudioContext and AnalyserNode for dynamic audio analysis
- FFmpeg Video Processing: Server-side video concatenation, audio mixing, and overlay composition using fluent-ffmpeg
- Timeline-Based Editing: Custom drag-and-drop timeline interface with real-time preview and audio synchronization
- Google Cloud Storage Integration: Signed URL generation for secure media file access and storage
- Exponential Backoff Retry Logic: Robust error handling with jitter for AI API calls
- CSS Custom Properties: Dynamic theming system using CSS custom properties for consistent design tokens
- Next.js 15 - React framework with App Router and server actions
- Google Vertex AI - Imagen and Veo models for generative AI
- Google Cloud Text-to-Speech - Neural voice synthesis
- TanStack Query - Server state management and caching
- Framer Motion - Animation library for smooth UI transitions
- Radix UI - Accessible component primitives
- Tailwind CSS - Utility-first CSS framework with custom design system
- DM Sans - Google Fonts typography
- Lucide React - Icon library
- Sharp - High-performance image processing
- UUID - Unique identifier generation
storycraft/
├── app/ # Next.js App Router pages and components
│ ├── actions/ # Server actions for AI generation and file operations
│ ├── api/ # API routes for scene and video endpoints
│ ├── components/ # React components organized by feature
│ │ ├── create/ # Story creation interface
│ │ ├── editor/ # Timeline-based video editor
│ │ ├── scenario/ # Story scenario management
│ │ ├── storyboard/ # Scene editing and management
│ │ ├── video/ # Video playback and export
│ │ └── ui/ # Reusable UI components
│ ├── fonts/ # Custom font files
│ └── globals.css # Global styles and CSS variables
├── components/ # Shared UI components
├── lib/ # Core utilities and external service integrations
├── public/ # Static assets including sample media files
│ ├── music/ # Background music tracks
│ ├── styles/ # Visual style reference images
│ ├── tts/ # Generated text-to-speech audio
│ └── uploads/ # User-uploaded content
└── Dockerfile # Container configuration for deployment
Key Directories:
app/actions/- Contains server actions for AI generation, video processing, and file managementapp/components/editor/- Houses the sophisticated timeline editor with audio visualization and real-time previewlib/- Core utilities including FFmpeg video processing, Google Cloud integrations, and AI model wrapperspublic/music/- Curated background music library organized by mood and genre
StoryCraft can be deployed to Google Cloud Run for scalable, serverless hosting. The application includes a Dockerfile for containerization and is optimized for Cloud Run's execution environment. To deploy:
- Ensure you have the Google Cloud CLI installed and configured
- Set up your Google Cloud project with the required APIs enabled (Vertex AI, Cloud Storage, Text-to-Speech)
- Configure environment variables for your AI model endpoints and storage buckets
- Deploy using the command:
gcloud run deploy --source .
The application will automatically scale based on demand and only incur costs when actively processing video generation requests.