Niblet

Home Page
Monitor Tracking
Tips
Session Review

Inspiration

The modern workspace is a breeding ground for subconscious stress habits. We were particularly moved by the fact that so many people, especially girls and young women, struggle with deep-seated insecurities regarding the appearance of their nails, including us.

For many, nail-biting isn't just a quirk; it is an unhealthy, involuntary habit that feels impossible to control. We wanted to create a tool that moves away from shame and toward _ support _. Niblet was born from the idea that technology could provide a "digital tap on the shoulder" to help people reclaim their confidence and break a cycle that feels automatic.

What it does

Niblet is an intelligent wellness companion that acts as a real-time guardian for your habit-breaking journey. It bridges the gap between subconscious actions and conscious awareness through three core pillars:

Real-Time AI Habit Detection The app uses your webcam to create a virtual "safe zone" around your face. By tracking the specific coordinates of your fingertips and your mouth, it monitors for "collisions" that indicate nail-biting. It is smart enough to ignore quick movements, only triggering when a hand stays near the mouth for a sustained period.
Cross-Tab Behavioral Friction We know that habits happen most often when you are distracted or focused on other work. Niblet Monitor uses the Web Notifications API to send system-level alerts that pop up over your active windows. Whether you are typing an email, watching a video, or scrolling social media, the app interrupts the involuntary habit the moment it starts.
Privacy-First Monitoring In an era of data concerns, Niblet Monitor is built on a local-only architecture.

Zero Data Uploads: Every frame of video is processed directly in your browser.

No Storage: No images or videos are ever saved to your hard drive or sent to a server.

Instant Shutdown: Closing the tab immediately kills the webcam process, ensuring your space remains private.

Positive Reinforcement Beyond just "policing" the habit, the app encourages long-term success. Every time a user successfully pulls their hand away after an alert, the app provides healthy nail tips and encouraging messages to shift the focus from the insecurity of the habit to the progress of growth.

How we built it

Niblet is a web-based application built using MediaPipe Holistic for real-time computer vision. We chose a web-based approach to ensure accessibility and prioritize user privacy. The technical core of the project relies on calculating the distance between the user's mouth and fingertips in a 3D coordinate space. To determine a "collision" (a bite), we implemented the Euclidean distance formula: $$d = \sqrt{(x_2 - x_1)^2 + (y_2 - y_1)^2 + (z_2 - z_1)^2}$$ $$(x_1, y_1, z_1)$$: Represents the mouth landmark (Index 13). $$(x_2, y_2, z_2)$$: Represents the fingertips (Indices 4, 8, 12, 16, 20).

When $$d$$ falls below a specific threshold (e.g., $$0.08$$) for a sustained duration of $$2.5$$ seconds, the system triggers a Web Notification to alert the user, even if they are working in another tab.

Challenges we ran into

The road to a working app was far from smooth. We encountered several major hurdles:

The Pivot: Our first project idea completely failed to gain traction. We hit a wall and overestimated the scope of feasibility, forcing us to restart from scratch with a very limited timeline. Luckliy we had another idea in the books.
Library & Installation Errors: We faced significant roadblocks with our second idea. Attempting to download and link heavy libraries like TensorFlow and MediaPipe for local environments led to endless errors and version conflicts. We eventually bypassed this by using a CDN-based approach to keep the project lightweight.
Git Integration: Version control was a battlefield. We faced numerous Git merge conflicts and "head-detaching" issues while trying to sync our logic and UI changes across the team.
AI Occlusion: Technically, when a hand covers the mouth, the AI often "loses" the landmarks. We had to fine-tune the tracking confidence and model complexity to keep the monitor stable.

Accomplishments that we're proud of

User Interface: We're proud to have integrated our own drawings/animations for our niblet buddy created through ProCreate.
Real-Time Precision: We successfully implemented a complex 3D coordinate system using MediaPipe Holistic that accurately distinguishes between a hand simply being near the face and an actual nail-biting gesture.
Overcoming the Technical "Wall": After our initial project idea failed and we faced endless library installation errors, we successfully pivoted and rebuilt the entire logic using a CDN-based architecture in a fraction of the original time.
Seamless User Experience: Despite the challenges with Web Notification APIs, we managed to create a system that stays active and alerts the user even when they are focused on other tabs or windows.

What we learned

This project taught us that Computer Vision can be a powerful tool for personal health. We learned how to:

Implement complex AI models in a lightweight, browser-based environment.
Manage asynchronous data streams from a webcam feed.
Design Privacy-First software where all data processing happens locally on the user's machine.
Navigate the "human" side of coding—learning when to pivot and how to debug as a team under pressure.

Now, Niblet stands as a testament to turning a common insecurity into a technical solution that promotes long-term wellness and confidence.

What's next for Niblet

While the core functionality of Niblet is live, we see a bright future for its evolution:

Behavioral Trends & Analytics: We plan to add a local dashboard that tracks "strike-free" streaks and visualizes which times of day the user is most prone to biting, helping them identify their specific stress triggers, adding a fun twist in efforts to stop the habit.
Creating a Custom ML model: Nail-biting isn't just a static position; it’s a movement. We plan on using a Recurrent Neural Network (RNN) or Long Short-Term Memory (LSTM) network to analyze a "window" of frames. The Benefit?... It can distinguish between you scratching your nose (quick movement) and the specific, repetitive motion of bringing a hand to the mouth to bite (slower, deliberate movement).