Mediapipe games you can play right now
Dozens of mediapipe games, each running live on its creator's own site: some of them vibe-coded with AI, all of them playable in your browser with nothing to install. Press a card to play one on its own page, or start the cruise to ride through them one after another.
MediaPipe is Google's toolkit for tracking hands, faces and bodies from a camera, fast enough to run inside a web page. The projects on this stop turn that into controls: games you play by waving, drawing in the air, or pulling faces at your webcam.
Made one of these? See how many people played yours → or use email
fog mirror
Blow on your screen to fog it up, then write on it — just like a steamy bathroom mirror, powered by your breath and your hands. Everyone…▶ 3 plays this week · 🔥 2 · 😂 2 · 🤯 1
gesture flower
用摄像头识别手部 21 个关键点，把「手掌张开度」映射成粒子花朵的绽放程度。 握拳 → 花苞闭合；张开五指 → 粒子向外绽放。 支持单手与双手两种交互模式，并带有一段种子 → 发芽 → 花苞 → 开花的生长动画。 👉 点击打开在线 Demo（无需安装，允许摄像头即可）…
broken feather
Your hand is the controller. A playful browser arcade game where you aim with a finger gun and flick your hand upward to shoot flying…
camellia bloom
在线预览 → （HTTPS，摄像头可用；桌面 Chrome / Edge 体验最佳） 一握手，花收成一枚苞；一张开手掌，白山茶便一层一层散开，跟着手走，指尖还能轻轻拨动花瓣。 Three.js 粒子 + MediaPipe Hands 21 关键点 + 自定义 GLSL，纯原生…
HumanPong
A retro 80s-style Pong game where you control the paddles with your body using your webcam. No controllers needed — just your hands or your…
AETHER HAND
Welcome to Aether-Hand, a "funny business" project that turns your webcam into a gateway for the Mystic Arts. This isn't just a shiny…
- Subway IRL Jog in place in front of your webcam to run through Mumbai. Step to change lanes, jump to jump, squat to roll. Free, open source, and it…
- hand tracking pong A modern, interactive twist on the classic arcade game Pong! This browser-based game uses your webcam and Google's MediaPipe Hands to let…
ParticleSystem
Real-time 3D particle system controlled by hand tracking using Three.js and MediaPipe for simple use view design ....update
- hand gesture project A browser-based hand-gesture controlled visual experience. It uses MediaPipe Hand Landmarker to track your hand from a webcam in real time…
- HoloPalm HoloPalm is a web-based augmented reality experiment that visualizes your hands as dynamic particle systems in real time using your device…
lizi
一个基于 Three.js 和 MediaPipe 的高性能粒子可视化交互系统。通过摄像头捕捉手势，实现与数万个粒子的实时互动，支持自定义文字和图像生成。 🚀 高性能渲染：利用 WebGL 和 Three.js 渲染超过 50,000 个粒子，保持流畅的帧率。 握拳…
magic particle fingers
An interactive web experience using AI hand tracking to control magic particles and romantic shapes. (توضیحات فارسی در پایین صفحه) 👉 Click…
- quantum dust An interactive WebGL particle visualization built with Three.js and MediaPipe Hands. Control thousands of glowing particles using real-time…
cats cradle
A digital take on the classic string game. Hold both hands up to your webcam and glowing neon strings stretch between your fingertips. Pull…
sfumato
Interactive browser artwork (2026) — blurred webcam, hand-tracked words, fleeting lines of meaning. Live demo · Chrome or Arc on desktop ·…
stardust hand
一个零依赖、零构建的实时交互作品：摄像头 → 手部骨架 → 粒子力场。 ⚠️ 浏览器规定：摄像头和麦克风只在 localhost 或 HTTPS 下可用。 直接双击 index.html（file://）会被拦截，必须起一个本地服务。 MediaPipe Tasks…
substrate subconscious
同一个现实世界，在不同人的扭曲认知里，会变成完全不同的世界。 本工具把「行为信号 → 认知维度 → 心象世界」渲染成一段人人看得懂的 3D 隐喻短片。 这不是读心术，也不是心理诊断。 它采集的是*行为信号*（面部微表情、视线、语音语调、用词），…
- keep ups A football keep-ups game in the browser, using webcam motion tracking and 3D physics. Just your webcam, knees, and feet! Allow webcam…
void rhythm
"Nothingness is not the absence of everything, but the presence of nothing." Void Rhythm is an experimental, interactive audio-visual…
- summer 一个基于 Three.js + MediaPipe Hands 的 3D 粒子交互小游戏 通过 隔空手势 控制粒子的聚拢、扩散与旋转。 请使用 Chrome / Edge 浏览器 并允许摄像头权限 ↔️ 左右移动手掌：控制整体旋转方向。…
- Interactive Visualizer This is an interactive art installation that transforms human movement and sound into a mesmerizing particle symphony. By leveraging…
interactive tulip
🚀 Experience Live Webcam Interactive Bloom → A realistic procedural 3D-shaded tulip rendered on an HTML5 2D Canvas context without image…
3d saturn particles
An interactive 3D math-physics engine powered by AI hand tracking and gesture recognition. یک موتور رندر سهبعدی ریاضیاتی و تعاملی بر پایه…
shadow room
◐ S H A D O W R O O M A live 3D wallpaper of a dark living room. Your webcam silhouette casts a real shadow into it, the view moves with…
BambooCicada
浏览器会自动打开 ` 必须通过服务器访问(摄像头手势需要 localhost/HTTPS 安全上下文, 直接双击 index.html 无法使用全部功能)。 线性项(层流)+ 二次项(湍流)建模,外加竹签与竹筒的静摩擦; 最大持续搓动平衡转速约 2300 RPM,松手后约 10…
universe hands
Hand-driven visual instruments on your live webcam. Pick a visual from the hub, control it with your hands, no mouse, no UI chrome…
gesture blooming flower
MediaPipe Hands × Three.js WebGL 粒子花朵手势交互艺术 一款纯前端无服务器、基于视觉手势驱动的 3D 粒子交互实验。摄像头实时追踪手部 21 个骨骼关键点，计算手掌张弛度（Tension），驱动指尖粒子花朵聚拢闭合与盛大绽放。 (注：建议在 PC…
hand gesture particle effects
An interactive browser experiment that uses your webcam to detect hand gestures and trigger cinematic particle effects in real time. Open…
webcam ink
Ink runs from your fingertips into water, over your own webcam picture, with the hand tracking drawn on top. **Try it: (allow the camera…
- webcam dust A webcam effect for the browser: your body as a figure of flowing gold dust, with the tracking that drives it drawn on screen. **Try it…
- webcam ski A quiet, endless powder run that you ski with your body. Stand in front of your webcam: lean to carve, crouch to tuck, hop to jump, swing…
dimension strike
扮演高维文明，操控一颗行星的温度与气压，观察其上文明的兴衰；或投放二向箔把它压成二维， 或用引力把它挤碎。行星可以像地球仪一样抓住转动——横向拨自转、纵向扳倾角，松手后带惯性 滑行。支持摄像头手势输入：握拳 = 引力挤压，摊开手掌 = 二向箔投放。…
interactive media
웹에서 직접 만져보는 인터랙티브 미디어 기법 17가지를 한 페이지에 담았습니다. 포인터, 스크롤, 소리, 카메라와 센서. 화면을 바꾸는 입력은 생각보다 다양합니다. 이 사이트는 각 기법을 짧은 설명 + 바로 만져볼 수 있는 데모로 묶어 위에서 아래로…
handfield
Move tens of thousands of glowing particles with your hands, using just your webcam. Pinch and they gather into a swirling ball at your…
airwave
Play electronic dance music in mid-air. Two hands, no controller, no install — one HTML file that runs a 124 BPM synth engine off your…
particle interaction
→ 在线演示 · 建议用桌面版 Chrome / Edge 打开 基于 Three.js r160 的 Instanced 渲染管线：以低多边形 Quad 为基础几何体，用 InstancedBufferGeometry + 三个…
repique code
Un instrumento de percusión candombera que se toca con las manos en el aire. La cámara ve tus manos. Un modelo de visión las convierte en…
quantum garden
《牡丹亭》× 量子观测 × 浏览器交互装置 一次由观看触发的游园：园林未先存在，人物未先定形，结局也不在入口处写好。 《量子游园》是一件八幕浏览器交互作品。它从汤显祖《牡丹亭》的“游园、惊梦、寻梦、写真、离魂、拾画、幽媾、回生”中抽取一条情感路径，再把观测、坍缩、退相干、不可克隆…
- Interactive 3D Particle System "From blank canvas to a physics-based, hand-tracking engine in exactly 59.3 seconds." This project is a real-time, interactive 3D particle…
solar atlas gesture
Pinch from Saturn until the Solar System becomes a dot, then keep going — past the nebulae inside our galaxy, out through the Local Group…
hui gesture bagua
中文 · English · 在线体验 一个通过单手手势、鼠标和键盘控制的生成式八卦动态体验。 本仓库是 HUI 正式体验的公开视觉演示版，保留同一套十四层八卦视觉结构与手势动效，但不包含商业产品中的起卦、AI、支付、邮箱或服务器功能。公开源代码仅允许个人学习、研究与非商业娱乐使…
gesture music
Play chords in the air. Your webcam is the instrument. ▶ Try it live — dj-hands.com Whole songs can be saved by name and reopened later…
piano cat
Pick a classical masterpiece. Mime it at your webcam. Every stroke of your hands plays the next beat — so if you slow down, the music slows…
projeto x
Experiência interativa de visão computacional e arte generativa controlada por gestos. Transforme os movimentos das mãos em gravidade…
Eye Floaters
The cobwebs drifting in your eyes you've stopped paying attention to. A browser-based art piece that brings the floaters in your eyes onto…Vibe-coded
- flying swords Ten thousand glowing swords controlled by the movement of your hand, right in the browser. Hand tracking uses your webcam, with no install…
bloom
一场由 Three.js 粒子系统 与 MediaPipe Hands 驱动的实时手势花园。手掌被摄像头捕捉后，21 个手部关键点会转化为一朵会呼吸的光粒子花：握拳时花瓣收拢成发光的苞，张掌时粒子向外绽放，花朵随掌心移动，并在指尖留下一枚微光。 只需要 Node.js…
IRLSurfer
Webcam body-tracking game controller: MediaPipe pose estimation turns side-steps, jumps and ducks into keyboard input in real time…
DEWGLASS
Where dew meets reflection. BREATHE · TOUCH · REVEAL A real-time liquid mirror for your webcam. Condense digital fog with natural facial…
mj thriller pose game
A browser-based webcam pose game where your body becomes the controller. Match iconic dance poses to unleash attacks and survive waves of…
conspace rooms
Add ?lang=ru or ?lang=en to any page for the language. The mirror is a backup copy: ?mirror keeps you on GitHub Pages and the browser…
soul strings
A camera-driven string instrument. Your hands become constellations; the screen becomes a cosmic harp.
somnia filaments
spatial experience built with three.js and mediapipe
Gesture Flappy Bird
A modern twist on the classic Flappy Bird, controlled entirely using hand gestures via your webcam. Built using HTML5 Canvas + MediaPipe…
mist web
一面会呼吸的雾镜。用鼠标、触屏或隔空手势擦开雾气，留下片刻清晰。 A small interactive fog mirror built with Canvas and vanilla JavaScript, with optional in-browser hand…
StarryTarot
Starry Tarot is a browser-based gesture control tarot game. Players browse a floating tarot deck with hand movement, pinch to draw three…
pop pop popper
A free, private, installable browser game you play with hand gestures. Pinch or grab balloons to pop them, chain combos, grab golden…
bunny run
A little bunny. A field of flowers. One more jump. Jump with your body or press Space · 体感跳跃 / 空格操作 A playful 3D endless runner with a…
naruto rasengan gesture effects
A browser-based interactive effect inspired by Naruto, built with MediaPipe Hands. After enabling the camera, users can open their palm to…
Hand dance
Hand Dance is an interactive psychedelic art generator that transforms hand movements into mesmerizing visual effects using real-time…
domain expantion malevolent shrine
An interactive, real-time hand-gesture-activated visual experience inspired by Ryomen Sukuna's Domain Expansion from Jujutsu Kaisen. This…
cats cradle
Cat's Cradle is an innovative, interactive web application that brings the classic string game into the digital realm. Using real-time hand…
air fruit slicer demo
这是一个很小的网页实验：坐久了以后，不想打开健身 App，也不想开始一套完整课程，就站起来，对着电脑挥 5 分钟手。 用摄像头识别整只手中心，不追踪单根手指。 屏幕指定目标水果和目标区域，比如“先切西瓜 · 左侧”. 分成热身、主运动、冲刺、放松四段。…
a little answer
原生 JavaScript、Canvas 2D、MediaPipe Tasks Vision 与 Vite。GitHub Actions 自动测试、构建并发布到 GitHub Pages。 仓库已公开并启用 Pages，由…
- fruit ninja A browser-based Fruit Ninja game using hand-tracking. No additional hardware required - just a webcam. Hand tracking: Uses MediaPipe for…
p5js handsteer
카메라 앞에서 두 손을 들면 화면 속 판이 기울고 소리가 어긋납니다. 손을 올리면 빨라지고, 한쪽 손을 내리면 그쪽으로 기웁니다. 두 손을 어깨 위로 들면 시작 신호가 켜집니다. 관객이 폰으로 적어 보낸 문장은 그 화면 위로 떠오릅니다. 웹캠 한…
gesture Christmas tree 3d with photo
原本只是想画一棵普通的 3D 圣诞树，但觉得不够酷，于是加上了 手势识别 和 粒子特效。现在你可以通过摄像头「隔空」控制这棵树，还能把自己喜欢的照片挂上去。 这不是那种静态的网页贺卡，而是一棵由 几千个粒子 组成的动态树。接入了 Google 的…
cubecast
Hand-tracked shapes you draw with your fingertips, right in the browser. Point a webcam at your hand and a cube — or a freeform 2D/3D shape…
SR1 Creator
A browser re-creation of the Saints Row (2006) character creator that renders the game's real head and body meshes, morph targets, hair…
ethereal path
An interactive web artwork — an off-axis projected descent from beneath a water surface into a nebula, controlled by head and hand movement…
aether currents
▸ LIVE — full experience Conduct sound with your hands. A browser-based instrument: on-device hand tracking drives granular audio synthesis…
gesture balloon game
基于摄像头手势识别的浏览器小游戏。张开手掌移动，握拳抓取飘动的气球！ 使用 MediaPipe Hands 进行实时手势识别，纯前端实现，无需安装任何依赖。 ✊ 握拳 抓取气球（必须完成完整动作才触发）. 🔥 连击系统 - 2 秒内连续抓取累积 Combo，3…
- creative coding hand particles Hand Particles is an experimental web-based creative coding project that combines real-time hand tracking with a dynamic 3D particle…
MagnoGlove Demo
Control virtual electromagnetic gloves with your bare hands. Your webcam tracks both hands in real time — make a fist to pull metallic…
- VogelSimulator Play now in your browser — no install required, works on desktop and mobile. 📖 Read the full story: How we built a gesture-controlled bird…
hand controlled webcam
A browser-based webcam app controlled entirely by hand gestures — no installs needed! Built with MediaPipe Hands + WebRTC + Canvas API…
GestureKart AI Racing
AAA Gesture-Controlled Racing — The world's first browser-based gesture racing experience Virtual Steering is a premium browser racing…
3Dyaozao
手作八步流程 立意 → 备泥 → 拉坯 → 修坯 → 装饰 → 施釉 → 烧成 → 成器。左侧「工艺工坊」面板会随步骤切换参数项，并始终提示当前处在第几步。 手势驱动 基于 MediaPipe Hands…
breath mirror
A browser-based foggy glass you share with someone far away. Open your mouth to fog it up, wipe it clear with your hand (or a finger on…
musixperience
Small browser experiments with spatial audio, where your hands and your head are the controls. Put your headphones on. Every instrument of…
quantum neural ar
Real-time 3D neural network controlled entirely by hand gestures : no backend, no install, runs in the browser. A browser-based…
Questions about mediapipe
What is MediaPipe?
An open-source set of machine learning models and tools for tasks like hand tracking, face landmarks and pose detection, with a version that runs in the browser.
Does my camera video get uploaded?
MediaPipe's web models run on your own device, so the tracking itself needs no server. Each project is made independently, so check its page if you want to be sure.
Why is the camera not starting?
The browser asks for permission first; allow it, and close other apps using the camera. These projects also need a camera, so a computer without one cannot play them.