Spine-o-saur

For remote workers and students suffering from digital posture pain, Spine-o-saur is a zero-hardware virtual pet that turns biomechanics into a game. We fix your posture without a purchase required.

Comment

Inspiration

In an era of remote work and long study sessions, physical health often takes a backseat to digital productivity. We observed that many people unconsciously adopt a "slouching" position, leading to chronic back pain and "tech neck." This issue is particularly personal as I witness the impact of bad posture every day; my mom currently requires constant back support and physical therapy due to the long-term strain of office work. We wanted to gamify the solution by creating a virtual pet whose health is directly tied to the user's physical posture, turning a mundane habit into an interactive responsibility.

What it does

Spine-o-saur is an AI-powered wellness companion that monitors your posture in real-time through your webcam. The application features a "Virtual Pet" (the Spine-o-saur) whose health fluctuates based on your sitting habits.

Real-time Monitoring: The app uses a computer vision model to detect if you are sitting tall or slouching.

Interactive Feedback: If slouching is detected, a global alert banner appears, and the pet loses health points.

Health Gamification: Maintaining good posture rewards the pet with health points, encouraging long-term habit formation.

Smart Breaks: It includes a "Digital Breaker" to remind users to take necessary rests from their screens.

How we built it

The project is built using a modern web stack designed for real-time interaction:

Frontend: Developed with React and Vite for a fast, responsive user interface.

AI Engine: Posture detection is powered by a Roboflow computer vision model. We implemented custom logic to capture frames from the webcam and send them to an inference server for analysis.

State Management: We used a central AppContext to manage global variables like pet health, slouching status, and break timers.

Animations: Framer Motion was used for smooth transitions, the countdown overlays, and the dynamic health alerts.

Challenges we ran into

One of our primary hurdles was balancing the frequency of AI scans with performance. Constant scanning is resource-intensive, so we designed a phased state machine (Idle $\rightarrow$ Countdown $\rightarrow$ Capturing $\rightarrow$ Result $\rightarrow$ Waiting) to provide periodic, meaningful feedback. We also faced the challenge of ensuring users positioned themselves correctly for the AI; we solved this by implementing a visual SVG frame and a semi-transparent mask to guide alignment.

Accomplishments that we're proud of

We are particularly proud of our seamless AI integration, which manages to capture and process images without interrupting the user experience. Additionally, creating a cohesive "bento-box" style UI that balances technical data with a friendly, character-driven aesthetic was a major design win for the team.

What we learned

We deepened our understanding of integrating third-party AI APIs into React lifecycles and managing complex asynchronous states. We also learned that in wellness applications, User Experience (UX) is just as important as technical accuracy—providing supportive messages like "Keep it up! " is often more effective than just showing raw data.

What's next for Spine-o-saur

The future of Spine-o-saur involves expanding the "pet" ecosystem. We plan to add:

Evolution Mechanics: Having the dinosaur grow or change based on long-term posture trends.

Social Features: Group "study rooms" where friends can keep their pets healthy together.

Mobile Integration: Expanding the vision logic to work on mobile devices to help with posture while using phones.

More Pets: Introducing a variety of animals so every user can find their perfect posture companion.

Share this project:

Updates