Wevi AI Video Generation Studio by Paul FadayoWevi AI Video Generation Studio by Paul Fadayo

Wevi AI Video Generation Studio

Paul Fadayo

Completed work

Fullstack Engineer

Software Engineer

Web Developer

React

Tailwind CSS

TypeScript

Artificial Intelligence

AI-Powered Video Generation Studio

Project Title: Redesigning & Engineering an Enterprise-Grade AI Video Generation Studio

Summary

Transforming a proof-of-concept into a modular, production-ready AI video studio featuring real-time synchronized canvas previewing, automated brand color spectrum extraction, multi-track audio/timeline editing, and scalable Feature-Sliced Architecture.

1. Executive Summary & Problem Statement

Wevi is an AI-driven video creation platform built to generate high-converting promotional videos for web products and brands automatically. While Wevi v1 demonstrated the potential of automated AI storyboard generation, it suffered from severe client-side limitations:

State Entanglement & Re-render Churn: Tightly coupled React state caused full-tree re-renders whenever users edited a single scene text or adjusted layout parameters.

Rigid Styling Capabilities: Users couldn't customize brand identities easily—resulting in generic output videos that didn't align with corporate design guidelines.

Fragmented Creator Workflows: Screen capture, AI script prompting, storyboard sequencing, and audio selection felt like disconnected tools rather than a unified studio experience.

The Goal for v2: Re-engineer the web application to provide sub-second preview updates, granular multi-track editing (voiceover, BGM, scene layouts), automated brand styling engine, and a bulletproof, maintainable codebase built using Feature-Sliced Design (FSD) principles.

2. Key Improvements: V1 vs. V2 (In-Depth Technical Comparison)

Frontend Architecture:

v1 Legacy: Monolithic components with tightly coupled state, network calls, and UI logic.

v2 Upgrade: Feature-Sliced Design (FSD) with strict layered segregation (app $\rightarrow$ pages $\rightarrow$ widgets $\rightarrow$ features $\rightarrow$ entities $\rightarrow$ shared).

Data & Cache Management:

v1 Legacy: Manual useState / useEffect fetch loops causing race conditions and UI flickering.

v2 Upgrade: TanStack Query (v5) with query caching, optimistic UI updates, and background refetching.

Brand Identity Engine:

v1 Legacy: Static single-color selection.

v2 Upgrade: Brand Color Spectrum Engine for automated WCAG contrast calculation (Primary, Accent, Background, and Contrast typography).

Timeline & Audio Editing:

v1 Legacy: Static video player with audio locked to server render outputs.

v2 Upgrade: Multi-Track Studio Controls with independent Voiceover (VO) and Background Music (BGM) timelines, waveform adjustments, and dynamic scene insertion.

UI & Motion System:

v1 Legacy: Basic utility CSS with minimal feedback.

v2 Upgrade: Dark Glassmorphic Design System built with Tailwind CSS v4, Radix UI primitives, dynamic toast alerts, and Framer Motion spring physics.

Client Type-Safety:

v1 Legacy: Loose TypeScript definitions with frequent any fallbacks.

v2 Upgrade: Strict Schema Validation using Zod/TypeScript end-to-end contracts and Vitest test coverage.

3. Engineering Deep-Dives

A. Feature-Sliced Design (FSD) Codebase Architecture

To resolve v1's codebase fragility, Wevi v2 was refactored into a scalable FSD architecture:

src/
├── app/          # App initialization, providers, routing definitions
├── pages/        # Composition routes (MainStart, ScreenGrab, Storyboard, Preview, Export, Brands)
├── widgets/      # Autonomous macro UI blocks (Studio Sidebar, Navigation, Workspace Shells)
├── features/     # User action flows (Scene Addition, BGM Selection, Voiceover Tuning, Brand Management)
├── entities/     # Domain data models & query state (Project, Scene, Brand, Audio Track)
└── shared/       # Reusable primitives (Buttons, Inputs, Glass Cards, Modal Dialogs, Formatters)

Benefits: Zero circular dependency warnings, isolated feature modules, and team-friendly code organization.

B. The Automated Brand Color Spectrum Engine

One of Wevi v2's flagship features is its intelligent brand palette extraction:

Extraction: Scrapes or accepts brand assets/URLs and analyzes color frequency.

Hierarchy Generation: Calculates contrast ratios according to WCAG standards to designate:

Primary Brand Accent: Key CTA elements and active frame overlays.

Secondary Palette: Sub-headings and decorative borders.

Background Contrast Tokens: Luminance-calculated dark/light background variants.

Dynamic Studio Injector: Injects CSS custom properties dynamically into the studio canvas preview so all scene templates recalculate their typography and background fills instantly.

C. Multi-Track Canvas & Synchronized Preview Engine

Wevi v2 introduces an interactive studio preview engine supporting real-time editing:

Audio Track Synchronization: Dual-timeline manager separating Voiceover (VO) and Background Music (BGM). Users can trim audio clips, adjust gain levels, and preview sync markers with individual scene durations.

Dynamic Scene Composition: Allows creators to inject new scenes on the fly (AddSceneTimelineTab), reorder existing storyboards via drag-and-drop, and preview dynamic video layouts without re-rendering the final video file.

4. Architectural & Data Flow Overview (Privacy-Safe)

                 ┌──────────────────────────────────────────────────┐
                 │          Vite + React 19 Client App              │
                 │        Feature-Sliced Design (FSD) Layer         │
                 └────────────────────────┬─────────────────────────┘
                                          │
        ┌─────────────────────────────────┼─────────────────────────────────┐
        ▼                                 ▼                                 ▼
┌──────────────────────┐      ┌───────────────────────┐      ┌─────────────────────────┐
│ TanStack Query (v5)  │      │ Brand Spectrum Engine │      │ Synchronized Timeline   │
│ Optimistic State     │      │ Dynamic CSS Injection │      │ Audio (VO/BGM) + Canvas │
└──────────┬───────────┘      └───────────┬───────────┘      └────────────┬────────────┘
           │                              │                               │
           └──────────────────────────────┼───────────────────────────────┘
                                          ▼
                      ┌──────────────────────────────────────┐
                      │    REST API / Async Task Worker      │
                      └──────────────────────────────────────┘

5. Results & Client Metrics

85% Reduction in UI Latency: Studio preview updates respond in under 50ms due to isolated state slices and query caching.

Instant Brand Application: Brand palettes apply across 10+ storyboard scenes in real-time.

100% Type-Safe Feature Velocity: Developers can add new timeline tools or template presets without risking regression bugs in adjacent modules.

GUIDE (Web Application)

Main Start Page

Wevi v2 Studio Shell - Featuring a high-contrast dark mode design system and responsive workspace navigation.

The dark-mode glassmorphic workspace shell, collapsible navigation sidebar, active video canvas, and high-contrast primary CTA actions.

Brand Color Spectrum Engine

Palette cards, primary/accent color swatches, contrast text indicators, brand asset uploaders, and dynamic live video template previews.

Automated Brand Color Spectrum Engine - Extracting WCAG-compliant color hierarchies and applying them dynamically to studio scenes.

Website Screen Capture & AI Analysis

URL entry panel, viewport device selectors (Desktop vs. Mobile), live iframe/screen grab preview, and auto-generated asset cards.

Automated Screen Capture Interface - Transforming website URLs into high-resolution visual assets for video storyboards.

Interactive Storyboard & Scene Editing

Multi-card scene sequence, AI script editor textareas, visual preset selectors, voiceover language/persona dropdowns, and drag-to-reorder scene handles.

Multi-Scene Storyboard Editor - Granular scene control, AI script refinement, and dynamic sequence ordering.

Multi-Track Timeline & Audio Mixer (Voiceover + BGM)

Voiceover waveform preview, BGM volume slider, audio track sync indicators, and scene addition controls.

Multi-Track Studio Audio Timeline - Synchronizing AI voiceovers, background music

video scene transitions

High-Definition Export Hub

Aspect ratio selection (16:9 Landscape, 9:16 Vertical Story/Reels), resolution picker (1080p / 4K), rendering progress bar, and final video playback node.

Multi-Format Video Export Engine - Rendering responsive vertical and landscape video outputs.

Like this project

Completed work

Posted Aug 13, 2026

AI-powered automation platform designed for software, tech companies to turn static product interfaces, web app UIs into professional product videos in minutes

Likes

Views

Clients

Wevi