Global Beauty Atlas

Beauty knows no borders.

Comment

Inspiration

Beauty is deeply cultural. A red lip in Tokyo means something entirely different from a red lip in Mumbai or Paris. Yet most AR beauty apps flatten these differences into a single, Western-centric aesthetic. We wanted to build something that celebrates cultural diversity in beauty — an app that lets anyone explore and experience the makeup traditions of different cultures through AI.

The idea came from a simple question: What if you could see yourself through the lens of another culture's beauty ideals?

What it does

Global Beauty Atlas lets users upload a selfie and instantly see themselves transformed into five distinct cultural makeup styles:

  • Geisha Elegance (Japan) — porcelain skin, vermilion lip, minimalist eye
  • Bridal Opulence (India) — gold eyeshadow, bold liner, deep red lip
  • Arabian Glamour (Middle East) — full-rim smoky eye, sculpted contour, matte lip
  • Tang Dynasty Grace (China) — luminous skin, phoenix-eye liner, peach blossom blush
  • Parisian Chic (France) — bare-skin base, dusty rose lip, undone elegance

Each style is powered by the YouCam S2S API for real-time AI makeup rendering. The app includes an interactive before/after comparison slider with a smooth wipe-reveal animation, and cultural background information explaining the philosophy and history behind each beauty tradition.

How we built it

  • Frontend: Next.js 14 (App Router), React 18, TypeScript, Tailwind CSS
  • State Management: Zustand
  • AI/AR Engine: Perfect Corp YouCam S2S API — handles face detection, makeup effect rendering, and result generation
  • Image Processing: Client-side canvas-based resizing to compress uploads below API limits
  • Animations: CSS keyframe animations for the scanning effect, comparison slider, and page transitions

The architecture is straightforward: upload an image via the YouCam file API → create a makeup-VTO task with effects tailored to each style → poll for the result → display with a comparison slider.

Challenges we ran into

API parameter discovery was the hardest part. The YouCam S2S API has strict per-category parameter schemas, but the documentation is sparse. Every category (skin_smooth, lip_color, eye_liner, eyebrows, foundation) has different required fields, pattern names, and value ranges. We went through dozens of 400-error iterations:

  • eye_liner needed pattern.type: "shape" with colorUnderEyeIntensity and coverageLevel — fields that don't exist in the general schema
  • eyebrows required { type: "shape", curvature, thickness, definition } in addition to the pattern name
  • Pattern names like 3colors5, Drama1, HighArch1 had to be discovered by fetching the pattern catalog at plugins-media.makeupar.com

Image size limits were another hurdle. The API rejects images larger than ~10MB base64, so we built a client-side resize pipeline that scales images to fit within 1920×1920 before upload.

Balancing visual impact vs. realism was a design challenge. Adding too many effect categories (skin_smooth + foundation) made all styles look uniformly airbrushed. We learned to be selective — fewer categories with more intentional parameter variation produced better results.

Accomplishments that we're proud of

  • Culturally authentic makeup parameters. Every color, pattern, and intensity value is researched — from the vermilion lip of Tang Dynasty court makeup to the bold full-rim kohl liner of Arabian beauty traditions
  • Smooth reveal animation. The comparison slider with a 900ms ease-out wipe transition makes the AI transformation feel magical
  • Graceful error handling. Clear user feedback at every stage — upload, processing, and result — with no silent failures
  • TypeScript coverage. Every API interface, store, and component is fully typed, which caught countless parameter bugs before they reached the API

What we learned

Building on top of a semi-documented API teaches you a lot about defensive integration design. Key takeaways:

  1. Read error messages carefully. The YouCam API returns detailed multi-path validation errors — each "or" clause is a hint about what format it expects for a particular category
  2. Less is more with AI effects. Piling on categories doesn't make the output better. Thoughtful parameter selection matters more than quantity
  3. Cultural representation requires research. You can't just tweak colors — each beauty tradition has a philosophy, a history, and specific techniques that inform the parameters

What's next for Global Beauty Atlas

  • More styles: Korean "Glass Skin," Nigerian gele-inspired looks, Brazilian beach glam
  • Skin tone adaptation: Automatically adjust foundation colors based on the user's detected skin tone
  • AI beauty analysis: Use the skin analysis endpoint to recommend the most flattering style
  • Social sharing: Side-by-side comparison cards optimized for Instagram/TikTok
  • Multi-language support: Cultural background text in English, Chinese, Arabic, Japanese, French, and Hindi

Built With

  • next.js
  • perfectcrop
Share this project:

Updates