Utopia Tokyo is an interactive web design project merging Japanese mask culture with dystopian cyberpunk aesthetics by Simon Smeraldi and Andrew Measham.

The site opens with a stark red-and-black seizure warning — a split-second UX moment that sets the tone. Two buttons: Use Safe Mode or Enable Glitch Effect. That choice is not just functional. It signals what kind of experience follows.

The main title reads: Masked. Marked. Watched. Below it, a 3D-rendered Samurai mask floats against the red-dominant hero section. The typography is oversized, glitchy, and monospaced. Giant kanji characters for Tokyo appear mid-scroll as graphic anchors, rendered in deep red against near-black backgrounds. Cross-hatch scan lines and corner bracket UI elements complete the surveillance-state aesthetic.

Interactive Web Design Rooted in Japanese Mask Culture

The core of the site is a collection of 14 Japanese masks — Samurai, Oni, Hannya, Tengu, Kitsune, Kappa, Noh, Kendo, and more. Each mask is rendered as a highly detailed 3D object. They appear in a grid layout with animated frame corners that pulse like targeting reticles. Clicking a mask opens a detail panel with cultural context: the Samurai mask, for instance, is described as worn in battle to intimidate foes and reflect a warrior spirit.

The interactive web design goes further with a personality quiz built on a radar chart. Visitors allocate up to 60 skill points across six attributes — Strength, Agility, Vitality, Intellect, Spirit, and Ferocity — and the system matches their profile to one of the 14 masks. A mini-game is accessible from the footer. List and grid view toggles let users approach the collection on their own terms.

This kind of interactive web design treats folklore as raw material for world-building. Utopia Tokyo was built on Webflow with GSAP animations, growing out of an Awwwards Masterclass by Niccolo Miranda. It is a clear example of how interactive web design can transform cultural reference into immersive digital experience.