From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!
As a dynamic agency, we recognize the importance of constantly innovating to stay ahead of the curve. With this in mind, we embarked on a website redesign project to better reflect our values and showcase our expertise.
Although we began working on the redesign last fall, delays caused by other client deliveries postponed the release until a few weeks ago. Despite facing numerous challenges and encountering revisions along the way, we persevered to ensure that every aspect of the site was polished and professional.
In this case study, we will provide an overview of the techniques and technologies we utilized to create our new site, as well as share the challenges we encountered during the process. Our hope is that by sharing our experience, other agencies and businesses can gain insights into improving their own online presence and be inspired to pursue their own creative solutions.
Gooey Cover
One of the first things visitors notice when they land on our refreshed website is the interactive hero cover. We wanted to create a unique and engaging experience for our visitors, so we decided to incorporate an effect that we are big fans of – the gooey effect.
We wanted to mix the gooey effect among the cursor, our logo, and the video showreel with a shader created with the help of react-three-fiber.
We first created an image of our logo that was divided into three RGB channels
The blue channel of the image was used as the alpha for the logo, while the green channel was used for the complete logo. The red channel was simply a blurred version of the logo that we used to create the sticky effect when the cursor hovers over it.
If you’re interested in seeing our code in action, we’ve created a demo on Shadertoy that showcases our implementation of the gooey effect.
Page Transition
We also created a unique page transition effect using WebGL.
This effect involved creating a canvas above the entire page and expanding a circle of the default color of the next page when clicked, covering the entire viewport. Once the next page has loaded, we recalculated the position of the mouse and created a circular hole in the viewport that expands to reveal the entire page. This seamless and visually stunning transition effect adds an extra layer of interactivity and engagement to the website, further enhancing the user experience.
Awards Numbers
As we mentioned earlier, we are big fans of the gooey effect, and we wanted to showcase this on our website by creating a carousel that highlights the number of awards we have won. To achieve this, we used GSAP to move blurred balls along a path and applied a contrast cut to create the gooey effect.
We were able to build on an old experiment by Fabio on Codepen to create this effect.
We were lucky enough to receive fantastic feedback on this feature, including a deconstruction of the code by Alex Trost on Frontend.horse, so you can easily understand how it works.
Team Grid
To highlight our team members, we created a grid of WebGL cards that were linked to a rollover effect on each person’s image. This effect was generated using a post-processing technique that stretched the UV based on the distance between each person and applied a chromatic aberration effect for added visual interest.
This unique and playful effect adds an extra layer of engagement to the website, allowing visitors to interact with our team members and learn more about their skills and experiences.
Bottom of the Page
To further enhance the interactivity of our website, we also made our footer interactive by incorporating our logo in WebGL. When visitors move the mouse over the footer, we create a distortion effect on the UV and a chromatic aberration effect based on the speed of the mouse movement.
We created a new rollover effect for the most important links on our website. This effect involves using an SVG stroke with rounded edges that rotates around the link on rollover, adding an extra layer of visual interest and interactivity to the website.
Next.js + Strapi: our new Headless love story
We decided to migrate from WordPress to Strapi, making the choice to go headless for the backend. This allowed us to have more flexibility and control over the content management system. Strapi also provides a built-in media library feature that can be easily hosted on an S3 bucket and distributed via AWS CloudFront, which improved our site’s performance and scalability.
For the frontend, we tested Next.js and decided to export the site statically in order to maintain optimal performance. The combination of Strapi and Next.js allowed us to create a powerful and performant website that is both easy to manage and scalable.
By making this move, we were able to future-proof our site and ensure that it will continue to meet the needs of our users for years to come.
Wrap Up
Overall, developing our website was an incredibly enjoyable experience, as it gave us the opportunity to unleash our creative aspirations.
As a result, the site is filled with small interactions and animations that enhance the user experience, especially during scrolling. Without the use of GSAP and Lenis Scroll, this would have been much more difficult to achieve. We are proud of what we have created and believe that it truly represents the essence of our brand.
Moving forward, we can’t wait to apply this style and approach to collaborate with other brands and create amazing web experiences for their users.
As a final surprise for our most experienced aficionados, we added a hidden feature to our website. If visitors do not interact with the website for a few seconds, the favicon falls asleep.
Good nap, guys!
