Xnap! is a browser photo booth with filters, stickers, and hand-gesture controls. It lets a person interact with capture while standing away from the screen.
Implementation focus#
My implementation focus is capture intent and consistent output. The project uses Next.js, React, TypeScript, MediaPipe, React Webcam, and Supabase. The inspected hand-control hook and strip compositor show how those interactions become repeatable application behavior.
Turn a gesture into a deliberate action#
The hand-control hook uses a video-mode recognizer with one hand, a confidence threshold of 0.6, a two-second hold, and a three-second cooldown. A victory gesture starts or cancels capture depending on the active state. An open palm cancels an active capture.
The hook skips unchanged video frames, caches the model-loading promise, and clears failed initialization so loading can be attempted again. Current action references help avoid callbacks using obsolete capture state.
These decisions reduce accidental repeated actions in the implementation. They are not measured recognition or latency results across all cameras.
Share the final compositor#
The editor and guest-dashboard upload path use the same strip-rendering helper. Sticker positions and sizes are normalized to the canvas dimensions. Export converts those values to pixels and rotates each sticker around its center.
Using the same compositor gives preview and saved output a common interpretation of the composition. Failed sticker loads are skipped, so an unavailable asset can still affect the final image.
Result and next evidence#
The source demonstrates intentional capture controls and a reusable export path. Useful next checks would compare preview and export across layouts and test gesture behavior on representative devices. This study does not invent success rates or claim every camera behaves identically.
The companion article explains normalized sticker coordinates.