Meebits

The Meebit had to be the primary focus, so we created two levels of zoom triggered by an in-your-face ON/OFF button leading to a library full of playable characters. And for the explorers, we added several modes to play around with, offering an immersive experience that builds excitement and buzz within the NFT community.

From the get-go, we wanted an experience users could dance, play, and vibe on. Being a collection of 20k unique characters with various types, rarities, and traits (+ loads of easter eggs!), it was impossible to imagine the Meebits standing around, stiff and dull.

That’s why we created three snappy and fun modes, setting our character in a different environment alone or with their friends, ready to start the party. Adding to that, we collaborated with Yuga Labs on a straightforward flow for Meebit holders to retrieve their posters in a matter of seconds, showing that fun can also be helpful – you’re welcome.

The cherry on the cake? Yuga Labs partnered with WarpSound, an AI-powered collective started by virtual artists to create an AI-generated playlist because what’s a party without the jams?

When imagining Meebits breaking out, coming to life, and exploring the world around them, we couldn’t help but see them being front and center on the big scene, never alone, always together (shoutout to Black Box Revelation) having fun and, most of all, being unapologetically themselves.

Inspired by Yuga Labs’ preceding media campaign and poster design, we built the entire platform on quirkiness and boldness. From typography and icons to our stunning motion, all was in function of the bold pixel-ruled universe they live around – simultaneously teasing future evolutions for the community to dream about.

The first challenge of MB1.1 came with integrating the two sides of this site: first, the full-on immersive homepage and connected wallet gate; and second, the ordering management of the poster, based on Shopify. Even though those parts are separate, they needed to communicate together, and we needed to build our experience code around React and Nuxt.js to maintain a cohesive environment with the rest of Yuga Labs’ products.

That came as a challenge regarding security and code design, but we were able to overcome this issue with the help of Yuga’s engineering team. We were pleased to see that our Stack-agnostic WebGL tech is proving to be the right tool at every corner. 

Built on our homemade WebGL engine called AstroGL, Meebits was a new test for this ever-growing piece of engineering. First of all, we had to deal with the constraints of the NFT collection, such as the compliance of their already generated 20k .gltf rigged assets and internal structure based on PointColors rather than textures. On top of that, the team quickly had ideas around animating the assets like proper characters, bringing them alive through collections of different bones animations and realtime lighting and shadows.

We decided to leverage the Mixamo animation catalog to have quick access to an extensive variety of animations for the Meebits, like dance moves and idle animations. In order to make this work, we had to deeply re-engineer big chunks of our framework to integrate .gtlf-based rigged assets (rather than Collada-based assets), as well as our character manager, animation interpolation engine, loading management and skin modifiers.

Rendering also presented a challenge: In order to match the neo-8bit style the posters, and using the available collection of Meebits assets only, we had to tweak our PBR real-time rendering material and build a feature that can enable us to create real-time sharp shadows – all of this while being light enough to reach performance standards. 

One interesting thing that came along with the production was that each color within the model had its own sub-mesh, and was seriously impacting our performance when we were displaying more than one Meebit. Since we at Dogstudio deeply believe that a party is worth spending with multiple friends, we pulled off a piece of code to merge all the sub-meshes of the Meebits assets and keep only one draw call per Meebit.

As mentioned previously, this first phase of the website was meant to serve as the foundation of further, more complex, and even more immersive updates, and would serve to keep the product up and running during all the phases of its life. 

In the quickly evolving Web3 world, it was really important to bring a top-notch level of security when dealing with the owner’s wallet and connection. Therefore, Yuga Labs ensured we had the right balance between verification of the token ownership, and transparency, confidentiality and confiance; a website such as this needed to reassure users that not a single precious token would be exposed.

It came as a very interesting challenge, both for UX and from a technical standpoint, to dive into the world of Wallet API, Smart contract, testing network, signed libraries, Node.js security token, and Token gated assets. It was really interesting for us to have the chance to partner with such an experienced team at Yuga Labs and was the first real entry to the serious Web3 tech world for Dogstudio.