MetaFest2

A Developer's Journey: Creating the MetaFest2 3D Experience Website

As the developer and designer behind the MetaFest2 website, I'm excited to share the story of how I brought the immersive 3D experience to life.

This project was a solid challenge, as the concept was designed and built in under a week, but the end result is a captivating site that perfectly captures the essence of MetaFest2, a virtual conference held across Discord, Voxels, and streamed live on YouTube and the website.

Tech Stack

To achieve the desired look and feel, I utilized a combination of NextJS (React), ChakraUI, React Three Fiber, JavaScript, ThirdWeb SDK, and hosted the site on Vercel. This tech stack allowed me to create an interactive and visually stunning environment to explore while also making it easy to scale and maintain.

Design Process

As I often do, I opted for an in-browser design approach. This allowed me to rapidly prototype, iterate, and implement the visuals while keeping the development process streamlined. It was crucial to make quick decisions and remain adaptable, ensuring that the design remained consistent with the overall vision of MetaFest2.

Voxel Art

The Voxel art was an essential component of the site's aesthetic due to much of the conference featuring & being held in Voxels and the art added a unique, playful touch to the website. I collaborated with talented artists luxumbra and Musashi, who created the beautiful Voxel art using MagicaVoxel. Their artwork contributed to the immersive atmosphere and stunning backdrop of the site.

Hidden Easter Eggs & NFT Minting

One of my favourite features of the website is the hidden Easter eggs, which users can discover as they explore the site. To add an extra layer of engagement and reward, I integrated the ThirdWeb SDK, enabling users to mint NFTs once they find the Easter eggs. This innovative feature not only encourages exploration and interaction but also provides a lasting souvenir for users.

Conclusion

Creating the MetaFest2 3D experience website was a thrilling and challenging journey. The combination of NextJS, ChakraUI, React Three Fiber, and other tools allowed me to bring the vision to life in a short timeframe, while the Voxel art and Easter egg NFT minting functionality provided an interactive and memorable experience for users. I'm proud of the result and know that many users enjoyed using it.

Need a Brand Refresh?

If you’re ready to elevate your business like MetaFest2, we’d love to help. Get in touch today to bring your vision to life.