🌐 Live Demo · 中文 · 日本語
A 3D gesture whiteboard built with Next.js, MediaPipe Gesture Recognizer, and Three.js. Draw colorful 3D balloon strokes in a fish-tank-like scene using nothing but your hands — no mouse, no touch required.
| Gesture | Action |
|---|---|
| 👌 Pinch (index + thumb) | Draw a 3D balloon stroke |
| 🖐️ Open palm wave | Generate wind that moves balloons |
| ✊ Hold fist 3 s | Clear all balloons |
| ✌️ / 👍 Hold 3 s | Toggle light / dark theme |
- 3D physics — balloons float, drift with sway, bounce off all six walls, and collide with each other
- Gesture wind — open-palm motion creates a directional breeze that nudges balloons
- Toggles — independently enable / disable balloon floating and gesture wind
- Themes — light and dark palettes with smooth transitions
- i18n — UI available in English, 中文, and 日本語
- Privacy-first — all processing runs in the browser; camera footage is never uploaded
- Next.js 15 — React framework (static export for GitHub Pages)
- Three.js — 3D rendering (TubeGeometry balloons, physics loop)
- MediaPipe Gesture Recognizer — real-time hand landmark & gesture detection
- NextUI — UI component library
- Tailwind CSS — utility-first styling
npm i
npm run devOpen http://localhost:3000 and allow camera access.
- Danmaku Mask — another MediaPipe + Next.js project
