Skip to content

CristianOlivera1/openvid

Repository files navigation

openvid Hero

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.

Live DemoFeaturesInstallationDiscord Community

Frame 1116606714 (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
  • 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

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

Open http://localhost:3000


💬 Community

¡Contributions are welcome! Join our Discord to collaborate: Discord

oosmetrics

Contributors

Star History

Star History Chart

About

Create professional demos and mockups in seconds, directly in your browser

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages