A free computer vision demo — play it in your browser, no install. Hand-tracking particle galaxy in a single HTML file. MediaPipe landmarker drives a Canvas 2D force field.
Vote and save it — free account with email or sign in with GitHub
Made this, @zly060115? See how many people played it → or use email
📅 Three new games every day, no account needed · Play today’s three →
GitHub may ask you to sign in, then to let VibeCruiser “Verify your GitHub identity” and “Act on your behalf”. We only read your profile and email, and never post anything.
No account needed to save ♥ or react 🔥: they’re under the game. Or vote with email.
Open the live demo Source on GitHub一个零依赖、零构建的实时交互作品:摄像头 → 手部骨架 → 粒子力场。
⚠️ 浏览器规定:摄像头和麦克风只在 localhost 或 HTTPS 下可用。 直接双击 index.html(file://)会被拦截,必须起一个本地服务。
MediaPipe Tasks Vision 的 HandLandmarker, VIDEO 模式、最多 2 只手、GPU 优先(失败自动回退 CPU)。 每帧只在视频帧更新时推理一次(约 30fps),渲染循环独立跑 60fps。
21 个关键点先做坐标映射(视频 → 屏幕,cover 裁剪补偿 + 水平镜像), 再经过指数平滑,手抖被吃掉,留下的是「有重量」的移动。
strength 和 swirl 由「伸展手指数 / 5」实时插值:
Canvas 2D,加法混合(lighter)+ 半透明覆盖做拖尾。 每个粒子是一张预渲染的径向渐变精灵(52 档色相,按半径从金黄到橙红插值), drawImage 缩放绘制,比逐帧建渐变快一个数量级。
粒子规模按屏幕面积自适应:约 2200 星云粒子 + 1200 闪烁星点 + 最多 560 指尖火星。
任一条触发都会调用 snapBlast():所有粒子获得径向冲量, 速度上限临时从 13 放开到 57(boost),所以冲击真的打得出去。
Built something like this? Submit your vibe — free account, takes a minute. How listing works.
Claim it: create a free account, then press CLAIM THIS in the cruiser. Put the badge below in your README or on your demo page first; that link is how we know it's yours.
Your project is on the cruise, loaded live from your own site. Put the badge in your README or on the demo page: it shows your live play count, it links back to this page, and everyone who lands here is one click from running the real thing.