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.
demo-openvid.mp4
- 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
- Mockups applied to images
- 3D transformations
- Image masking (Mask Image) for advanced cutouts
- Scale, rotation, perspective, and position adjustments
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
- 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
Add context to your demo with professional frames:
- Safari (macOS)
- Chrome
- Arc
- Samsung
- 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
- Multi-track support
- Per-track and master volume control
- Auto-trim based on video duration
- Toggle original video audio
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
Powered by Supabase Auth with OAuth support:
| Provider | Status |
|---|---|
| ✅ Supported | |
| GitHub | ✅ Supported |
| Twitch | ✅ Supported |
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
# Install dependencies
pnpm install
# Setup environment
cp .env.example .env
# Add your Supabase credentials
# Apply the Supabase schema + RLS policies (one-time, in your Supabase project)
# Open supabase-setup.example.sql and run it in the Supabase SQL editor.
# This creates user_profiles, enables row-level security, and wires the
# new-user trigger. Without it the auth flow has no profile to read.
# Start development server
pnpm dev¡Contributions are welcome! Join our Discord to collaborate: Join Discord