SmartRatio 📐

Reframing, Reimagined.

SmartRatio is a client-side, GPU-accelerated video engine that converts widescreen footage (16:9) into vertical formats (9:16, 4:5, 1:1) without cropping context or hallucinating fake pixels.

🚀 The Core Technology

Unlike competitors (OpusClip, Munch) that rely on heavy cloud rendering, SmartRatio runs entirely in your browser.

• WebGL Spatial Warp Engine: Uses a custom GLSL fragment shader to perform non-linear anamorphic stretching. It preserves the subject (center) while compressing the background (edges) in real-time at 60fps.
• Zero-Cost Architecture: Video processing happens on the user's GPU. No server costs. 99% gross margins.
• Semantic Intelligence: Uses Google Gemini 1.5 Flash for audio transcription, viral clip detection, and auto-captioning.

✨ Key Features

1. Spatial Field Warp (The "Magic")

Don't crop. Squeeze. Our algorithm calculates a "Density Map" of the frame and warps space only where it doesn't matter (the background), preserving the information of the wide shot within the geometry of the vertical shot.

2. AI "Hormozi" Captions

• Auto-Transcription: Extracts audio client-side, converts to WAV, and sends to Gemini for timestamped transcription.
• Burn-In Engine: Renders word-level animations directly onto the video canvas during export.

3. Dual-Cam Split Screen

For podcasts and interviews. Detects two subjects and tears the screen in half, stacking them vertically with a blurred divider.

4. Viral Clip Detection

Analyzes long-form video to find high-energy moments and automatically sets loop points for rapid export.

🛠️ Tech Stack

• Frontend: React 19, TypeScript, Tailwind CSS
• Rendering: WebGL 2.0 (Custom Shaders), Canvas API
• AI: Google Gemini API (via @google/genai SDK)
• Audio: Web Audio API (Client-side resampling & WAV encoding)
• Video I/O: MediaRecorder API (VP9/WebM)

💎 Business Model (Simulated)

The app features a built-in Tier System logic:

Feature	Free Tier 🛡️	Pro Tier 👑
Watermark	On (Bottom Right)	Off
Resolution	720p	4K Ready
Fonts	Basic (Arial, Impact)	Premium (Brush, Cyber)
Colors	Basic (Yellow, White)	Neon Palettes
Warp Engine	Standard	Depth-Aware

📦 Getting Started

1. Clone the repo
2. Install dependencies

   npm install

3. Set API Key Create a .env file and add your Gemini API key:

   API_KEY=your_google_ai_studio_key

4. Run Development Server

   npm run dev

📜 License

MIT License. Built for the future of vertical video.