recmeme /lab

Catálogo de experimentos de visión por cámara que comparten los mismos modelos: HandLandmarker y PoseLandmarker de MediaPipe sobre tasks-vision. Cada experimento se monta sobre la misma cámara y los mismos detectores; sólo cambia la capa de interacción.

Memes & Combos

gestos compuestos que disparan overlays
listo

scuba

Mano abierta sobre la nariz + saludar con la otra: aparece el clip scuba en la esquina.

hands pose combo video overlay

Partículas & Física

simulaciones interactivas con manos y cuerpo
nuevo

burbujas 3D · WebGPU

Esferas reales con refracción, iridiscencia y bloom mediante three.js. WebGPU si está disponible, fallback a WebGL2. Tócate la nariz para crear; palma abierta las atrae.

three.js WebGPU hands pose 3D real
listo

burbujas 2D

Versión liviana en canvas2d. Misma lógica de nariz/palma sin three.js; ideal para navegadores sin WebGPU/WebGL.

canvas2d hands pose
nuevo

confeti / fuegos artificiales

Palma abierta = chorro continuo de confeti. Pulgar arriba = explosión de fuegos artificiales sobre la mano.

hands partículas canvas2d
nuevo

lluvia que esquivas

Gotas caen desde arriba; las desvías con manos y brazos. Si te cae en la cabeza pierdes vida. 3 vidas, dificultad creciente.

pose colisiones canvas2d

Juegos

objetivos, vidas, desafío
nuevo

pinza-laberinto · WebGPU

Pellizca con pulgar e índice para tomar un orbe y guíalo por un canal procedural sin tocar las paredes. Si rozas pierdes vida; si sueltas el pellizco cae y muere; si aprietas demasiado lo aplastas.

three.js WebGPU hands pinch procedural vida/score
nuevo

zoo squishy · WebGPU

Sandbox 3D con muñequitos tipo Gang Beasts: cuerpos verlet con animaciones de idle y peleas entre ellos. Pellizca para agarrarlos y moverlos a cajas transparentes; aprieta fuerte para aplastarlos.

three.js WebGPU verlet ragdoll IA sandbox

Pintura & Trazos

dibujar con el cuerpo
nuevo

dedo lápiz

Índice extendido = lápiz neón con color por mano (suavizado). Puño cerrado = borrador. Mantén la palma abierta ~1s sobre el lienzo para borrarlo todo.

hands canvas multi-color borrador
stack compartido
Cámara: getUserMedia · Modelos: HandLandmarker + PoseLandmarker (@mediapipe/tasks-vision, delegate GPU con fallback a CPU) · Loop: requestAnimationFrame sobre el último frame del video · Render: canvas 2d espejado sobre el video.
Todos los experimentos importan desde /src/shared/ los mismos landmarkers, camera, gestures y overlay.