SpineSync

Inspiration As developers and desk workers, we spend hours locked in deep focus, completely oblivious to our posture until neck stiffness and back pain set in. Standard break timers fail because they are too easy to ignore—we routinely snooze or dismiss notifications while keeping our eyes glued to the screen. We built SpineSync to turn posture awareness into an active feedback loop and make health breaks non-negotiable.

How We Built It SpineSync was built using React and Tailwind CSS to deliver a fast, distraction-free interface.

AI Posture Tracking: Integrated real-time computer vision pose estimation via browser APIs to monitor shoulder alignment and screen distance directly on the client side.

Enforced Screen Blur: Implemented a full-screen backdrop-filter: blur() enforcement modal that overlays the entire workspace when focus cycles expire.

3D Stretch Visualizer: Embedded interactive Spline 3D models, allowing users to rotate and view stretch technique demonstrations from any angle in 360°.

Challenges We Faced

Browser Performance: Running continuous client-side computer vision alongside interactive 3D Spline canvases initially caused frame drops. We resolved this by throttling pose detection checks to run on optimized animation frames without draining CPU resources.

Balancing Enforcement & UX: Fine-tuning slouch detection thresholds was tough. Set it too strict, and a quick sip of water triggers a slouch warning; set it too loose, and bad habits slide by. We calibrated the detection algorithm with a delay tolerance to prevent false alarms.

What We Learned We learned how to integrate real-time spatial vision tracking with modern 3D web graphics inside a React application. Beyond technical integration, building SpineSync deepened our understanding of health-tech UX—specifically how to design subtle behavioral nudges that protect a user's physical well-being without frustrating their workflow.