Hand-Frame Realtime FX — Ventana IA en tiempo real con las manos
Patrón destilado de blendi-remade/finger-frame-effect-fal (27⭐, JS, agosto 2026).
Qué es
Página estática sin build y sin backend: al hacer el gesto "marco" con dos manos ante
la webcam, el área entre los dedos se convierte en una ventana a un mundo IA generado
en tiempo real (modelos: Decart Lucy 2.5 / FLUX.2 klein vía fal, BYO API key).
El valor no es la demo — es la arquitectura de dos velocidades y el pipeline de
tracking robusto, ambos reutilizables para cualquier tool de navegador con cámara
(preference de David: espectáculo visual primero).
El patrón central: tracking local rápido + generación remota lenta
- El tracking de manos, la máscara del quad y el contorno animado corren locales a
framerate de pantalla. La generación IA va a su ritmo (5-8 fps o menos).
- Compositing: la salida de la IA se dibuja alineada a pantalla y se revela SOLO a
través del quad tracked con
canvas clip + outline discontinuo y puntos de esquina.
- Clave conceptual: el modelo nunca sabe que existen los dedos — no recorta, no
enmascara, restiliza todo el frame. La costura son los dedos tracked localmente →
el efecto sigue siendo impecable aunque el modelo vaya por debajo del framerate.
- Sin key de fal: fallback a filtro local hue-shift (la demo nunca queda muerta).
Pipeline de tracking de quad con manos (audited, del README original)
- MediaPipe Hand Landmarker, dos manos por frame.
- Esquinas ordenadas anatómicamente (dedos cruzados → render "corbata", no quad roto).
- Gates de spread y área con histéresis (evita flapping gesto/no-gesto).
- Rechazo de teletransporte (saltos > umbral se descartan).
- Suavizado adaptativo a velocidad + dropout hold (mantiene última pose unos
frames si la mano se pierde) + presence fade (aparición/desaparición suave).
Este pipeline vale igual para cualquier gesto→máscara en Canvas 2D sin IA.
Integración con fal realtime (dos backends, dos modos)
- Lucy 2.5 (v2v true realtime): sesión WebRTC — sube la cámara, devuelve el stream
restilizado motion-locked. Cambio de estilo = mensaje de prompt por el WebSocket de
signaling (SIN reconectar). Retry con backoff si hay capacidad arriba.
- FLUX.2 klein (edición por frames): JPEG espejado 768×768 cada 125 ms con
output_feedback_strength: 0.9 + seed fijo → coherencia temporal (cada frame se
siembra con un poco del output anterior). El 16:9 se aplasta a cuadrado (no
recorta): la distorsión se cancela en pantalla y el marco puede estar en cualquier sitio del plano.
- Facturación: Lucy se cobra por sesión conectada, klein por frame. Nunca dejar una
sesión Lucy abierta — desconectar al cambiar de estilo o cerrar tab.
- Prompts redactados por backend (Lucy: "Change the style of the video to…" con
detalles visuales concretos; klein: "Turn this into…").
Truco de testabilidad que copiar SIEMPRE
?demo → feed sintético con landmarks falsos: ejercita tracking + compositing sin
cámara y sin llamadas API. Para cualquier herramienta de webcam: modo demo de datos
sintéticos + coste cero.
Familia finger-frame (4 generaciones, por latencia)
| Variante |
Técnica |
Latencia |
| finger-frame-effect (sophiamyang) |
Canvas 2D local (Van Gogh, glitch) |
ninguna |
| …-effect-ai |
Gemini (offline video edit), vídeo grabado |
minutos |
| …-effect-lucy |
Decart Lucy vía API directa |
casi realtime |
| este repo |
Lucy + klein vía @fal-ai/client |
casi realtime |
Pitfalls
- Repo sin licencia definida → usar como REFERENCIA de patrón, no copiar código.
- La key de fal vive solo en el navegador (localStorage opcional) y se canjea por
session tokens de corta vida — patrón BYOK correcto, respetarlo en tools propias.
- Hand tracking con dos manos se degrada con oclusión/luces malas: los gates con
histéresis + dropout hold existen precisamente por eso — no quitarlos al podar código.
- klein es frame-por-frame: la geometría "sueña" (dreamy). Para motion-lock real (que
el parpadeo del usuario aparezca dentro de la ventana) hace falta Lucy/WebRTC.
Verificación
- Con
?demo: el quad sigue las landmarks sintéticas a framerate de pantalla, sin latencia.
- Cambiar de estilo no reconecta la sesión (DevTools → el WebSocket sigue abierto).
- Al cerrar la pestaña no queda sesión Lucy facturando (ver dashboard de fal).
- Ocluir una mano 1 s → el marco debe mantenerse (dropout hold) y desvanecer tras el umbral.
Referencias
- Repo: https://github.com/blendi-remade/finger-frame-effect-fal
- Docs modelos: fal.ai/models/decart/lucy-2-5/realtime · fal.ai/models/fal-ai/flux-2-klein-realtime/realtime
- Explorado por stars-explorer: 2026-09-03
- Relacionados:
tools/browser-local-tools, computer-vision/openpose-pose-estimation, vision/onnx-webgpu-inference
1---2name: hand-frame-realtime-fx3description: Use al crear demos de cámara y manos IA en tiempo real.4---56# Hand-Frame Realtime FX — Ventana IA en tiempo real con las manos78> Patrón destilado de `blendi-remade/finger-frame-effect-fal` (27⭐, JS, agosto 2026).910## Qué es1112Página estática **sin build y sin backend**: al hacer el gesto "marco" con dos manos ante13la webcam, el área entre los dedos se convierte en una ventana a un mundo IA generado14**en tiempo real** (modelos: Decart Lucy 2.5 / FLUX.2 klein vía fal, BYO API key).1516El valor no es la demo — es la **arquitectura de dos velocidades** y el pipeline de17tracking robusto, ambos reutilizables para cualquier tool de navegador con cámara18(preference de David: espectáculo visual primero).1920## El patrón central: tracking local rápido + generación remota lenta2122- El tracking de manos, la máscara del quad y el contorno animado corren **locales a23 framerate de pantalla**. La generación IA va a su ritmo (5-8 fps o menos).24- **Compositing:** la salida de la IA se dibuja alineada a pantalla y se revela SOLO a25 través del quad tracked con `canvas clip` + outline discontinuo y puntos de esquina.26- Clave conceptual: **el modelo nunca sabe que existen los dedos** — no recorta, no27 enmascara, restiliza todo el frame. La costura son los dedos tracked localmente →28 el efecto sigue siendo impecable aunque el modelo vaya por debajo del framerate.29- Sin key de fal: fallback a filtro local hue-shift (la demo nunca queda muerta).3031## Pipeline de tracking de quad con manos (audited, del README original)32331. MediaPipe **Hand Landmarker**, dos manos por frame.342. Esquinas ordenadas **anatómicamente** (dedos cruzados → render "corbata", no quad roto).353. Gates de **spread y área con histéresis** (evita flapping gesto/no-gesto).364. **Rechazo de teletransporte** (saltos > umbral se descartan).375. **Suavizado adaptativo a velocidad** + **dropout hold** (mantiene última pose unos38 frames si la mano se pierde) + **presence fade** (aparición/desaparición suave).3940Este pipeline vale igual para cualquier gesto→máscara en Canvas 2D sin IA.4142## Integración con fal realtime (dos backends, dos modos)4344- **Lucy 2.5 (v2v true realtime):** sesión WebRTC — sube la cámara, devuelve el stream45 restilizado motion-locked. Cambio de estilo = mensaje de prompt por el WebSocket de46 signaling (SIN reconectar). Retry con backoff si hay capacidad arriba.47- **FLUX.2 klein (edición por frames):** JPEG espejado 768×768 cada 125 ms con48 `output_feedback_strength: 0.9` + seed fijo → **coherencia temporal** (cada frame se49 siembra con un poco del output anterior). El 16:9 se **aplasta a cuadrado** (no50 recorta): la distorsión se cancela en pantalla y el marco puede estar en cualquier sitio del plano.51- Facturación: Lucy se cobra por sesión conectada, klein por frame. **Nunca dejar una52 sesión Lucy abierta** — desconectar al cambiar de estilo o cerrar tab.53- Prompts redactados por backend (Lucy: "Change the style of the video to…" con54 detalles visuales concretos; klein: "Turn this into…").5556## Truco de testabilidad que copiar SIEMPRE5758`?demo` → feed sintético con landmarks falsos: ejercita tracking + compositing **sin59cámara y sin llamadas API**. Para cualquier herramienta de webcam: modo demo de datos60sintéticos + coste cero.6162## Familia finger-frame (4 generaciones, por latencia)6364| Variante | Técnica | Latencia |65|---|---|---|66| finger-frame-effect (sophiamyang) | Canvas 2D local (Van Gogh, glitch) | ninguna |67| …-effect-ai | Gemini (offline video edit), vídeo grabado | minutos |68| …-effect-lucy | Decart Lucy vía API directa | casi realtime |69| este repo | Lucy + klein vía `@fal-ai/client` | casi realtime |7071## Pitfalls7273- Repo sin licencia definida → usar como REFERENCIA de patrón, no copiar código.74- La key de fal vive solo en el navegador (localStorage opcional) y se canjea por75 session tokens de corta vida — patrón BYOK correcto, respetarlo en tools propias.76- Hand tracking con dos manos se degrada con oclusión/luces malas: los gates con77 histéresis + dropout hold existen precisamente por eso — no quitarlos al podar código.78- klein es frame-por-frame: la geometría "sueña" (dreamy). Para motion-lock real (que79 el parpadeo del usuario aparezca dentro de la ventana) hace falta Lucy/WebRTC.8081## Verificación82831. Con `?demo`: el quad sigue las landmarks sintéticas a framerate de pantalla, sin latencia.842. Cambiar de estilo no reconecta la sesión (DevTools → el WebSocket sigue abierto).853. Al cerrar la pestaña no queda sesión Lucy facturando (ver dashboard de fal).864. Ocluir una mano 1 s → el marco debe mantenerse (dropout hold) y desvanecer tras el umbral.8788## Referencias8990- Repo: https://github.com/blendi-remade/finger-frame-effect-fal91- Docs modelos: fal.ai/models/decart/lucy-2-5/realtime · fal.ai/models/fal-ai/flux-2-klein-realtime/realtime92- Explorado por stars-explorer: 2026-09-0393- Relacionados: `tools/browser-local-tools`, `computer-vision/openpose-pose-estimation`, `vision/onnx-webgpu-inference`
ntizar