🎬 Mouse Studio

Beautiful screen recordings with automatic zoom, smooth cursor motion, and click effects — right on your desktop, 100% free and offline.

A local, open-source take on tools like Screen Studio. Record your screen, then polish it with cinematic auto-zoom, gradient backgrounds, and animated clicks. Export to MP4, WebM, or GIF.

_{Runs on Windows, macOS, and Linux. Screen capture uses FFmpeg per platform — Windows (gdigrab) is the actively tested path; macOS (avfoundation) and Linux (x11grab) follow FFmpeg's standard conventions and may need a permissions grant (macOS Screen Recording) or an X11 session (Linux; Wayland is not yet supported). Reports and PRs welcome.}

---

✨ Why Mouse Studio?

Polished product demos usually mean pricey subscriptions or cloud uploads. Mouse Studio gives you the good parts — auto-zoom that follows your cursor, buttery cursor smoothing, and tasteful click animations — as a free desktop app that never sends a single frame off your machine.

Record once. The editor does the cinematography.

---

🚀 Features

🎥 Recording

• Any screen or window — pick your source from a dropdown.
• Webcam + microphone (optional) — record a webcam and/or mic alongside your screen. The webcam captures in lockstep with the screen (pause/resume mirrored), and the mic narration is preserved for the editor.
• Cursor-free capture — the real OS cursor is left out of the recording (FFmpeg screen grab: gdigrab on Windows, avfoundation on macOS, x11grab on Linux), so the editor draws its own crisp cursor instead of baking in a jittery, shape-shifting one. Your real cursor stays visible on screen while you record.
• Native cursor + click tracking — every move and click is sampled and saved alongside the video for the editor to work with.
• Pause / resume mid-take.

🎨 Editing — the fun part

🔍 Auto-Zoom	The frame smoothly zooms toward wherever your cursor is working. Tune zoom level and smoothness.
🖱️ Custom Cursor	Arrow, pointer hand, dot, or ring — in four sizes, with optional shadow and velocity-aware smoothing.
💥 Click Animations	Orb, pressure, or ripple effects with adjustable force.
🌈 Backgrounds	Preset gradients, real Windows / macOS wallpapers, solid colors, or your own image.
📹 Webcam bubble	Drop your webcam in as a circular or rounded picture-in-picture. Drag it anywhere in the preview, resize it, mirror it, or snap to a corner.
🔊 Click sounds + narration	Optional click sounds (synthesized styles or a recorded sample) and your recorded microphone narration — each toggled independently, previewed live, and mixed into the export.
🖼️ Framing	Padding, corner radius, drop shadow, and aspect ratios (16:9, 4:3, 1:1, 9:16, auto).
⏱️ Timeline	Split, trim, delete segments, add speed-ramp segments, plus undo/redo.
👁️ Preview zoom	Scroll to zoom the preview and pan around — non-destructive, never touches the export.

📤 Export & Hardware Acceleration

• ⚡ GPU Hardware Accelerated Encoding — Auto-detects and uses your GPU hardware encoder (NVIDIA NVENC, Intel QuickSync, AMD AMF, macOS VideoToolbox, or Windows Media Foundation) for 5x–15x faster exports with minimal CPU load (with automatic libx264 CPU fallback).
• 🚀 Direct Stream Pipeline — Frame-by-frame streaming directly to FFmpeg (image2pipe) guarantees 100% frame-accurate playback speed and compact output file sizes (10 MB – 30 MB).
• 🎛️ Export Controls — Select 60 FPS (silky smooth) or 30 FPS, and scale output resolution (Original, 1080p Full HD, 720p HD).
• 🔊 Audio muxing — Click sounds and/or microphone narration are rendered to a single track and muxed into the export (AAC). Skipped automatically for GIF and when both are off.
• ⏱️ Real-time Progress & ETA — Live rendering FPS counter, percentage bar, and estimated time remaining during export.
• Formats — MP4 (H.264), WebM (VP9), and GIF (optimized two-pass palette).

---

📦 Downloads

Ready-to-use desktop apps are available on the GitHub Releases page:

• Windows: Download Mouse-Studio-Setup-*.exe (Installer) or Mouse-Studio-*.exe (Standalone Portable).
• macOS: Download Mouse-Studio-*.dmg or .zip.

---

⚡ Quick Start (Running from Source)

Prerequisites: Node.js 18 or newer.

# 1. Clone
git clone https://github.com/moego0/demo-video-recorder.git
cd demo-video-recorder

# 2. Install (also pulls the bundled FFmpeg)
npm install

# 3. Launch
npm start

# 4. Build standalone installer locally (optional)
npm run dist

That's it — the recorder window opens. Pick a source, hit Record, stop when done, and the editor opens automatically with your clip.

---

🚢 Publishing a Release (for maintainers)

Want people to download the app directly instead of building from source? Publish the installers to GitHub Releases. The npm run dist build produces these files in dist/:

File	What it is
Mouse Studio Setup <version>.exe	Windows installer (adds shortcuts + uninstaller)
Mouse Studio <version>.exe	Windows portable (runs without installing)

Option A — GitHub website (no tooling)

1. Run npm run dist and confirm the .exe files are in dist/.
2. Go to your repo → Releases → Draft a new release.
3. Choose a tag → type a new one like v0.1.0 (matches package.json version) → Create new tag on publish.
4. Add a title (Mouse Studio 0.1.0) and notes (what's new).
5. Drag both .exe files from dist/ into the "Attach binaries" box and wait for the upload to finish.
6. Click Publish release.

Your download link is now https://github.com/moego0/demo-video-recorder/releases/latest — that's the URL the Downloads section points to.

Option B — GitHub CLI (one command)

With the gh CLI installed and authenticated (gh auth login):

npm run dist
gh release create v0.1.0 \
  "dist/Mouse Studio Setup 0.1.0.exe" \
  "dist/Mouse Studio 0.1.0.exe" \
  --title "Mouse Studio 0.1.0" \
  --notes "Webcam PiP, click/mic audio, faster GPU export."

Releasing a new version later

1. Bump "version" in package.json (e.g. 0.1.1).
2. npm run dist.
3. Create a new release with a matching new tag (v0.1.1) and upload the freshly built .exe files.

Heads-up on the unsigned build: because the installer isn't code-signed, Windows SmartScreen shows a one-time "Windows protected your PC → More info → Run anyway" prompt. This is expected for unsigned apps and worth noting in your release notes so users aren't alarmed. Removing it requires a paid code-signing certificate.

---

🎯 How to use

1. Record — choose a screen or window, optionally pick a webcam and/or microphone, then press Record. Do your thing, then Stop.
2. Edit — the editor opens with your clip. Turn on Auto Zoom, pick a background, tweak the cursor and click styles, drag the webcam bubble where you want it, and enable click sounds or narration under Audio. Scrub the timeline to trim or add speed segments.
3. Export — click Export, choose MP4 / WebM / GIF, pick your Encoder (GPU / CPU), FPS, and Resolution, then save.

⌨️ Handy shortcuts: Space play/pause · S split · Del delete segment · Ctrl+Z / Ctrl+Y undo/redo · 0 + - preview zoom.

---

🧱 Tech stack

• Electron — cross-platform desktop shell with Chromium GPU hardware rasterization.
• HTML5 Canvas — hardware-accelerated compositor. Recording and export share one drawFrame() renderer, so the preview matches the output exactly.
• FFmpeg (ffmpeg-static) — high-performance MP4 / WebM / GIF stream encoding with GPU hardware acceleration.
• uiohook-napi — native mouse-click capture.
• No frameworks, no build step — plain JS that's easy to read and hack on.

---

📁 Project structure

demo-video-recorder/
├── main.js            # Electron main: capture sources, cursor/click tracking, GPU FFmpeg export stream
├── preload.js         # Secure IPC bridge (contextBridge)
├── src/
│   ├── recorder.html/.css/.js   # Recording window
│   ├── editor.html/.css/.js     # Editor + canvas compositor (drawFrame)
│   └── export.js                # GPU Export modal UI & frame stream engine
├── backgrounds/       # Bundled wallpaper presets
└── assets/            # README graphics

---

🗺️ Roadmap

• Webcam bubble overlay (drag-anywhere PiP, circle / rounded, mirror)
• Cursor click sounds (synthesized styles + recorded sample)
• Microphone narration (recorded and mixed into the export)
• GPU Hardware Acceleration (NVENC, QuickSync, AMF, VideoToolbox)
• Prebuilt installers (Windows .exe, macOS .dmg / .zip)
• Manual zoom keyframes on the timeline
• Background music / audio track

Have an idea? Open an issue — feature requests welcome.

---

🤝 Contributing

Contributions of all sizes are welcome, from typo fixes to new export formats.

1. Fork the repo and create a branch: git checkout -b feature/your-idea
2. Make your change and test with npm start
3. Open a pull request describing what and why

If Mouse Studio saves you a subscription, a ⭐ on the repo genuinely helps others find it.

---

📝 License

Released under the MIT License — free for personal and commercial use.

---

_{Built with Electron + Canvas + FFmpeg. Your recordings never leave your machine.}
⭐ Star this repo if it helped you ship a better demo.