DEV Community

Cover image for Building a Mac Screen Recorder That Adds Zoom Animations from Click Data
Sergey Nazarov
Sergey Nazarov

Posted on

Building a Mac Screen Recorder That Adds Zoom Animations from Click Data

Hey! I'm Sergey and I'm building a macOS screen recorder that enhances recordings by smoothing cursor movement and generating zoom animations based on clicks.

Why I built this

Most screen recordings feel static and hard to follow, especially in tutorials and product demos. I wanted recordings look more polished and cinematic like a professional ad


From Chrome Extension to macOS App

I started building this product about 2 years ago as a Chrome extension. After releasing it, I realized I would never reach the level of quality and performance I wanted with a browser-based tool, so at the beginning of 2025 I decided to pivot to a native macOS app.

I spent around 3 months rewriting the entire codebase for Electron. I'm still using Next.js under the hood because the original Chrome extension was built with it, but I plan to switch to Vite in the future since it's lighter and I don't need backend functionality in a desktop app.


The Challenge of Cursor Tracking

Overall, I've spent roughly 2 years building the product. The most interesting part has been tracking cursor movements during recording and transforming that data into smooth cursor motion and click-driven zoom effects.

I use Swift scripts for low-level cursor tracking and then run a post-processing pipeline that handles resampling to timeline FPS, outlier-jump clamping, stillness detection with snap-to-median behavior, cursor-type flicker smoothing, and coordinate normalization for area versus full-screen recordings. Clicks are converted into timed zoom segments with easing curves. This makes playback feel intentional rather than jumpy.


Why I Switched from Remotion to PixiJS

For video preview and export, I use PixiJS. Before that, I was using Remotion, which provided most of the functionality I needed, but rendering was slower because it relied on a Chromium + FFmpeg pipeline. Since PixiJS uses WebGL, 4K video rendering is significantly faster.

The migration took about 3 weeks. In the end, rendering speed improved by roughly 3–4× on the same hardware and projects. It was one of the more challenging rewrites, but I was relieved when everything finally came together.


High-level pipeline

Recording → Swift cursor capture → Post-processing → Zoom segment generation → WebGL rendering (PixiJS) → Export


Lessons learned

The hardest part wasn't rendering or recording—it was handling edge cases in cursor tracking. Small inconsistencies (jitter, missed frames, OS-level cursor changes) completely break the illusion of smooth motion.


Building with AI

I probably wouldn't have been able to build this product without AI assistants. Before this project, I had never built an Electron app, and many aspects of desktop development were completely new to me.

The first users uncovered plenty of bugs, platform-specific issues, and edge cases that I didn't even know existed. A large part of the last year has been spent tracking down those problems, improving reliability, and polishing the overall experience.


Stack

  • Electron
  • Next.js (migration planned to Vite)
  • Swift (cursor tracking, screen and camera recording)
  • PixiJS (rendering + export)

The product is called Screen Charm: https://screencharm.com

Top comments (0)