Back to Playground
Computer VisionGesture UIMediaPipeChrome Extension Concept

Air Draw

A gesture-controlled drawing tool built in the browser — and the problem it was actually designed to solve.

Air Draw in action
Live experiment

Draw with just your index finger — no touch, no stylus.

Try it live

The Problem

Presenting is harder than it looks.

I present a lot — design reviews, research walkthroughs, stakeholder syncs. And every single time, I run into the same friction: I want to point something out on screen. Circle a specific UI element. Draw attention to one detail buried in a dense layout.

The options are clunky. Laser pointer tools require extra software. Screen annotation apps slow everything down. Moving your mouse erratically doesn't communicate the same way a quick circle or underline does.

I kept thinking: your hand is right there. Why can't you just point with it?

The Hypothesis

What if you could draw on any screen with just your finger?

The concept I had in mind was a lightweight Chrome extension — something you'd toggle on before a presentation. Your webcam would track your index finger in real time, and as you moved it in front of the screen, it would draw directly on top of whatever page or slide you had open.

No extra hardware. No context switching. Just raise your hand, point, draw, and move on.

The extension concept

Toggle on → finger tracked → draw on any page → toggle off, canvas clears.

Clean. Invisible when you don't need it. Immediately useful when you do.

What I Built

A proof of concept. Fast.

I built Air Draw as a browser-based prototype using MediaPipe for hand landmark detection. Your index fingertip is tracked in real time through the webcam, and as it moves, it leaves a trail on an HTML canvas layered over the page.

The goal wasn't a polished product — it was a working answer to a specific question: Is this technically feasible with browser APIs alone? Turns out, yes. The latency is low enough, the tracking is accurate enough, and the overall feel is surprisingly natural.

I used Claude and Cursor to accelerate the build — not to avoid thinking, but to collapse the time between idea and testable prototype. From hypothesis to live experiment: under 48 hours.

MediaPipe HandsHTML Canvas APIWebcam / getUserMediaVanilla JSDeployed on Vercel

What This Is Really About

This isn't about vibe coding. It's about problem-solving.

Air Draw exists because I noticed a real friction point, formed a specific hypothesis, and then validated it by building the smallest possible thing that could answer my question.

That's the part I want to be known for — not that I can ship fast with AI tools (though I can), but that I start from a genuine problem and stay focused on it through execution.

Try Air Draw