How Fraud Detection Gave Birth to Johnny and Julia: A Browser Workout Story

Albert Stepanyan, an R&D developer at Biorg, created a browser-based neck workout game after realizing that the face-tracking technology used in their anti-fraud video identification system could double as a movement tracker. The game, called 'Johnny and Julia', uses the MediaPipe Face Mesh library to detect facial key points and calculate head rotation angles in real time. Users perform 30 randomly generated movements, following an on-screen instructor (Johnny for men, Julia for women, with gender detected via face-api.js). The system scores user synchronization by comparing expected movement times against actual delays, producing a percentage score with encouraging feedback. The developer initially faced mobile compatibility issues, solved by detecting mobile devices via device orientation and touch events rather than screen size. The interface adapts to vertical and horizontal orientations, with the user and instructor windows positioned accordingly. Music playback was added after observing that some users moved more rhythmically with background music; the selected track has a tempo around 140 BPM. The entire tracking library is hosted locally to avoid external dependencies, and the project is freely accessible.