Hand — De la mano al papel
Una interfaz experimental donde la webcam se convierte en una forma de interactuar con papel digital.
Un experimento para explorar las posibilidades de interacción de una webcam.
Hand comenzó como una exploración simple sobre qué podía suceder cuando una webcam se utiliza como dispositivo de entrada. Empecé probando tracking y reconocimiento de manos directamente en el navegador, buscando formas de traducir movimientos físicos en acciones digitales.
El experimento terminó tomando la forma de un editor de texto donde la mano puede mover el cursor, hacer scroll, remarcar texto, navegar entre notas y descartar hojas. La interfaz utiliza el papel como metáfora física, convirtiendo cada nota en algo que puede manipularse y no simplemente visualizarse.
EL EXPERIMENTO
El proyecto evolucionó a través de una serie de pequeños experimentos, cada uno enfocado en explorar un aspecto diferente de la interacción mediante webcam:
01 — Seguimiento de la mano
Pruebas con la webcam, landmarks y mediciones propias de la mano.
02 — Navegación
Exploración del scroll y la navegación mediante movimientos de la mano.
03 — Pila de papel
Convertir pasar páginas y descartar notas en acciones físicas.
04 — Refinamiento de gestos
Separar poses ambiguas y agregar estados de confirmación.
05 — Overview
Usar las dos manos para pasar de una hoja individual al conjunto completo de notas.
Cada etapa surgió a partir de algo que no funcionaba como esperaba. Un swipe se activaba demasiado fácilmente, algunas poses se confundían entre sí o una acción necesitaba mayor confirmación. El sistema fue dejando de ser solamente un problema de reconocimiento para convertirse en un problema de diseñar cómo debían comportarse los gestos.
UN VOCABULARIO DE GESTOS
El sistema de interacción se construyó asignando una intención física a cada gesto.
| Gestos | Acción |
|---|---|
| Palma derecha → girar a la derecha | Crear una nueva hoja |
| Palma izquierda → girar a la izquierda | Volver a la hoja anterior |
| Índice | Mover el cursor de texto |
| Dos dedos / Victoria | Hacer scroll por la nota |
| Cuernos + arrastrar | Marcar o desmarcar texto |
| Puño cerrado | Arrugar y tirar la hoja |
| Dos palmas abiertas | Abrir el overview |
| Señalar + sostener | Seleccionar una nota desde el overview |
La mano no reemplaza al teclado. La escritura mantiene una interacción conocida, mientras que los gestos se utilizan para manipular el documento y recorrer el espacio de trabajo.
DEL GESTO A LA INTERACCIÓN
Recognizing a hand pose is only the first step. The tracking model can identify gestures such as an open palm, fist, pointing finger or victory, but some of the interactions needed by the editor are more specific. A pinch can look like a fist, a partial horns gesture can become ambiguous, and a natural palm movement can accidentally trigger a page change.
To make the interaction more reliable, the prototype combines MediaPipe with custom geometry, timing and contextual rules. Some gestures need to be held for several frames, destructive actions have a cooldown, palm rotations need to be rearmed, and certain gestures are disabled depending on the current state of the interface.
The result is a system that doesn't simply ask “what pose is this?”, but also “is this gesture intentional?”
THE PAPER INTERFACE
The visual language follows the physical metaphor. Notes behave like sheets of paper: they stack, rotate, move and remain visible underneath the active page. The active sheet is the only editable one, while the others create a sense of accumulated material.
Highlighting behaves like ink rather than a conventional UI selection. When a note is discarded, it doesn't simply disappear: the sheet fragments, crumples into a paper ball and flies toward the trash. The animation gives the digital object a physical consequence.
Two open palms reveal an overview of the workspace, shifting from interacting with one sheet to seeing the entire collection of notes
DETRÁS DEL EXPERIMENTO
Hand fue construido completamente en el navegador utilizando MediaPipe y tecnologías web estándar. El pipeline básico es:
01 — Webcam
02 — Landmarks de la mano
03 — Interpretación del gesto
04 — Estado de interacción
05 — Interfaz
El editor final surgió a partir de tres experimentos HTML independientes:
webcam_hand.html — primeras pruebas de tracking y gestos.
webcam_gestos.html — experimentos de navegación y scroll.
gestos_editor_papel.html — editor final que combina el sistema de interacción con la metáfora del papel.
El prototipo no utiliza build system ni un framework compartido. Se mantuvo deliberadamente liviano para poder desarrollar y probar cada experimento de manera independiente.
RESULTADO
Hand comenzó como una exploración de las posibilidades de interacción de una webcam y terminó convirtiéndose en un experimento sobre la relación entre gestos, metáforas físicas y objetos digitales.
No busca ser un producto terminado ni reemplazar el mouse y el teclado. Es una forma de explorar qué sucede cuando el cuerpo pasa a formar parte de la interfaz y comportamientos que conocemos del mundo físico pueden trasladarse a una interacción digital.
Hand — de la mano al papel.