victorcappa / just-for-men-combe-beard-brow-colour

AR face filter experience, developed with 8th Wall + React for Just For Men marketing campaign

Combe Beard Brow Colour

Client

Just For Men

Combe Beard Brow Colour

AR face filter experience created for Just For Men marketing campaign | using 8th Wall + AFRAME and React

combe-beard-brow.mp4

About The Project

This project was developed with the goal of providing the user with maximum flexibility and accessibility. In order to meet the client's needs, the team developed three versions of the app: Instagram, TikTok, and WebAR – I was responsible for the latter.

The purpose of the app is to allow users to preview how Just For Men's new product will look when applied to their beard. The main features of the app include the ability to scan the user's face by raising their eyebrows, choose from five different beard textures and colors, and take a screenshot or record a video to share with others.

Overall, the aim of the project was to give users the opportunity to experiment with different looks and share their creations with friends and family.

I believe that these features, combined with the app's accessibility across multiple platforms, will make it an engaging and useful marketing campaign for users.

Challenges

During the development process, we faced a number of interesting challenges, including the creation of the scan animation. To achieve this effect, we utilized a single jpeg image as an alpha for each frame. This allowed us to create a smooth and realistic animation that accurately captured the user's facial features.

Another challenge we faced was ensuring that the beard texture was applied evenly across the user's face. To accomplish this, we increased the scale of the facemesh on the y-axis, which prevented the beard from leaving parts of the bottom of the user's face uncovered.

In addition to these technical challenges, we also faced difficulties with deployment. We encountered issues with library compatibility, server memory, and server configuration packages/manifests. Despite these obstacles, we were able to successfully integrate the app with a React application that serves as the landing page for the project, offering users the choice between Instagram, TikTok, or WebAR options.

Overall, the development of this app required careful attention to detail and a solution-oriented approach to problem-solving.

Despite the challenges I faced, I'm are proud of the end result.

(back to top)

License

All intellectual property is owned by Just For Men

Contact

Reach out - Victor Cappa @imaginar
Linkedin

(back to top)