“What happens when Japanese vinyl and manga meets video game customization.” —Boo Wong
“A nice mix of smooth animations and engaging content gives the site a pleasant user experience.” —Martijn van der Does
Overview: An expanding NFT collection aimed at enthusiasts of anime and manga, cryptocurrency, fashion, and gaming, ChainZoku takes NFTs to an enhanced level with online gamified features like weekly loot drops, customizable outfits and quests. Through this site designed by Amsterdam-based Antinomy Studio, users can mint their Zoku—the main characters of the NFT line—to discover what clan they belong to: the Onizoku, who develop traditional psychic and shamanic powers; and the BosoZoku, who embrace technology and undergo cybernetic enhancements. Weekly issues of an online manga reveal users’ destinies and impact each NFT, resulting in a dynamic Web3 experience.
A team of seven members at Antinomy Studio collaborated with Paris-based Web3 development studio Miinded and the creative team at ChainZoku to create the website.
The website is built using mostly vanilla JavaScript with Vue.js. A large codebase of custom smart contracts and back-end architecture supports minting the NFT collection.
With the ChainZoku website being rolled out in phases, the project took about a year and a half from early discussions to the final launch of the last page.
Comments by Baptiste Briel:
How did you launch the ChainZoku website in phases? “We started by launching the homepage that conveys the overall vision of the project, followed by the Lore page, including an interactive map of Tōdai City—the environment where ChainZoku takes place. Then came the minting experience, a fully custom-made interactive mint experience. The Weekly Jumps page, which serves as an online konbini (‘convenience store’) where holders can learn more about the lore, came last.”
How many videos, images and other media elements does the site have? “There is a lot going on! For instance, during the preloader, the logo animation has approximately 70 frames to play smoothly. These frames are loaded using a web worker to ensure that the main thread is not blocked while the preloader animation is running. There are a handful of images and videos that are lazy-loaded on scroll while the user navigates through the site.”
What was the most challenging aspect of the project? “When we introduced ChainZoku to the world, our main focus was on interactive scrolly-telling. There is just so much to discuss about the project, and we wanted to ensure that users could learn more about it without feeling overwhelmed. But building a large site with many assets comes at a cost—performance. We spent a lot of time debugging and optimizing code to ensure that the ChainZoku site runs smoothly on devices.”
