HandType: Sculpting Letterforms With Your Hands [Free+Open Source]
By Justin Wetch
GITHUB REPO: https://github.com/justinwetch/HandType
LIVE DEMO: https://handtype.vercel.app/
HandType is a gesture-controlled typography workstation. You point a webcam at your hand, rotate your palm, and font parameters change in real time. Open palm rotation adjusts the active modifier. Peace sign cycles through the alphabet. Five modifiers (weight, slant, width, pixel, corner radius) let you sculpt any letterform procedurally, and you can upload any TrueType, OpenType, or WOFF file to work with. Everything runs client-side in the browser.
I built it because I've been thinking about gestural interfaces since trying an Apple Vision Pro demo and falling in love with the feeling of reaching into space and having the machine just respond. A mouse is a translation layer. Your hand rotating while a letterform mutates underneath it is something more direct, and I wanted to see what that directness felt like in a creative tool.
How it works
MediaPipe Hands runs in the browser, tracking 21 landmarks per hand. Early versions used Euler angles for palm rotation, which meant jittering and gimbal lock when you held your hand upright. Switching to quaternion-based rotation fixed that entirely, smooth parameter adjustment regardless of hand orientation or camera angle.
The font rendering is procedural. Opentype.js parses whatever font you load and decomposes every glyph into editable bezier paths. The five modifiers transform those paths mathematically: slant shears the coordinate space, width scales horizontally, weight expands strokes along path normals, corner radius rounds the joints. Pixel was a happy accident. The original plan was a contrast modifier, but it kept breaking path legibility, so I replaced it with coordinate quantization, basically snapping the bezier points to a grid. At high values it creates this digital decay effect that ended up being my favorite thing in the whole project.
All of this renders to a Canvas 2D context every frame. The grid, the glyph, the HUD telemetry, the branding, everything redraws.
The aesthetic
The interface went through a cyberpunk phase early on, cyan glows and scanlines, the whole thing. That energy was fun for about a day. The version that stuck draws from 1970s industrial instrument design: warm charcoal background, burnt sienna for active states, IBM Plex Mono throughout. Sharp corners everywhere, reticle brackets for framing, dot-leaders between labels and values. The internal mechanics of the system, bezier handles, coordinate grids, parameter readouts, are promoted to primary visual elements. The glyph sits center stage inside targeting brackets like something on an oscilloscope.
I've been calling the aesthetic "forensic mechanical." The idea is that you're watching the letterform's skeleton respond to your body, and the interface should make that construction legible, even beautiful. Process as display.
What's next
I've been exploring gesture and spatial interfaces more generally, and HandType is one piece of that. Typography felt like the right starting domain because the parameters are continuous and the feedback is immediate, you can see exactly what your rotation is doing to the form in the same moment you do it. I want to keep pulling on this thread.
The code is on GitHub: github.com/justinwetch/HandType