Create professional demos and 3D mockups in seconds, directly in your browser
mockup-generatornextjsopen-sourcevideo-editordev-tools3d
주요 지표
스타 성장
스타
2.5k
포크
352
주간 성장
+512
이슈
0
1k1.5k2k
26년 4월26년 4월26년 5월26년 6월26년 7월26년 8월26년 9월
아티팩트npm
README
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.
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
|
|
|
|
|
|
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
💬 Community
¡Contributions are welcome! Join our Discord to collaborate:
