openvid ## Create professional demos and mockups in seconds, directly in your browser **Record your screen or upload a video, add smooth zooms, device mockups, 3D effects, and custom backgrounds - export a cinematic demo.** [![Next.js](https://img.shields.io/badge/Next.js-000000?logo=next.js&logoColor=white)](https://nextjs.org) [![FFmpeg.wasm](https://img.shields.io/badge/FFmpeg.wasm-007808?logo=ffmpeg&logoColor=white)](https://ffmpeg.org) [![Three.js](https://img.shields.io/badge/Three.js-000000?logo=threedotjs&logoColor=white)](https://threejs.org) [![Discord Community](https://img.shields.io/badge/Discord-Community-5865F2?logo=discord&logoColor=white)](https://discord.gg/aBu5A2tBXb)
poindeo-video-speed_1 5x_1787010609273 (1) (1)
## Features ### Video Input - **Screen recording** - Capture your screen directly in the browser with no installation required - **Upload your video** - MP4, WebM, QuickTime, and MKV ### Mockup Creation - **Mockups applied to images** - **3D transformations** ### Visual Customization **Backgrounds** - 100+ pre-designed backgrounds - Custom images or Unsplash - Solid colors and gradients ### Canvas & Elements - **Shapes** - Rectangles, circles, triangles - **Text** - Custom fonts, colors, and sizes - **SVG** - Import vector graphics - **Images** - PNG, JPG, WebP overlays ### Zoom - Zoom in/out at specific timeline moments - Speed and easing control - **3D Camera Movement** - Tilt and dynamic rotation based on points of interest ### Audio - Multi-track support - Auto-trim based on video duration ### Export **Quality** - 4K (3840×2160) @ 30fps - 2K (2560×1440) @ 30fps - 1080p (1920×1080) @ 30fps - 720p (1280×720) @ 30fps - 480p (720×480) @ 24fps **Format** - MP4 (H.264) - WebM (VP9 with transparent background support) - GIF - PNG, WEBP, JPG, AVIF --- ## Screenshots zoom
FreeCut multi-track timeline Frame 1116606751
Frame 1116606753 Frame 1116606752
--- ## Technology **Video Processing** - FFmpeg.wasm - fully in-browser rendering - Canvas API - preview - MediaBunny - optimized video pipeline - Three.js - 3D effects - HTML to Image - mockup export **Storage** - IndexedDB - locally recorded videos - LocalStorage - user settings - Supabase Storage - cloud backups (coming soon) --- ## Quick Start ```bash # Install dependencies pnpm install # Setup environment cp .env.example .env # Add your Supabase credentials # Start development server pnpm dev ``` Open [http://localhost:3000](http://localhost:3000) --- ## 💬 Community ¡Contributions are welcome! Join our **Discord** to collaborate: [![Discord](https://img.shields.io/badge/Discord-Join%20Chat-5865F2?logo=discord&logoColor=white)](https://discord.gg/aBu5A2tBXb) ## Contributors