Floss Boss

Floss Boss

Floss Boss

Year

2025-2026

Medium

UI/UX, Motion, Interaction

Tools

Tools

Rive

Role

Lead UI Motion Designer

Floss Boss is an interactive alternative control exhibit where two players team together to brush and floss the teeth of a lake monster from within its mouth using giant dental equipment.

The game was developed by a team of six designers and four developers, and is due to be presented at alt.ctrl.GDC in San Francisco this March.

My Role

I served as the primary UI motion designer for Floss Boss. In this role, I had to consider to smoothest way to convey information on the screen when the user interacts with the physical objects on set.

The primary goal was to indicate that a tooth is being cleaned when the user brushes or flosses the corresponding tooth in real life.

CLICK HERE TO TRY THE COMPONENT!

Initial Attempts

The cleaning and decaying animations for each tooth went through several iterations and were tested with real users to see how well they worked in an actual interactive setting.

The main feedback we received is that the animations were unnoticeable since the teeth were at the bottom of the screen. The creatures and decay were easily missable, appearing out of nowhere with not much indication.

Adjustments

Spawning

Many changes were made to make the animations less missable when interacted with. For instance, I gave each creature a jump animation, where they pop into the air when they first spawn, making them more apparent.

Cleaning

The suds now no longer simply float on the tooth during the cleaning animation. Now, the entire tooth gets filled with bubbles, starting from the bottom, creating a visual progress bar of sorts. The user knows how long they need to brush for the tooth to be clean. When the bubbles pop, the creatures plays a defeat animation, and a clean, sparkling tooth is revealed, indicating to the user that the task is complete.

Flossing

The flossing animations were designed to feel clean and satisfying, as if the player were slicing through the bacteria between the gums.

Another piece of feedback we received was that it was difficult to match the physical tooth to the one on the screen. I came up with the idea of printing cutouts of the creatures and attaching each one of a physical tooth. That way, when a player sees a tooth getting attacked on screen, they can correspond the attacking creature to the associated tooth in real life.

Cutouts

State Machines

All the UI animations were created in RIVE, allowing them to be interactable . I worked with developers to import the animations into HTML and trigger the interactions via JavaScript

This is a look behind the scenes at how the state machines are wired and hooked up!

Bonus

Soundtrack

Outside of animation and UI, I also handled the project's music and sound. Take a listen to the Shrimply Flossin', the gameplay theme for Floss Boss!

0:00/1:34

Designed to span the game's runtime of a minute, this track combine jazzy and tropical elements to fit the game's fast paced nature and underwater theming.

CHECK OUT THE FULL FLOSS BOSS SITE!

© Copyright Dayne Stein 2024

Contact

Dayne Stein

Links

Like whatcha see?

Let's get in touch!

© Copyright Dayne Stein 2024

Contact

Dayne Stein

Links

Like whatcha see?

Let's get in touch!

© Copyright Dayne Stein 2024

Contact

Dayne Stein

Links

Like whatcha see?

Let's get in touch!

Create a free website with Framer, the website builder loved by startups, designers and agencies.