I recently built an immersive website for House Of Persona, a digital fashion label from London, UK.
The main building blocks of the site are Next.js, ThreeJS, and React Three Fiber.
House of Persona’s vision was to have a character that flies through a Vortex and into their collection of clothes. Next, it flies into a futuristic club.
I accomplished this using one of my favourite techniques a scroll-based animation.
In my opinion, the internet can get a little boring. Most people use it to read facts, check in with friends, or look at cat videos, there are not that many really exciting and engaging immersive websites.
When I build something I want the visitor to the website to be projected into an experience that captures their imagination and is playful.
Immersive websites in my opinion make the web more fun.
On a practical level, an immersive site can engage the user for longer than a traditional site, which is great for the site’s SEO ranking.
It also is great content for the brand’s social media and marketing. In some cases, the website itself can go viral when users are resharing and talking about their experiences.
I built the site with Next.JS and WebGL. I used two higher-level WebGL libraries ThreeJS and React Three Fiber.
React Three Fiber uses ThreeJS and makes it available to the virtual DOM inside React.
To create the scroll-based animation I used a hook that monitors the scroll events from the webpage and plays back the site as an animation. The world and club were created by Stacie Ant. Our biggest challenge was taking the 3D garments from the House Of Persona and optimizing them for the web.
If you would like a site like this please reach out to me at email@example.com