MediaPipe Face Landmark Explorer
23 May 2026
An interactive tool for exploring all 478 MediaPipe face mesh landmarks using your webcam. Hover over any point to see its index, click to pin it, filter by face region, and copy landmark indices with one button. It runs entirely in the browser with no server or installation needed.
It started with curiosity about search data. I noticed people were searching for specific MediaPipe landmark indices and face regions, so I wrote a complete guide to all 478 face mesh landmark points. But a static reference felt incomplete. I wanted people to actually see the landmarks on their own face, so I built this interactive explorer to go with it.
The explorer was meant to be a companion to the blog, but the more I worked on it, the more it grew into its own thing.
Freeze frame and region filtering#
When I needed screenshots for the blog, I wanted consistent images showing each region on the same face pose. That meant I needed a freeze frame feature. So I built one. You hit a button or press Space, and the mesh freezes in place while you still hover and interact with all the points. I made it for the screenshots, but it turned out to be genuinely useful for anyone exploring the landmarks.
Custom colors and wireframe mode#
Then came the colours. Each region had its own colour, which looked great in the interactive explorer but was distracting in blog images where you only want to highlight one area. So I added a theme panel where users can pick custom colours per region, adjust the dot size, and toggle a neon glow effect.
One happy accident came from the wireframe mode. I was switching tabs and the camera feed dropped, but the mesh kept rendering on a black background. It looked striking, so I kept it as a dedicated mode. It ended up being perfect for the blog images too, where a clean wireframe makes the landmark points much easier to read. Since the explorer also lives embedded in the blog via an iframe, I cleaned up the layout with container queries so it works at smaller sizes and stays usable on narrow screens.
What started as a blog illustration turned into the most useful part of the article. The blog itself kept growing too. I added tables in Sanity to present the landmark data per region, embedded the explorer as an iframe so readers can try it without leaving the page, and made section headings clickable for easy linking. No other article on this site pushed me to build this many features around it.
