WeMod AI Game Guide Icon

Our interactively animated icon gives WeMod's AI assistant a visual and otherworldly personality.

WeMod AI Game Guide Icon

WeMod LLC

  • Realtime Experience
  • Web Components
  • UI/UX Design

March 2025 — today

  • Three.js
  • WebGL
  • Javascript/Typescript
Challenge

WeMod's well-known game modding software has recently added an AI Game Guide. This helps users to answer all game-related questions even faster. Our task was to develop an interactive animated icon for the chatbot's interface that breathes life into the assistant, communicates internal statuses and responds to the user.

AI Game Guide Icon Demo
Concept

Inspired by nature

Based on the briefing, we developed concepts for three different design directions. From the very first presentation, it quickly became clear that an organic concept inspired by jellyfish and deep-sea animals was the most interesting option and also fitted in well visually with the brand image. A translucent surface like that of jellyfish also made it possible to visualise the intelligence inherent in the AI assistant very vividly.

Inspiration
Inspiration (Image Credits: https://unsplash.com/@deko_photo4, https://unsplash.com/@m3design, https://unsplash.com/@bruno_kelzer)
Implementation

Bionic State Machine

The translucent surface with its frosted glass look posed a particular challenge for real-time rendering. By using our own render pipeline with special shaders, we were able to achieve a visually appealing and high-performance result.

A key requirement was to animate the internal states of the assistant. States such as waiting for an input, the processing of a prompt or the output of a response were to transition seamlessly and at any point. A break in the animation transitions should be avoided at all costs, as this would immediately ruin the illusion of a living organism. To make this possible, all animation parameters are fed into a simple physical simulation - each parameter is treated as a particle with mass, velocity and acceleration. In this way, the parameters follow a natural behaviour when they have to change suddenly.

Process
Process
Result

A new species

The interactive icon is only a small element in the extensive WeMod application. This made it all the more important for us to enable WeMod developers to integrate the icon as easily as possible. Through regular coordination and detailed developer documentation of our icon component, a smooth integration into the overall system was achieved.

Result: Web component and developer documentation
Result: Web component and developer documentation