PIXY

Engaging the Digital Consumer

PIXY, a beauty brand, was launching a new "Lip Vinyl" collection and needed a digital campaign that went beyond static images.

• The Challenge: The client wanted users to "try on" the product virtually. However, forcing users to download a dedicated mobile app for a single campaign would create high friction and drop-off rates.
• The Goal: Deliver a seamless, browser-based Augmented Reality (AR) experience that allowed users to visualize the product on their own lips in real-time, accessible directly via a web link.

Bringing AR to the Web

My objective was to build a high-performance interactive web application that could:

1. Detect Facial Features: Accurately track the user's lips in real-time using the device's camera.
2. Render Virtual Makeup: Overlay the specific "Lip Vinyl" colors and textures realistically onto the tracked area.
3. Ensure Performance: Run smoothly on various mobile browsers without the lag often associated with web-based AR.

Browser-Based Computer Vision

I engineered a lightweight solution that bypassed the need for app stores.

1. Real-Time Face Tracking (MediaPipe FaceMesh)

• The Tech: I implemented MediaPipe FaceMesh, a machine learning solution that estimates 468 3D face landmarks in real-time.
• The Implementation: By focusing specifically on the lip landmarks, I created a dynamic mask that moves and deforms with the user's facial expressions. This allowed for a "virtual mirror" experience where the lipstick stays perfectly applied even as the user talks or smiles.

2. Performance-First Architecture (Next.js)

• Framework: I built the core application using Next.js to ensure fast initial load times.
• Optimization: AR processes are computationally expensive. I optimized the rendering loop to ensure the face tracking ran on a separate thread where possible, preventing UI freezes and maintaining a high frame rate on mid-range mobile devices.

3. Responsive Styling (Tailwind CSS)

• UI/UX: Used Tailwind CSS to create a sleek, mobile-first interface that guided users through the camera permission flow and color selection process intuitively.

Immersive Brand Engagement

The project successfully bridged the gap between physical retail and digital browsing:

• High Engagement: Users spent significantly longer on the site interacting with the virtual try-on feature compared to standard product pages.
• Accessibility: By removing the "app download" barrier, the campaign achieved broader reach, allowing instant access from social media links.
• Technical Achievement: Demonstrated the viability of complex computer vision tasks running natively in the browser, setting a new standard for the brand's digital campaigns.