Recordr — Case Study

01 / Overview

What Recordr is

Most screen recordings are flat and hard to follow. Recordr fixes that automatically — you hit record, do your thing, and it hands back a polished clip with cinematic zooms and a designed backdrop.

No timeline scrubbing, no keyframing. A floating glass control bar stays out of the way while you work; the moment you stop, Recordr analyses your cursor, finds the moments that matter, and renders an export-ready video. It’s a from-scratch Electron app with a custom canvas compositor — not a wrapper around anything.

40+

Backgrounds

Auto

Smart Zoom

MP4·WebM

One-click export

4

Capture states

02 / The big idea

The zooms happen on their own.

The headline feature is Smart Zoom. After you stop recording, Recordr scans the cursor telemetry, detects where you paused and focused, and lays down zoom regions automatically — punching in on the detail, panning between hotspots, easing back out. Every region is editable as a simple toggle, but you rarely need to touch it.

Recordr Done screen — recording complete with the Smart Zoom region timeline — The finish screen — a framed, background-composited recording with the auto-detected Smart Zoom timeline (5 regions) ready to export.

03 / Design language

Raycast glass meets Apple HIG.

The whole UI is a set of floating glass surfaces that hover over your desktop — heavy background blur, a single 1px top-edge sheen, system-native dark tones. Colour is used sparingly and with meaning: red to record, green to confirm, purple for anything Smart-Zoom.

Canvas

#0C0C0E

Base surface under the glass. iOS-style dark.

Record Red

#FF3B30

The record dot, stop button & primary action.

Confirm Green

#32D74B

Success — “Recording complete”.

Zoom Purple

#BF5AF2

Every Smart Zoom region and badge.

Recordr picker bar — The picker — source, camera, mic, Smart Zoom, settings, record. A 58px glass bar.

Glass, not chrome

Each surface uses backdrop-filter: blur(40px) saturate(180%) so the desktop colour tints through but text stays readable. The same recipe scales from the thin picker bar to the settings popover and the finish card — one material, many sizes.

Spring-timed micro-interactions (cubic-bezier overshoot) give buttons a tactile, native feel without a single heavyweight animation library.

04 / Smart Zoom engine

How the auto-zoom thinks.

The zoom model is ported from the open-source OpenScreen project and tuned for feel. It’s the part that makes a raw screen capture look directed.

01

Dwell detection

After recording, it groups consecutive “still cursor” samples into candidate regions — the spots where you actually stopped to show something.

02

Snappy in, gentle out

Zoom-in ramps over ~600ms (fast, deliberate); zoom-out takes ~800ms (slow, calm). The asymmetry is what reads as intentional rather than twitchy.

03

Connected pans

Two regions close together don’t zoom out and back in — they pan across (~700ms), keeping the viewer locked on the content.

04

Yours to override

Every detected region is a chip on the timeline. Toggle one off, re-render, done — strength curves and gap filters keep transitions from ever colliding.

05 / The flow, screen by screen

Four states, zero friction.

The entire app is four moments — pick, record, render, finish — each its own floating surface. No main window, no project browser. It appears when you need it and disappears when you don’t.

Pick — choose a display or a single window, flip on camera, mic or Smart Zoom, and go.

Source picker with window previews — Source flyout — live window & display previews, one click to select.

Settings — zoom, padding and background grid — Settings popover — zoom amount, padding, and 40+ gradient / wallpaper backgrounds.

Record — a thin pill with a live timer; toggle camera, mic and zoom mid-take.

Recording pill bar over a desktop — The recording bar floats over your real desktop — pulsing record dot, tabular timer, instant stop.

Render — a calm ripple loader while the compositor builds every frame.

Rendering progress screen — Rendering — the canvas compositor draws background, padding, zoom and cursor frame-by-frame.

Finish — review, tweak the auto-zoom, and save to MP4 or WebM.

06 / Under the hood

How it’s built.

A lean native stack: Electron for capture and windowing, a hand-written canvas compositor for the look, and a WebCodecs/muxer pipeline for export. No editor framework, no cloud.

ElectrongetDisplayMediadesktopCapturerCanvas 2D compositor spring.jsOpenScreen zoom modelmp4-muxer (H.264)WebM · VP9SF Pro · system UI

A.

Capture

Electron’s desktopCapturer + getDisplayMedia grab a display or window stream, with optional camera overlay and microphone, plus cursor telemetry for the zoom engine.

B.

Compositor

A custom canvas pipeline redraws every frame: chosen background (gradient, wallpaper or blurred desktop), padding, a rounded device frame, the cursor, motion blur, and the spring-eased zoom transform.

C.

Smart Zoom

Cursor samples become zoom regions via dwell detection; strength curves and connected-pan logic (ported from OpenScreen) drive a buttery, directed camera that follows the action while zoomed.

D.

Export

Composited frames are muxed straight to MP4 (H.264, best compatibility) with mp4-muxer, or WebM (VP9, smaller), with a live progress read-out.

07 / Outcome

The result

A focused macOS app that turns an ordinary screen capture into something that looks produced — automatically, in seconds.

It proves a full pipeline end to end: native capture, a real-time compositor, an auto-direction zoom engine, and hardware-friendly export — all wrapped in a restrained, glass-dark interface that feels like it belongs on macOS. The kind of product where the best feature is the work you never had to do.