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 ready to share.
The following demo was fully recorded and edited using openvid.
Sin.titulo.1.1.mp4
Features
Video Input
- Screen recording - Capture your screen directly in the browser with no installation required
- Upload your video - MP4, WebM, QuickTime, and MKV
- Drag & drop - Fast file upload
Mockup Creation
- Mockups applied to images
- 3D transformations
- Image masking (Mask Image) for advanced cutouts
- Scale, rotation, perspective, and position adjustments
Visual Customization
Backgrounds
- 100+ pre-designed backgrounds
- Custom images or Unsplash
- Solid colors and gradients
- Blur effect (0–100%)
Effects
- Dynamic padding
- Rounded corners
- Shadows
- Video rotation and positioning
Canvas & Elements
- Shapes - Rectangles, circles, triangles
- Text - Custom fonts, colors, and sizes
- SVG - Import vector graphics
- Images - PNG, JPG, WebP overlays
- Layers - Depth control above or below the video
Device Mockups
Add context to your demo with professional frames:
- Safari (macOS)
- Chrome
- Arc
- Samsung
Zoom
- Zoom in/out at specific timeline moments
- Speed and easing control
- 3D Camera Movement - Tilt and dynamic rotation based on points of interest
- Adjustable Perspective - Full control over X and Y axes for depth simulation
Audio
- Multi-track support
- Per-track and master volume control
- Auto-trim based on video duration
- Toggle original video audio
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
Authentication
Powered by Supabase Auth with OAuth support:
| Provider | Status |
|---|---|
| ✅ Supported | |
| GitHub | ✅ Supported |
| Twitch | ✅ Supported |
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)
UI/UX
- Radix UI - accessible components
- Framer Motion - animations
- Tailwind CSS 4 - styling
Quick Start
# Install dependencies pnpm install # Setup environment cp .env.example .env # Add your Supabase credentials # Start development server pnpm dev
💬 Community
¡Contributions are welcome! Join our Discord to collaborate: Join Discord