📄
Caption01
Tags
PreactAIVideoLocal-First
Links
Tech Stack
Frontend, AI Engine, State Management, Animation, Storage
Overview
Modern web-based video captioning tool that automatically generates animated captions using AI-powered transcription.
The Problem
Creating animated captions for videos is traditionally a manual, time-consuming process or requires expensive, cloud-based software that compromises privacy. Content creators need a fast, local-first tool to generate professional captions without data leaving their device.
What I Did
- Built a fully local browser-based video editor that processes audio using WebAssembly and OpenAI Whisper
- Implemented a timeline editor with precise control over caption timing and duration
- Created an animation engine using Framer Motion to support presets like bounce, pop, typewriter, and karaoke
- Designed a custom dark-mode UI for comfortable long-form editing sessions
- Engineered a rendering pipeline to export captions as SRT, VTT, or embedded video
Tech Stack Details
Frontend
Preact, Tailwind CSS, TypeScript
AI Engine
@remotion/whisper-web (WebAssembly)
State Management
Zustand
Animation
Framer Motion
Storage
IndexedDB
Key Learnings
💡
WebAssembly IntegrationLearned to optimize AI model performance directly in the browser without server dependency
💡
Video ProcessingGained deep expertise in handling binary media data, timing synchronization, and frame rendering
💡
Performance OptimizationManaged large state objects for timeline interactions to ensure 60fps scrolling and playback