I wanted a website for ElephantLogix Studio, where I build puzzle and educational games. I wanted visitors to feel as if they had arrived somewhere: a wuxia inn with ink-wash artwork, characters, rooms and small things to interact with.

This is what I learned while turning that idea into an interactive three.js website with AI assistance.

Start with the experience, then name the tools

My original brief described the studio's games, the Chinese ink-wash style, familiar inn characters, exploration, microanimations and support for desktop, tablet and mobile. It also specified three.js.

Those constraints gave the work a direction, but a list of ingredients is not an interaction specification. A stronger brief also answers: Where does the visitor arrive? What should they notice first? How do they move between sections? What should happen when they tap something?

For another build, I would separate the brief into four parts: the visitor's goal, the visual references, the actual interactions, and the conditions for calling a feature finished. For example, “playful dim sum” becomes “visitors can rearrange the steamers, see the result immediately, and still reach the navigation on a phone.”

Build the code concept before polishing the artwork

I first worked on the concept in code. Claude helped turn the brief into a three.js prototype and iterate on the layout and interactions. That gave me a place to evaluate assets rather than judging each image on its own.

A practical sequence is to establish the arrival view, section navigation and clickable areas before committing to final artwork. Otherwise, a beautiful asset can dictate a layout that is awkward to use.

A still image and an animated character solve different problems

The original characters felt flat. I then asked for AutoSprites assets so the characters could be animated and inhabit a 2.5D environment. Astra artwork and AutoSprites animation played different roles in the process.

The lesson was to specify behavior separately from appearance. A character brief should describe what it does, where it stands, how much space its movement needs and how it sits against the background—not just its clothing and art style.

Inspect the composition inside the real layout

One artwork iteration gave the scene two suns. Other problems were less funny: framing could crop the lower part of the inn, and layouts that worked on desktop needed another pass on mobile.

I would turn these into explicit review questions: Is the whole intended building visible? Can text be read without covering the important interaction? Does the scene still make sense at a narrow screen width? Does the visitor know what can be clicked?

These are visual and usability checks. A successful code generation does not answer them.

Small interactions give visitors something to do

The inn includes section transitions, a menu, game previews and rearrangeable dim sum steamers. Those little actions help communicate the kind of playful experience I wanted the studio to make.

They also create scope. Each interaction needs a clear trigger, visible feedback and a sensible result. I found it more useful to ask for a specific behavior than to ask for the whole page to be “more professional.”

Give sound a role

The workflow also used LotsOfSounds for effects and Suno for music, including “Inn at Dusk.” The background track and interaction sounds have different jobs. In the build film I included a music-only section so viewers could actually hear the inn's soundtrack.

For a similar site, I would make audio controls and the silent experience part of the brief from the beginning.

The finished experience and the build diary

You can explore the inn for free. I also made a 4:43 film showing the brief, iterations, artwork mistake and final website walkthrough.

The opening uses a filming camera in the actual 3D scene; it should not be mistaken for the exact camera controls of the public website. The ending demonstrates the public experience. Game availability varies, and the Arrow Dungeon gameplay cutaway is a separate app.

Tools used across the project: Claude Fable 5.2, three.js, Astra, AutoSprites, LotsOfSounds and Suno. This article was prepared with AI assistance from the project's build history and creator feedback.

What would you put in the brief to make a playful 3D website easier to navigate?