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.
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.
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.
Design & Development by Antinomy.
Smart Contract by Miinded.
