grokbot-mocap
Live face motion capture projected onto an animated SVG avatar. Built by the NODE Sudbury community for the Grok event.
TypeScript MIT face-tracking grok mediapipe motion-capture svg vue
- Stars
- 1
- Forks
- 0
- Open issues
- 0
- Contributors
- 1
- Last update
- Oct 19, 2026
- Created
- Sep 10, 2026
Top contributors
-
hannanmax
30
commits
Ranked by commits on GitHub. Bots are left out.
Commit activity
Languages
- TypeScript 64.3%
- Vue 30%
- CSS 3.7%
- Python 0.8%
- HTML 0.8%
- JavaScript 0.3%
About this project
grokbot-mocap
Live face motion capture projected onto an animated SVG avatar. Point a camera at a person and the bot mirrors their head, eyes, blinks and mood in real time. Put a crowd in front of it and every face gets its own bot on a dark stage.
Built by the NODE Sudbury community for the Grok event. Everything runs in the browser; no data leaves the machine. MIT licensed, contributions welcome.
Try it: https://grokbot-mocap.vercel.app/live
Running it
Node 22 is required. The repo carries an .nvmrc.
nvm use
pnpm install # also downloads the MediaPipe models into public/mediapipe/
pnpm dev
- http://localhost:5190/live.html — the mirror. Click Start, then F fullscreen, H hide the overlay, C hide the camera preview.
- http://localhost:5190/ — the customiser: shape, colour and rest expression, plus an animation editor and PNG/SVG/GIF/MP4 export.
pnpm test # vitest, ~290 tests, no browser needed
pnpm build # vue-tsc --noEmit && vite build
What it does
One person in front of the camera gets the big bot. Head turns, blinks, wide eyes, squints and brows are mirrored continuously; a smile, a jaw drop or a frown pulls the eyes towards the matching expression. Raise a hand and a dock rises: colours on top, shapes below. Close your fist to grab the cursor, move sideways to pick, up or down to switch row, open your hand to lock the choice.
Two to eight people each get their own bot in a random shape and colour, laid out like a poster on a night background. Positions follow where people stand. Gestures are off in crowd mode.
URL switches: ?forme=goutte&couleur=bleu&expression=curieux presets the single bot,
?res=720 raises the capture resolution for a far camera, ?demo=5 previews a crowd
scene without a camera, ?worker=0 runs detection on the page thread.
How it works
src/bot/is the avatar engine: a pure, clock-freeengine.sample(t)that renders one body path and two eye holes from a radial profile and a head pose on a sphere.src/ui/detection.worker.tsruns MediaPipe's face and hand landmarkers in a Web Worker. The page only hands frames over and applies results.src/ui/mirror.tsturns blendshapes and the head matrix into the engine's levers;poing.ts,curseur.tsandrangee.tsread the fist, the hand position and the row;suivi.tskeeps each person glued to their bot across frames;scene.tsplaces a crowd.src/components/LiveView.vueis the mirror page;Dock.vueandFoule.vuethe dock and the crowd.
Every pure module has tests beside it. See INSTRUCTIONS.md for the design notes and tuning constants, and CONTRIBUTING.md to get involved.
License
MIT. See LICENSE. Not affiliated with, endorsed by or connected to x.ai; "Grok" and "x.ai" belong to their owners.