Live demo: https://sophiamyang.github.io/finger-frame-effect/
Hold up both hands and frame a box with your index fingers and thumbs — a live effect is applied inside the quad your fingers form, like the camera-framing gesture effect.
Built with MediaPipe Hand Landmarker (browser WASM/GPU, loaded from CDN) + plain Canvas 2D. No build step.
| App | Generation | Latency |
|---|---|---|
| this app — live camera, local effects | Canvas 2D (Van Gogh, toon, glitch, …) | none |
| finger-frame-effect-ai (repo) — recorded video, AI restyle | Gemini Omni Flash (offline video edit) | minutes |
| finger-frame-effect-lucy (repo) — live camera, live AI | Decart Lucy 2.5 (realtime video-to-video) | ~real time |
python3 -m http.server 8123Then open http://localhost:8123 in a browser and allow camera access.
(Any static file server works; getUserMedia requires localhost or HTTPS.)
- The webcam feed is drawn mirrored to a full-screen canvas.
- MediaPipe Hand Landmarker tracks up to 2 hands per frame (VIDEO mode, GPU).
- When both hands make an open "L" (thumb and index spread apart, scaled by hand size), the 4 tips (index + thumb of each hand) are sorted by angle around their centroid into a quad.
- Corners are exponentially smoothed and the effect fades in/out with a presence value, so the frame doesn't pop or jitter.
- The selected effect is drawn into the canvas clipped to the quad path, with a dashed outline + corner dots on top.
Switch with the toolbar or keys 1–7:
- Pixelate — mosaic censor effect (downscale + nearest-neighbor upscale)
- Blur — frosted-glass blur
- Invert — color negative
- Noir — high-contrast black & white
- Glitch — chromatic aberration, slice displacement, scanlines
- Toon — cel-shaded cartoon version of the live feed: smoothed, posterized color bands + dark ink outlines from edge detection
- Van Gogh — live painterly rendering (no AI): a smoothed orientation field is built from the image gradients each frame, then curved brush strokes follow it in two passes — a large brush for mass, a fine brush that sharpens edges — with per-stroke color jitter and slowly drifting swirl fields in flat areas. Moves with you in real time.
http://localhost:8123/?demo replaces the camera with a synthetic animated feed and fake hand landmarks — useful for testing the rendering pipeline headlessly.