Inspiration
We noticed that habit tracking apps often feel like chores themselves like Duolingo, tap a button, check a box, forget about it. We wanted something that actually sees you doing the habit. What if your app could watch you do push-ups, meditate, or stretch, and only count it when you actually performed the movement? Habpet essentially gamified accountability through real motion detection.
What it does
HabPet uses your webcam to learn and recognize your habit movements. During onboarding, you record yourself performing a habit (like a push-up or yoga pose). The app learns your unique motion pattern. Each day, it watches for that same movement, when you match it, a countdown timer starts, and completing it builds your streak. Milestones unlock at 1, 3, 7, 14, and 30 days with celebratory confetti.
How we built it
We used React 18 with TypeScript and Vite for a fast, type-safe frontend. Motion detection is built entirely with the Canvas API—no machine learning. We compare pixel differences between consecutive video frames to calculate motion intensity and patterns. Framer Motion handles animations, *Tailwind CSS for styling, and shadcn/ui for accessible components.
Challenges we ran into
The biggest challenge was making motion detection reliable without machine learning. Camera permissions and cross-browser compatibility also required careful handling. Limitations on hardware products, no 3d printers, no soldering, we also time constraints.
Accomplishments that we're proud of
We achieved accurate motion pattern matching using pure computer vision with no cloud processing or ML. We're also proud of the polished UX: the learning countdown, real-time match percentage display, streak animations, and milestone celebrations create genuine delight. We are also proud of making the Pet work and syncing it with our software
What we learned
We learned that you can achieve surprisingly good motion recognition with simple frame differencing algorithms. We also learned the importance of visual feedback, showing users the matched percentage in real-time. Troubleshooting and understanding new sensors and modules, was an experience.
What's next for HabPet
Next, we plan to add multiple habit support, a virtual pet that grows healthier as you maintain streaks, social challenges with friends, and optional cloud sync for cross-device progress. For the future, we would work on faster frame processing and potentially adding pose estimation for more precise movement recognition. We would also like to expand our pet options and upgrades
Built With
- api
- arduino
- canvas
- css
- framer
- javascript
- loveable
- motion
- react
- ts
- vercel
- vite
Log in or sign up for Devpost to join the conversation.