3D Interactive Animation Assets for Supaband App

Supaband is an AI-powered app that makes calorie tracking and weight loss easy.

This project involved creating interactive 3D animation assets using Spline for their app.

These assets were designed to enhance the user experience by providing engaging and visually appealing elements that align with the app's purpose of simplifying calorie tracking and weight loss.

Jackson (Creative Director / Founder)

Mike (App developer / Founder)

Ayaka Fuji (Spline 3D Designer)

Spline 3D Modeling Creation

Spline Interactive Event Setting

Spline 3D animation

Website :https://supaband.com/

The concept of this project was to deliver an enjoyable and engaging experience for users while using the app through 3D interactive animations. These animations were designed to explain how the app works and how the human body burns calories in a fun and interactive way, utilizing tap actions created with Spline.

As a Spline designer, I proposed combining candy-coated materials for food items with hologram-like effects to represent advanced AI technology, aiming to captivate and delight users.

For the 3D objects in our scene, I used Blender assets for the chicken and strawberry, while the rest were created natively in Spline. This combination method not only saved time in creating the 3D models but also optimized the scene size. Blender assets, such as OBJ or FBX files, often have high polygon counts which can affect loading speed. So combining them with lightweight Spline-native models ensured better performance.

The character in the final sequence was created using a sphere and path in Spline. By adding animation, we successfully visualized the stomach gradually shrinking.

For our materials, I focused on creating rich and premium finishes that enhance the overall experience, even with simple modeling. I combined candy-coated finishes that play with light reflections for meals and hard textures reminiscent of tech devices to achieve a balanced and luxurious feel.

To refine the design, I first created and compared multiple materials, including oil painting or paint-like textures and soft, tactile finishes often seen in game assets, evaluating them side by side.

Given the use of a black background, we chose high-saturation, playful colors to make the 3D assets pop and convey a fun, toy-like vibe.

To make the materials easy to implement and replicate across other Spline objects, we avoided using texture images. This approach ensured a streamlined workflow that aligned with the client's requirements for simplicity and consistency.

For touch interaction, all scenes were designed for in-app use, utilizing Spline's Mouse Down event to add an interactive setting where users can tap the screen to transition to the next scene.

Each animation topic was separated into individual Spline data, and the transitions were designed to move to the next scene seamlessly using Scene Transition settings.

Live Demo: Scanning meals by camera