Interactive Rive Experience for Gladiator Tennis

Gladiator Tennis is a platform for players to schedule matches, connect with other players, and get advanced tools, insights, and coaching. I joined Matthew McGillivray from M9Y to create a "Spotify Wrapped" style for their Tennis players. Matthew handled all the programming; my role was designing, animating, and making an interactive Rive experience.

The progress bar was created on one artboard and reused for the rest of the progress bars. Utilizing the Layouts feature, each progress bar is adjusted to the frame length. This is helpful for cases where not all users receive the same amount of screens. Therefore, the length of the progress should be adjusted automatically.

The main interactivity in this video is skipping forward and backward. The arrangement in the State Machine and the “hitboxes” (the red area in the following video) lets the player click left to re-watch the previous slide or click right to skip to the next slide, while keeping the change in the amount of the slides seamless.

After watching the interactive video, the shareable screen appears, letting the players share their stats on social media.

One of the challenges for the shareable screen design was to decide which layout was best to share on all kinds of platforms. One idea was to create a toggle to let the players choose to share a square or vertical layout. For simplicity, we decided to use just the square version.

For the interactive version click here -> https://rive.app/s/Tau2Y1UMjEuYGY6FE3gDDg/?runtime=rive-renderer