Video stays on the device.
MediaPipe detects body landmarks in the browser. Canvas draws the skeleton over the camera image, with matching proportions and mirror settings. Camera video and pose inference stay on your device.
← Back to workInteractive wellness app / Live
A personal yoga studio, in your browser
Yogabro.
Build your flow.
Find your rhythm.
From choosing the next pose to seeing how you move. I built Yogabro to bring guided practice, camera feedback and the small routines around yoga into one responsive app.
Desktop & mobile · Camera optional · Private source
Flow builder → Start practice
Your sequence.
Your pace.
A practice can be personal before it even begins. Combine poses, adjust their timing and choose which side to work on. The same flow becomes a guided session on your laptop or phone.
- 01
Choose your poses
Build a sequence from all 42 poses, or begin with a ready-made morning, power, relaxation or bedtime flow.
- 02
Make it yours
Set the hold time for each pose. Choose left, right or both sides for asymmetric poses, and save the flow for next time.
- 03
Start your practice
Move into a guided session with a pose reference, instructions and timed holds. Add camera feedback when you want it.
Visual guidance, where you practise
A reference to follow.
Feedback as you move.
Use a laptop webcam or a phone camera to add a skeleton overlay and alignment feedback to guided practice. Keep the camera off and the pose illustrations, instructions and timer still guide the session.
Feedback follows what is visible.
Joint angles, limb directions and hand placement are compared with pose references. Smoothing steadies the feedback; missing landmarks or an unsuitable view pause the score. Some poses provide skeleton guidance without a percentage.
Alignment is a 2D reference comparison. Camera angle and body visibility affect the estimate; it is not a clinical assessment.
Learn the pose. Build the habit.
A studio with
room to explore.
Browse 42 illustrated poses, filter by difficulty and search by name, Sanskrit, body area or common aliases. Each pose brings instructions and a visual reference into the flow builder and practice guide.
Between the movements
Take time for a breath.
Six breathing patterns guide inhale, hold and exhale phases. Animated pacing, optional sound and spoken cues keep the rhythm clear.
Choose Box Breathing, 4-7-8, Energizing, Coherent, Deep Relax or Awakening.
A quieter moment
A meditation timer with pause and resume, optional background audio and mute controls.
Guidance you can hear
Spoken pose instructions and stable alignment cues, with optional voice commands in supported browsers.
A record of your practice
Weekly minutes, streaks, 7- and 30-day views and session history. Camera-free sessions record time and poses; alignment entries appear when tracking is used.
Your flows, your devices
Guest flows and history stay on the device. Optional Google sign-in connects saved flows and session records through Firebase.
Behind the app
Movement in the browser.
A connected practice.
A lightweight JavaScript interface brings together real-time pose inference, spoken guidance, timed sessions and optional account sync.
- Camera
Capture
Webcam or mobile camera
- MediaPipe + WASM
Find landmarks
Local inference · GPU / CPU fallback
- Pose geometry
Compare
Visibility checks · Angles · Smoothing
- Canvas + speech
Guide
Skeleton overlay · Stable cues
- Interface & build
- Vanilla JavaScript, HTML and CSS, built with Vite. Responsive layouts carry the studio from desktop navigation to phone-sized practice.
- Real-time vision
- MediaPipe Tasks Vision runs with a bundled WebAssembly runtime. The pose model downloads when the camera is first enabled.
- Voice & session controls
- Web Speech API supports spoken guidance and optional voice commands. Session timers track active practice time, including pause and resume.
- Persistence & identity
- localStorage holds guest flows and history. Firebase Authentication and Cloud Firestore provide optional Google sign-in and account-based sync.
Your practice, at your pace
Make a little space.
Explore the studio, build a flow and choose how you want to practise.