In 2020, my friend Philippe Neveu, a motion and interactive designer and former colleague at Akufen , started his freelance activity. As we were used to work together, we decided to collaborate on the making of his new portfolio, which he wanted to be a playful and fun experience.
Homepage
The homepage features a WebGL interactive experience where you can draw a shape with your mouse or finger.
Animations
The logo animations were made in After Effects by Philippe and are playback with Lottie. There are 4 different animations, played at random intervals or when the cursor hovers the logo.
A lot of animations are physics-based instead of time-based. As we were trying to add a lot of interactions, this would mean that visitors would try to play, interrupt, or restart the animations. In this case, time based animations can look a bit odd because when an animation is interrupted, we don’t go the end of the easing curve. Spring based animations don’t have this problem as we’re simply giving a new target to the animation and the current motion will change its acceleration and velocity accordingly.
Stickers
We added the ability to draw some stickers on every page (except the homepage). Philippe created a bunch of really cool stickers and I had fun playing with these.
You can even “unlock” a special mode by holding the mouse or the finger for a longer time, where the stickers are just spawning until you stop holding.
Stack
The website was built with 11ty , a static site generator. I used OGL to handle the WebGL interactive experience on the homepage. I also use a bunch of my Lemonade modules to handle animations and navigation .
Recognition
- Awwwards SOTD and DEVAWARD - 29th December 2020
- FWA of the day - 28th November 2020
- Featured in Codrops Inspirational Websites Roundup #20 .