Back on Dribbble with my last solo project, after quite a long and challenging journey the A369 Makeup Studio website is ready and I'm quite thrilled to share with you this concept I designed and the development process I went through.

Projects, the core

For this project, the first thing I designed is the projects page. I wanted to try a pretty nice effect that afterwards had an impact on every component. The effect is a curvature on the slider profile that is proportional to the scroll strength.

The slider you see in the video is made with threejs and Drei and features two custom shaders that i had to develop because this effect can't be achieved with simple CSS or Javascript.

Menu

Following the idea of curvatures and circles I thought at the menu as something that should implement this concept. I figured out that i could create a carousel of cards transitioning in an infinite loop and moving on a curved path as a background while listing the 4 pages on a grid that fades in after the carousel itself.

Loading

Last but not least, I was pretty happy with performances but given the high amount of assets that the website needs to run I wanted to add a loading screen that could also work as a small credit screen.

For this purpose I imagined the A369 logo surrounded by a circle composed of numbers that fade in while assets are loaded and fade out when the loading process is completed to give space to the founder's name.