Cute Mirror

Project Overview

Cute Mirror is a playful, browser-based AI web app that turns your webcam into an emotional mirror. Open the page, grant camera access, and the app reads your face in real time, recognises your mood, and responds with a soft ring of light tuned to the ambient brightness around you. It was branded as your "AI Bestie", a small companion that waits for you, sees you, and reflects you back, all without sending a single frame of your face to a server.

The build runs entirely on Next.js , with face detection happening in the browser, Tailwind CSS handling the kawaii visual language, and Vercel serving it globally on the edge. Source code is open on GitHub .

The Concept

Most emotion-detection products feel clinical. They scan you, log you, and translate your face into a chart. I wanted to invert that. The brief I gave myself was simple: what if a face detection web app felt less like a diagnostic tool and more like a friend with a ring light? Something cute, soft, and private, where the technology disappears behind a small piece of personality.

That framing changed every technical decision. Privacy became non-negotiable, which meant face detection had to run on-device. Latency mattered, which meant no server round trips. And the interface had to feel warm enough that a stranger would actually grant camera access on the first visit.

Strategy & Approach

I started with a constraint, not a feature list. The app would do nothing the browser could not do on its own. No backend, no database, no cloud inference. This single rule shaped the entire architecture.

From there, I worked outward in three layers. The detection layer handles the camera feed and the face model. The interpretation layer translates raw expression signals into a friendly mood read. The presentation layer wraps everything in a soft, kawaii-styled interface that adapts its ring light to the room you are sitting in. Each layer is decoupled, so the detection model can be swapped without rewriting the UI, and the UI can be reskinned without touching the detection logic.

Tech Stack & Architecture

Every piece of the stack was picked for one reason: it had to run fast, on the client, with zero data leaving the device.

Next.js

Next.js was the obvious choice for a React app that needed to ship as a fast, statically rendered page with client-side interactivity. The landing screen pre-renders for instant first paint, and the camera and face detection logic only loads when the user clicks "Start Magic", keeping the initial bundle small. I have used the same architecture for other AI-leaning Next.js builds in my portfolio , including Hamara Khet .

Face Detection API

Face detection runs in the browser using a lightweight face detection model. The model loads asynchronously after the user opts in, processes frames from the webcam feed, and outputs facial landmark and expression signals. Nothing is uploaded, nothing is stored. The moment you close the tab, every frame is gone.

Tailwind CSS

Tailwind CSS drives the entire visual language. The soft pinks, the rounded glow, the kawaii sparkle accents, and the responsive layout are all utility-driven so the interface stays cohesive across screen sizes. Tailwind's just-in-time engine kept the production CSS small even with custom gradients and animation utilities.

Vercel

The app is deployed on Vercel , which makes the most of Next.js by serving static assets from the edge and streaming the client bundle close to the user. Continuous deployment from the GitHub repository means every commit ships within seconds.

Key Features Delivered

• Real-Time Mood Detection: The app reads your facial expression frame by frame and surfaces a friendly mood signal as you move.
• On-Device Privacy: No face data leaves the browser. The detection model runs locally, so the camera stays private to the user.
• Smart Ring Light: A soft on-screen ring light adjusts based on the ambient brightness picked up from the camera feed, helping users look their best without an external light.
• Permission-Aware Onboarding: The user only grants camera access after seeing the warm "AI Bestie" framing, which builds trust before the prompt appears.
• Mobile and Desktop Responsive: Tailwind-based layout adapts cleanly from mobile webcams to desktop browsers.
• Edge-Deployed Performance: Static assets are served from Vercel's edge network, keeping first paint near-instant.
• Kawaii-Themed UI: Soft gradients, sparkle motifs and an inviting "Start Magic" CTA carry the brand voice from copy into visuals.

Challenges & Solutions

Three problems shaped the build the most.

1. Camera Permissions on the First Visit

Most users will not grant camera access to an unfamiliar website. The fix was psychological, not technical. I delayed the permission prompt until after the user had read the playful introduction and clicked "Start Magic". By the time the browser asks, the user has already opted in emotionally.

2. Detection Performance on Mid-Range Devices

Face detection models can be heavy. I chose a lightweight in-browser model, processed frames at a throttled interval rather than every animation frame, and lazy-loaded the model only after the user opted in. Mid-range phones can run the experience without overheating or draining battery in the first minute.

3. Designing for Vulnerability

Anything that turns the camera on the user is, by default, a vulnerable interaction. The visual language had to compensate. The soft pink palette, rounded shapes, and "Bestie" copy were not decoration. They were the trust signal that made people comfortable enough to keep the camera on.

Outcome

Cute Mirror shipped as a live, open-source web app that demonstrates how face detection, edge hosting, and thoughtful interface design can come together into a product that feels personal rather than surveillant. It is small by design, but the principles behind it scale. The same architecture, with on-device inference, edge delivery, and a friendly first-touch interface, can be reused for any AI experience that needs to feel safe in the user's hands.

You can explore the live build at digital-mirror-psi.vercel.app and read the source on GitHub .

Reflections

The lesson from Cute Mirror sits somewhere between engineering and care. The face detection model is impressive, but it is not what makes the app work. What makes it work is the choice to keep every frame on the user's device, to ask for camera access only after the user feels welcome, and to wrap an unsettling capability inside something warm.

Building AI for the browser is no longer the hard part. The hard part is deciding what to do with it. Cute Mirror is my answer for now: build something small, keep it private, and let it smile back.