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

Sergey Nazarov — Fri, 12 Jun 2026 11:22:29 +0000

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

DEV Community: Sergey Nazarov