Sponsored Content
Skip to content

Latest commit

ย 

History

615 Commits

Folders and files

NameName
Last commit message
Last commit date
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

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.

Next.js FFmpeg.wasm Three.js Discord Community

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

FreeCut multi-track timeline Frame 1116606751
Frame 1116606753 Frame 1116606752
openvid-1784321861424 (1)

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

# 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

Contributors

About

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

Topics

Resources

Stars

2.2k stars

Watchers

11 watching

Forks

Releases

Packages

Contributors

Languages