Behind Kaonavi Town

At the Webby Awards, often called the Oscars of the Internet, the IN FOCUS website for PSY-CLONE was named a finalist in Best Visual Design – Function. Our kaonavi Town website was recognized as an Honoree in two categories: Best Visual Design – Function and Corporate Communications.
Crafted with Code, a collaboration between The Webby Awards and WP Engine, goes behind the scenes of projects by developers, designers and creators around the world. It explores the ideas, craft and technical innovation that go into making them.
For the series, IN FOCUS web director Atsushi Kaneishi spoke about how the team built kaonavi Town.

Read the original interview on Crafted with Code

Can you tell us about the project and the idea behind it?

kaonavi Town lets you explore the future envisioned by kaonavi: a city where everyone can bring their individuality to work and thrive. The technologies woven into the city work together to make it a lively place. We used 3D computer graphics to bring the city and the people who work there to life, showing how different people can collaborate while being themselves.

What made the project distinctive, and what did you set out to achieve?

We built a miniature world in 3D so that exploring the site would feel like taking a walk through the city.

Once you had the idea, how did you decide on a technical approach? How was it different from what you’d done before?

This was our first website where we handled everything in-house, from building the 3D models to bringing them to the web. We were starting with almost no experience in Blender, so there was plenty to figure out. We learned from each other as we went and took it all the way through animation and camera work.

What were your biggest takeaways from the project?

Going through the whole process taught us how to produce 3D computer graphics ourselves. It also showed us how combining 3D, web design and film can turn a website into an immersive experience.

What web technologies, tools and techniques did you use to build the experience?

• Nuxt.js: Asynchronous transitions kept the experience seamless.
• hls.js and a CDN: Self-hosted video streaming delivered smooth, high-resolution playback.
• Figma: We managed the project from design through feedback.
• Blender and After Effects: We modeled and rendered in Blender, then composited 2D motion in sync with Blender’s camera data and finished the videos in After Effects.
• WebP and AVIF: We kept asset sizes down.

How did the finished site live up to your expectations? What was the response?

At first, we planned to build a simpler 3D town because we weren’t sure what we could pull off technically. In the end, we were able to portray a much wider range of buildings and people, which made the city and everyday life there feel more vivid. The client and the audience responded warmly, and we were honored to be recognized by The Webby Awards.

Why is this an exciting time to create new digital experiences? Where does IN FOCUS fit in?

AI is going to have a huge impact on creative work. What excites me is the new ways of thinking and the cultures that will grow out of it. People will find new ways to make experiences that move us. By seeking those experiences out and learning from them, we can bring a lot back to the worlds we build on the web.

How did you balance your own creative and technical ideas with representing the client’s brand faithfully?

The brief was to depict a future city and the people who work there. The more fully we built out that world, the more clearly the message came through, so the balance felt quite natural. On every project, we think carefully about how to balance creative direction and usability in a way that serves the client’s goals.