[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-82489":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},82489,"openvid","CristianOlivera1\u002Fopenvid","CristianOlivera1","Create professional demos and mockups in seconds, directly in your browser","https:\u002F\u002Fopenvid.dev\u002Fen",null,"TypeScript",1350,202,5,1,0,43,128,165,129,19.92,"Other",false,"main",true,[27,28,29,30,31],"dev-tools","mockup-generator","nextjs","open-source","video-editor","2026-06-12 02:04:26","\u003Cdiv align=\"center\">\n   \u003Cimg width=\"70%\" alt=\"openvid Hero\" src=\"https:\u002F\u002Fopenvid.dev\u002Fimages\u002Fpages\u002Fopenvid-animation.svg\" \u002F>\n\n  ### Create professional demos and mockups in seconds, directly in your browser\n  **Record your screen or upload a video, add smooth zooms, device mockups, 3D effects, and custom backgrounds - export a cinematic demo.**\n\n  [Live Demo](https:\u002F\u002Fopenvid.dev) • [Features](#-features) • [Installation](#-quick-start) • [Discord Community](https:\u002F\u002Fdiscord.gg\u002FaBu5A2tBXb)\n\u003C\u002Fdiv>\n\n\u003Cdiv align=\"center\">\n  \u003Cvideo src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F992f4ae3-c816-43ef-b029-2a15e7c0044f\" width=\"100%\">\n    Your browser does not support the video tag.\n  \u003C\u002Fvideo>\n\u003C\u002Fdiv>\n\n\u003Cimg width=\"1890\" height=\"1318\" alt=\"Frame 1116606714 (1)\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fa8ef1f0a-af93-461f-ab27-b890e17bf6b9\" \u002F>\n\n## Features\n\n### Video Input\n- **Screen recording** - Capture your screen directly in the browser with no installation required\n- **Upload your video** - MP4, WebM, QuickTime, and MKV\n- **Drag & drop** - Fast file upload\n\n---\n\n### Mockup Creation\n- **Mockups applied to images**\n- **3D transformations**\n- **Image masking (Mask Image)** for advanced cutouts\n- Scale, rotation, perspective, and position adjustments\n\n---\n\n### Visual Customization\n\n**Backgrounds**\n- 100+ pre-designed backgrounds\n- Custom images or Unsplash\n- Solid colors and gradients\n- Blur effect (0–100%)\n\n**Effects**\n- Dynamic padding\n- Rounded corners\n- Shadows\n- Video rotation and positioning\n\n---\n\n### Canvas & Elements\n- **Shapes** - Rectangles, circles, triangles\n- **Text** - Custom fonts, colors, and sizes\n- **SVG** - Import vector graphics\n- **Images** - PNG, JPG, WebP overlays\n- **Layers** - Depth control above or below the video\n\n---\n\n### Device Mockups\nAdd context to your demo with professional frames:\n- Safari (macOS)\n- Chrome\n- Arc\n- Samsung\n\n---\n\n### Zoom\n- Zoom in\u002Fout at specific timeline moments\n- Speed and easing control\n- **3D Camera Movement** - Tilt and dynamic rotation based on points of interest\n- **Adjustable Perspective** - Full control over X and Y axes for depth simulation\n\n---\n\n### Audio\n- Multi-track support\n- Per-track and master volume control\n- Auto-trim based on video duration\n- Toggle original video audio\n\n---\n\n### Export\n\n**Quality**\n- 4K (3840×2160) @ 30fps\n- 2K (2560×1440) @ 30fps\n- 1080p (1920×1080) @ 30fps\n- 720p (1280×720) @ 30fps\n- 480p (720×480) @ 24fps\n\n**Format**\n- MP4 (H.264)\n- WebM (VP9 with transparent background support)\n- GIF\n- PNG, WEBP, JPG, AVIF\n\n---\n\n## Authentication\n\nPowered by **Supabase Auth** with OAuth support:\n\n\u003Cdiv align=\"center\">\n\n| Provider | Status |\n|:--------:|:------:|\n| Google   | ✅ Supported |\n| GitHub   | ✅ Supported |\n| Twitch   | ✅ Supported |\n\n\u003C\u002Fdiv>\n\n---\n\n## Technology\n\n**Video Processing**\n- FFmpeg.wasm - fully in-browser rendering\n- Canvas API - preview\n- MediaBunny - optimized video pipeline\n- Three.js - 3D effects\n- HTML to Image - mockup export\n\n**Storage**\n- IndexedDB - locally recorded videos\n- LocalStorage - user settings\n- Supabase Storage - cloud backups (coming soon)\n\n**UI\u002FUX**\n- Radix UI - accessible components\n- Framer Motion - animations\n- Tailwind CSS 4 - styling\n\n---\n\n## Quick Start\n```bash\n# Install dependencies\npnpm install\n\n# Setup environment\ncp .env.example .env\n# Add your Supabase credentials\n\n# Start development server\npnpm dev\n```\n\nOpen [http:\u002F\u002Flocalhost:3000](http:\u002F\u002Flocalhost:3000)\n\n---\n\n## 💬 Community\n\n¡Contributions are welcome! Join our **Discord** to collaborate: [![Discord](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDiscord-Join%20Chat-5865F2?logo=discord&logoColor=white)](https:\u002F\u002Fdiscord.gg\u002FaBu5A2tBXb)\n\n[![oosmetrics](https:\u002F\u002Fapi.oosmetrics.com\u002Fapi\u002Fv1\u002Fbadge\u002Fachievement\u002F0035870f-b4f4-4b12-9a1c-bef97b6785af.svg)](https:\u002F\u002Foosmetrics.com\u002Frepo\u002FCristianOlivera1\u002Fopenvid)\n  \n## Contributors\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002FCristianOlivera1\u002Fopenvid\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=CristianOlivera1\u002Fopenvid\" \u002F>\n\u003C\u002Fa>\n\n## Star History\n[![Star History Chart](https:\u002F\u002Fapi.star-history.com\u002Fchart?repos=CristianOlivera1\u002Fopenvid&type=date&legend=top-left)](https:\u002F\u002Fwww.star-history.com\u002F?repos=CristianOlivera1\u002Fopenvid&type=date&legend=top-left)\n","Openvid 是一个基于浏览器的专业演示和原型制作工具，允许用户在几秒钟内创建高质量的演示视频。其核心功能包括屏幕录制、视频上传、3D 效果、设备框架、自定义背景以及多种视觉效果定制选项。技术上，该项目利用了 TypeScript 编写，并集成了 FFmpeg.wasm、Canvas API、Three.js 等先进技术来实现全浏览器渲染和3D特效处理。此外，它还支持多格式导出（如 MP4, WebM, GIF 等）和高分辨率输出（最高可达 4K）。适用于需要快速生成产品演示、教程视频或营销材料的开发者、设计师及内容创作者。",2,"2026-06-11 04:08:45","high_star"]