VideoProduction

Automated video production pipeline that combines AI-generated imagery, text-to-speech voiceovers, and programmatic animation to produce social media videos entirely from code. Built on Remotion v4, React, and TypeScript.

How It Works

1. Data In -- Feed structured JSON props (manually authored or fetched from a live tour-search API).
2. AI Assets -- Generation scripts call OpenRouter (Gemini) for photorealistic images and ElevenLabs for multilingual voiceovers.
3. Render -- Remotion compiles React components frame-by-frame into MP4 at 30 fps.

A single CLI command (auto-promo-pipeline.ts) chains all three steps: fetch data, generate images, render video.

Tech Stack

Layer	Technology
Animation framework	Remotion v4.0.422
Language	TypeScript 5, React 19
Image generation	OpenRouter API (google/gemini-3-pro-image-preview)
Voiceover (TTS)	ElevenLabs (eleven_multilingual_v2)
Schema validation	Zod
Maps / geo	react-simple-maps, topojson-client

Compositions

The project ships 18 registered Remotion compositions:

Composition	Description	Resolution
FirstClassIntro	Animated logo intro	1920x1080
ReactionDemo	Split-screen + PiP reaction format	1920x1080
ProductAd	Vertical product advertisement	1080x1920
AliceMaxAd / AliceMaxV2	Smart-speaker promo variants	1080x1920 / 720x1280
Feb23Ad	Holiday greeting video	1080x1920
CountryCompare	Side-by-side country/product comparison with animated metrics	1080x1920
PhoneReview	Multi-scene phone review with specs	1080x1920
InfographicDemo	Static infographic demo	1080x1920
SlideShow	JSON-driven slide deck	1080x1920
VideoReview	Video-clip-based product review	1080x1920
TravelDeal / TravelDealMinimal / TravelDealLuxury	Hotel promo in 3 visual styles	1080x1920
PromoVideo	Professional promo with glitch, chromatic, and film-grain effects	1080x1920
DataStory	Apple Keynote-style animated infographic (hook, bars, rings, versus, takeaway, CTA)	1080x1920
CreativeLightMinimal / CreativeSplitScreen / CreativeUGCPhotoBg	Ad creative templates	1080x1920

All data-driven compositions accept JSON props and expose Zod schemas for validation.

Visual Effects Library

src/overlays/ contains 19 reusable overlay components:

• Animation: AnimatedBarChart, AnimatedTitle, CircleProgress, ComparisonBars, DataCounter, ProgressBar, SpecCounter
• Text: KineticText, NeonText, TextReveal, LowerThird, Badge
• Post-processing: ChromaticAberration, ColorGrade, FilmGrain, GlitchEffect, GlowRing, MaskReveal
• Layout: ParallaxLayers (includes FloatingParticles)

Project Structure

src/
  index.ts                  Entry point (registerRoot)
  Root.tsx                  All Composition registrations
  *.tsx                     Individual compositions
  creatives/                Ad creative compositions + shared components
  scenes/                   Multi-scene composition building blocks
  overlays/                 Reusable visual effects and UI overlays
props/                      JSON prop files driving compositions
  auto/                     Auto-generated from tour API
  promo/                    Auto-generated promo props
  channel/                  Content channel video props
public/                     Static assets (images, audio, video clips)
  voiceover/                Generated TTS audio
  music/                    Background music tracks
  phones/                   AI-generated product images
  hotels/                   AI-generated hotel images
scripts/                    Review scripts for voiceover generation
sources/                    Research data and prompts
out/                        Rendered MP4 output (git-ignored)

Setup

# Install dependencies
npm install

# Create .env with your API keys
cp .env.example .env

Required Environment Variables

Variable	Service	Purpose
OPENROUTER_API_KEY	OpenRouter	AI image generation (Gemini)
ELEVENLABS_API_KEY	ElevenLabs	Text-to-speech voiceovers
GEMINI_API_KEY	Google AI	Direct Gemini access (optional)
FAL_KEY	fal.ai	Alternative image generation (optional)

Usage

Preview in Remotion Studio

npm run dev
# Opens localhost:3000 with live preview of all compositions

Render a Single Video

npm run render:intro           # FirstClassIntro -> out/intro.mp4
npm run render:reaction        # ReactionDemo -> out/reaction-demo.mp4
npx remotion render src/index.ts DataStory --props=props/data-story-ai-market.json out/ai-market.mp4

Generate AI Images

# Product photography (iPhone slides)
npx tsx --env-file=.env generate-phone-images.ts

# Hotel showcase images
npx tsx --env-file=.env generate-hotel-images.ts

# Custom single-prompt image
npx tsx --env-file=.env generate-phone-images.ts --custom "your prompt here"

Generate Voiceovers

# From CountryCompare props (auto-generates narration script)
npx tsx --env-file=.env generate-voiceover.ts props/russia-vs-usa.json

# From a review script JSON
npx tsx --env-file=.env generate-review-voiceover.ts scripts/robot-vacuum-review.json

Generate Props from Tour API

# Fetch tours and create TravelDeal JSON props
npx tsx --env-file=.env generate-tour-props.ts --country Egypt --top 5

# Fetch tours and create PromoVideo JSON props
npx tsx --env-file=.env generate-promo-props.ts --country Turkey --hotel Rixos --style luxury --images

Full Auto Pipeline

One command: search tours, generate AI images, build props, render MP4.

npx tsx --env-file=.env auto-promo-pipeline.ts --country Egypt --top 3 --images --render
npx tsx --env-file=.env auto-promo-pipeline.ts --country Maldives --style luxury --images --render --all-styles

Batch Render

# Batch render CountryCompare from all props/*.json
./batch-render.sh

# Batch render PromoVideo from a directory
npx tsx batch-render-promos.ts --dir props/promo/ --style neon

Adding a New Composition

1. Create src/NewVideo.tsx exporting a React component.
2. Register a <Composition> in src/Root.tsx.
3. Render: npx remotion render src/index.ts NewVideoId out/new-video.mp4

License

ISC