Mirror Moment

Mirror Moment pairs YouCam HD selfie scans with an AI coach to give real-time routines, buy/skip product checks, progress tracking, and adaptive makeup try-ons tailored to your skin's exact moment.

Comment

Inspiration

People don't wonder about their skin in the abstract. They wonder right after a breakout, right before a purchase, or when they're deciding whether a product is working. Today the answers are scattered across ads, blogs and conflicting tips, and a skin score alone doesn't tell you what to do next. We wanted to build for that exact moment at the mirror and give a decision, not a number.

What it does

Mirror Moment turns one selfie into a plan.

  1. Pick your moment. "I just broke out", "I'm about to buy something", "Is my routine working?" or a simple mirror check-in. The plan adapts to why you're there.
  2. Take or upload a selfie. If the face is too small in the photo (for example a full-body shot), MediaPipe finds the face in the browser and crops it automatically before it is sent to YouCam.
  3. YouCam analysis. Skin Analysis scores 12 concerns (breakouts, redness, oil balance, hydration, pores, texture, radiance, dark spots, fine lines, dark circles, puffiness, firmness) with detection maps. Skin Tone Analysis reads the skin tone in parallel.
  4. A coach that decides. The scores and your moment become a focus for today, a short morning and night routine, and what to avoid for now.
  5. Shop smart. Paste any ingredient list and get a buy / okay / skip verdict for your skin today, with the reasons.
  6. Shade match with virtual try-on. The skin tone picks a foundation and lip shade, and YouCam Makeup Virtual Try-On applies it to your own photo. Coverage and finish adapt to your scan (for example more coverage when redness is high, a dewy finish when skin is dry). A before/after slider compares the result.
  7. Ask the coach. Questions like "Can I use retinol right now?" are answered with your scan in context. The coach looks up your scan, checks the ingredient and answers carefully (patch test, SPF, when to wait, when to ask a doctor).
  8. Progress. Scans are saved on your device. Re-scan in a couple of weeks and get an "is it working?" verdict with a trend.

Built for everyone. Results can be read aloud with an English voice, text can be enlarged, a high-contrast mode is one tap away, and every screen works with the keyboard (skip link, visible focus, arrow-key tabs). An automated axe-core audit finds no WCAG 2.2 A/AA violations on the landing page, the capture screen and all five result tabs.

How we built it

  • Next.js 14 (App Router), TypeScript and Tailwind CSS, responsive from 360px phones to desktop.
  • A server-side YouCam client (upload, start task, poll) with typed errors and friendly messages for the error codes we hit (face too small, image too small, out of credits).
  • The coach is a rules engine with a tool-calling structure (get_scan, check_product, search_catalog, compare_progress). It can use any OpenAI-compatible LLM when a key is configured and runs fully on rules otherwise, which is what the live demo uses.
  • MediaPipe Face Detector in the browser for automatic face framing.
  • Web Speech API for read-aloud results, plus a small accessibility layer (ARIA tabs, live regions, reduced motion, high-contrast and large-text modes).

  • No database. Scan history lives in the browser's local storage.

  • File upload: POST /s2s/v2.0/file + pre-signed PUT

  • Skin Analysis (HD/SD): POST/GET /s2s/v2.1/task/skin-analysis

  • Skin Tone Analysis: POST/GET /s2s/v2.0/task/skin-tone-analysis

  • Makeup Virtual Try-On: POST/GET /s2s/v2.0/task/makeup-vto

All YouCam calls go through Next.js API routes, so the API key never reaches the browser.

Challenges we ran into

  • YouCam rejects photos where the face is under 60% of the image width. Real users upload full-body shots, so we added automatic face detection and cropping, and clear error messages for the cases it can't fix.
  • Making a recommendation feel like a decision rather than a dashboard: every screen ends with a clear next step.
  • Keeping the coach honest. Skin advice must be careful, so answers are specific about what to do, what to avoid and when to ask a professional.
  • Accessibility of a visual product: we added spoken results, adjustable text and contrast, and checked it with an automated audit. ## Accomplishments that we're proud of
  • Three YouCam APIs working together in one flow, live, not mocked.
  • A coach that turns a score into a decision.
  • An accessibility layer that most beauty apps skip.
  • It works on a photo you already have, not only a perfect selfie. ## What we learned A score is not an answer. People want to know what to do tonight, what to buy and what to skip. We also learned how many real-world photos fail strict face-size rules, and how much a good error message and an automatic fix improve the first-time experience. ## What's next for Mirror Moment
  • Connect a real retailer catalog (the demo catalog is fictional) so the shortlist links to products people can buy.
  • Switch the coach to an LLM agent by default.
  • Add a camera guide overlay to help people get HD-quality selfies.
  • Localize voice and text, starting with French.
  • User testing with people who use screen readers and with skincare professionals.

Built With

Share this project:

Updates

Submission history