The technology behind
Desktop Tracer

Desktop Tracer uses real-time homography estimation to lock your reference image to a physical point in the camera's field of view. When you "lock" your overlay, the app computes a 3×3 perspective transformation matrix between the reference corners and corresponding points on your canvas.

As the camera moves or the perspective shifts slightly, the matrix is recomputed each frame and the overlay is re-warped to compensate — keeping your reference perfectly registered to the paper beneath it. This is the same foundational technique used in professional motion graphics and AR headsets, running entirely in your browser at 30+ fps.

Reference images pass through a client-side processing pipeline built on the HTML Canvas 2D API and OffscreenCanvas for non-blocking rendering. Each filter mode — grayscale high-contrast, edge detection, inversion — applies a pixel-level transformation to the image data array.

Edge detection uses a Sobel operator convolution to approximate the image gradient magnitude at each pixel, then thresholds the result to produce clean line drawings from photos. The entire pipeline runs off the main thread where supported, ensuring the camera feed never stutters during processing.

When you pick a color from your reference, Desktop Tracer converts it from sRGB to the CIELAB color space — a perceptually uniform space where Euclidean distance corresponds to perceived color difference. The sampled color is also translated into HEX, RGB, and CMYK values for practical reference.

We then compute the ΔE2000 distance (the international standard for color difference) between your sampled color and a bundled Pantone reference set, and rank by perceptual closeness. This means "closest match" is what your eye sees as closest — not just nearest on an RGB number line.

Your camera feed is processed entirely inside your browser using the WebRTC getUserMedia API and the HTML Canvas API. No video frames, pixel data, or images are ever transmitted to our servers. The camera stream never leaves your machine.

Reference images you upload are stored either locally in your browser session or, if you're logged in, attached to your project record in our database — but the actual video processing, overlay rendering, and AR computation are entirely local. We have no access to what you see through your camera.

Desktop Tracer is a pure web application built with React, running entirely in a modern browser. There is no Electron wrapper, no desktop installer, and no browser extension to install. The only requirement is a Chromium-based browser (Chrome, Edge, Arc, Brave) or Firefox for full WebRTC and OffscreenCanvas support.

All compute — AR tracking, image processing, color math — runs on your local CPU via optimized JavaScript. For Pro users, AI color palette generation uses our server-side LLM integration, but this is the only network call made during a session beyond loading the app itself.

The overlay rendering loop runs at the display's native refresh rate using requestAnimationFrame. Camera frames are read directly from the video element onto a canvas without intermediate copies where possible, minimizing garbage collection pressure. Layer compositing uses hardware-accelerated CSS transforms for translation, scale, and rotation to keep the main rendering path on the GPU.