Mekaverse

Roles: Design, Development, Animations, Motion Design

The next step for MekaVerse.

We worked hand in hand with MekaVerse's team to come up with an easy, playful and modern way for their NFT collection owners to customize the Meka drivers’ backgrounds.

This website is the first step of their digital rebranding and the beginning of the collaboration between MekaVerse x Antinomy. Our challenge was to create the right graphic direction, while freeing ourselves from what had been done so far.

Using Metamask and OpenSea APIs

The website is connected to the Metamask and OpenSea APIs to detect if the user owns any NFTs from the MekaVerse collection. If they do own NFTs, they are redirected to a selection page and otherwise, to a fallback screen.

A custom tool for adding custom backgrounds.

Using the Canvas2D API, we’ve been able to mask out the silhouette of the NFTs and apply a custom background. We’re loading predefined images but also allowing the user to upload any images.

The user can therefore generate different versions of their NFTs and download a HD picture to share on social media. Different micro interactions have been implemented across the site such as a Canvas2D grid, hover states and custom page transitions.

Technologies

We used Figma and After Effects during the design process, Vue.js (Nuxt.js) as a JavaScript framework, CC & GSAP for animations and Netlify as CMS.

Credits

Design & Development by Antinomy.
Smart Contract by Miinded.

Discover more projects

Mekaverse

Roles: Design, Development, Animations, Motion Design