Unreel Video Creation Tool

An easy to use all in one concept to video creation tool leveraging high quality animation, AI generation and an inbuilt browser video editing suite.

Comment

Inspiration

The inspiration behind the Unreel Video Creation Tool stems from the growing demand for engaging video content—particularly short-form reels—and the high barriers to entry many creators face. Traditional video editing is complex, time-consuming, and requires specialized skills and software. We envisioned a platform that democratizes video creation, allowing anyone—regardless of technical expertise—to transform their ideas into polished, shareable reels in minutes. By leveraging generative AI, we automate the most challenging aspects of video production, from conceptualization to final output, making high-quality content accessible to creators, marketers, and small businesses.

What It Does

The Unreel Video Creation Tool is an AI-powered platform that automates the entire process of generating video reels from simple text descriptions or audio inputs. Key features include:

  • Story-to-Reel Generation
    Transforms written narratives into visual stories.

  • Music Video Creation
    Synchronizes AI-generated visuals with uploaded audio and lyrics.

  • AI-Powered Scene & Image Generation

    • Automatically breaks down input into individual scenes
    • Generates high-quality backgrounds, characters, and foreground elements

  • Dynamic Animation
    Applies pre-set or custom keyframe animations to bring scenes to life.

  • Realistic Narration
    Integrates with advanced text-to-speech services for natural voiceovers.

  • Integrated Video Editor
    Timeline-based editor for fine-tuning and assembling generated content.

  • Custom Animation Creator
    Design and save your own reusable keyframe animations.

  • Content Management
    Manage projects, generated assets, and custom animations in one place.

  • Community Sharing
    Share creations in a public gallery and interact with other creators.

  • User & Subscription Management
    Handles authentication, profiles, token tracking, and Stripe integration for premium features.

How We Built It

Frontend

  • Framework & Language: React & TypeScript
  • Styling: Tailwind CSS for clean, responsive design
  • Icons: Lucide React
  • Bundler: Vite for fast development and optimized builds
  • Media Processing: ffmpeg.wasm for client-side chroma keying and APNG conversion

Backend & Database

Built on Supabase, which provides:

  • PostgreSQL Database: Stores projects, scenes, characters, animations, and community posts
  • Authentication: Secure sign-up and sign-in
  • Storage: Hosts all generated images, audio, and video files
  • Edge Functions: Serverless TypeScript functions (on Deno) to orchestrate AI workflows and handle sensitive API calls

AI Integrations

  • OpenAI: Advanced NLP for scene breakdowns, prompt generation, and genre detection
  • ElevenLabs: High-quality text-to-speech synthesis for realistic narration
  • Pollo.ai: Animated video generation from images and prompts

Payment Processing

  • Stripe: Manages subscriptions and token purchases with secure payment flows and webhooks

Challenges We Ran Into

  1. Orchestrating Multi-Modal AI
    Coordinating text, image, audio, and video models into a seamless pipeline with robust error handling.

  2. Maintaining Visual Consistency
    Ensuring characters and backgrounds remain consistent across scenes through prompt engineering and post-processing.

  3. Performance & Scalability of AI Calls
    Handling API rate limits, optimizing payloads, and managing asynchronous tasks in serverless functions.

  4. Client-Side Media Processing
    Managing WebAssembly memory and performance for in-browser tasks like chroma keying.

  5. Complex Database Schema & RLS
    Designing a flexible schema for various content types and implementing fine-grained row-level security in Supabase.

  6. User Experience for Complex Workflows
    Simplifying a multi-step, AI-driven creation process into an intuitive interface.

Accomplishments We’re Proud Of

  • End-to-End Automation: From text or audio input to a complete animated reel.
  • Seamless AI Integration: Cohesive use of OpenAI, ElevenLabs, and Pollo.ai.
  • Robust Supabase Backbone: Scalable, real-time backend for data, auth, storage, and functions.
  • Intuitive UI: Clean, responsive design that hides complexity.
  • Custom Animation System: Flexible keyframe editor for personalized motion.
  • Community Platform: Functional gallery and social features to inspire creators.

What We Learned

  • Power of Generative AI: Revolutionizes creative workflows and automates specialized tasks.
  • Importance of Prompt Engineering: Quality of AI output hinges on precise, iterative prompts.
  • AI Consistency Challenges: Perfect visual continuity remains a frontier needing further research.
  • Serverless Architecture Benefits: Agility and scalability let us focus on features, not infrastructure.
  • Asynchronous Operations Management: Effective polling, state management, and error recovery are vital.
  • User-Centric Design: Clear guidance and feedback are crucial when building AI-driven tools.

What’s Next for Unreel

  • Advanced AI Models: Integrate cutting-edge models for higher quality and longer videos.
  • Enhanced Video Editor: Add multi-track editing, advanced transitions, and granular audio controls.
  • Expanded Content Types: Support short films, animated presentations, and interactive stories.
  • Collaborative Workflows: Enable team-based content creation with real-time collaboration.
  • Mobile Applications: Native iOS and Android apps for on-the-go creation.
  • AI-Driven Sound Design: Automatic sound effect generation and music selection.
  • Tiered Monetization: Flexible pricing with premium features like faster exports and exclusive presets.

-------------- TECHNICAL BREAKDOWN --------------

This project is an AI-powered platform designed for creating engaging video reels. It streamlines the content creation process by leveraging artificial intelligence for various tasks—from story breakdown and image generation to animation and narration. Users can create story-based reels or music videos, manage their projects, customize animations, and share their creations with a community.

Functionality Overview

The core functionality revolves around transforming user input (a story or an audio file with lyrics) into a complete video reel. This involves:

  • Project Creation
    Users define project parameters like name, video ratio, length, art style, and genre.

  • AI-Powered Content Generation

    • Scene Breakdown: AI analyzes the story/lyrics and breaks it down into individual scenes with descriptions and narration scripts.
    • Image Generation: AI generates background, character, and foreground images based on scene descriptions and art style.
    • Narration: AI generates voiceovers for narration scripts using text-to-speech.
    • Animation: Applies preset or custom animations to images to bring scenes to life.
    • Video Generation: Can generate full video scenes from prompts or composite images.

  • Customization & Editing
    Users can fine-tune generated content, create custom animations, and use a video editor to assemble their reels.

  • User Management
    Authentication, profile management, and token tracking.

  • Community & Sharing
    Users can share their creations with a public community, view others’ posts, like, and comment.

  • Monetization
    Integration with Stripe for subscriptions and one-time token purchases.

  • Admin Tools
    An administrative panel for managing user roles and resources.

Tech Stack

Frontend

  • Framework: React (with JSX and Hooks)
  • Language: TypeScript
  • Bundler: Vite
  • Styling: Tailwind CSS
  • Icons: Lucide React
  • Client-side Processing: @ffmpeg/ffmpeg, @ffmpeg/core, @ffmpeg/util (for chroma keying, APNG conversion)

Backend & Database

  • Platform: Supabase
    • PostgreSQL Database: Stores projects, scenes, characters, animations, and community posts
    • Authentication: Secure sign-up/sign-in
    • Storage: Hosts generated images, audio, and video
    • Realtime: Live updates across clients
    • Edge Functions: Deno-based serverless functions for AI orchestration and API calls

AI & External APIs

  • OpenAI: Text-to-image prompt generation, character image creation, genre detection
  • ElevenLabs: High-quality text-to-speech narration
  • Pollo.ai: AI video generation from images and prompts
  • Stripe: Payment processing for subscriptions and token purchases

Page Breakdown

  • App.tsx
    Main application component and router; handles authentication flow and view transitions.

  • AuthModal.tsx
    Modal for user sign-in/sign-up.

  • UserMenu.tsx
    Dropdown in the nav bar for “My Projects,” “Video Editor,” “Animation Creator,” “Profile,” “My Gallery,” “Community,” token balance, and sign-out.

  • ProjectCreate.tsx
    Create or edit projects: define name, format (landscape/portrait), length, scene duration, art style, and upload story or audio.

  • SceneGenerationPage.tsx AI-driven breakdown of story into scene descriptions and narration scripts.

  • ImageGenerationPage.tsx
    Generates background, character, and foreground assets based on scene prompts.

  • AnimationPage.tsx Apply and preview preset or custom animations.

  • MyProjects.tsx
    List of user’s “Reel Projects” and “Video Editor Projects”; resume editing or view details.

  • VideoEditorPage.tsx Advanced timeline editor for fine-tuning and arranging scenes.

  • AnimationCreatorPage.tsx
    Canvas for designing custom keyframe animations (scale, position, rotation, opacity).

  • AnimationLibraryPage.tsx
    Browse and manage public or personal animation presets.

  • ProfilePage.tsx
    View/update profile, avatar, full name, role, sign-in history, and token balances.

  • GalleryPage.tsx
    Personal gallery for generated images and videos; filter by type and download or share.

  • CommunityPage.tsx
    Public feed of shared creations with like and comment functionality.

  • PricingSection.tsx
    Subscription plans and token packs with Stripe checkout integration.

  • SuccessPage.tsx
    Confirmation page after successful payment or subscription.

  • CancelPage.tsx
    Information page for cancelled payments.

  • AdminPanel.tsx
    Admin interface for managing user roles, token balances, and activity status.

  • CharacterModal.tsx
    Create/edit/delete character entries with reference image uploads.

  • ForegroundImageModal.tsx
    Add/edit foreground visuals via prompt or image upload.

  • ReferenceImagesModal.tsx
    Upload multiple reference images for advanced generation.

  • ShareToCommunityModal.tsx
    Share assets to the public feed with title and description.

  • SubscriptionStatus.tsx
    Displays current subscription status and remaining tokens in the UserMenu.

Supabase Edge Functions

  • animate-background-with-character
    Composites background + character, then uses Pollo.ai for animation.

  • check-video-status
    Polls Pollo.ai for generation status, downloads, and stores completed videos.

  • detect-genre
    Uses OpenAI to classify story genre and updates project metadata.

  • extract-video-audio Intended to extract audio from uploaded video files.

  • generate-background-image
    Calls DALL·E to create background art based on prompts.

  • generate-character-animation *(InProgress) Generates APNGs by compositing characters and invoking Pollo.ai, then chroma-keying.

  • generate-character-image
    Creates character portraits with DALL·E from prompt, art style, and genre.

  • generate-character-image-with-custom-references
    DALL·E editing workflow using user-provided reference images.

  • generate-character-image-with-reference
    Generates character images from stored reference assets.

  • generate-elevenlabs-speech
    Converts text to speech via ElevenLabs and uploads audio to Supabase.

  • generate-foreground-image
    Creates foreground elements from prompts or reference images.

  • generate-image-prompt
    Generates detailed prompts for backgrounds/characters with scene continuity.

  • generate-music-video-scenes
    Analyzes lyrics to create beat-aligned scenes.

  • generate-scenes
    Breaks down stories into scenes with descriptions, scripts, and character IDs.

  • generate-video
    Initiates Pollo.ai video generation, handles tokens, and polls status.

  • list-elevenlabs-voices
    Fetches available voices from ElevenLabs.

  • stripe-checkout
    Creates Stripe checkout sessions.

  • stripe-webhook
    Processes Stripe events to update subscriptions and token allocations.

Built With

  • bolt
  • googleveo
  • netlify
  • openai
  • pollo
  • react
  • supabase
  • vite
Share this project:

Updates