The Countdown is an active real-world gaming experience that blends fitness, exploration, and rewards into one electrifying journey.

Designed around movement and interaction, the experience transforms everyday activity into engaging challenges connected to real-world rewards and achievements.

For this project, I used Spline to recreate the concept of collecting reward coins while walking through the city as an immersive interactive 3D experience.

This project was created in collaboration with the Sydney-based full-service digital agency Refract, where I was responsible for creating the interactive 3D scenes using Spline.

Ayaka Fuji (Spline 3D Designer) from LITTLE FUJI Design Studio

James Wu and Dev team from Refract (Website Development with Webflow)

Spline 3D Modeling Creation (Token Coins, a walking man)

Spline interaction setting

Responsive setting

The experience focuses on creating visually engaging moments through animation, hover interactions, and dynamic transitions that enhance user immersion and participation.

The initial scope of the project focused on updating the existing Spline scenes provided by the client. The original scenes were designed for fixed-size layouts, so one of the primary goals was to improve the experience with responsive settings optimized for both desktop and mobile devices.

Another key objective was to add new 3D elements to better communicate the gameplay experience, including token coins and an animated walking character representing users exploring the city and collecting rewards.

To further enhance the sense of immersion and create a more dynamic 3D experience, I additionally proposed a multi-camera animation system with cinematic camera transitions. This included custom camera logic where the scene dynamically shifts and transitions at each step, creating a more interactive and engaging storytelling experience throughout the journey.

The token coins added throughout the scene were created using The Countdown logo provided by the client as an SVG asset.

I imported the SVG into Spline and developed custom-designed 3D coins specifically for the project.

A total of five coins were placed across different steps within the experience. To reinforce the concept of users exploring the city and collecting rewards, I created an interaction where each coin spins once and disappears when the character walks nearby.

These micro-interactions helped enhance the sense of progression and added playful visual feedback to the overall interactive experience.

Another key addition to the project was a 3D character representing the user within the experience.

To keep the scene lightweight and inclusive, I selected a simple gender-neutral character model and integrated it into Spline as an FBX asset with a looping walking animation.

The character continuously walks through the city scene, and moves to each destination when users click on the numbered steps.

To achieve smoother movement and better camera composition, I created separate hidden motion paths for the character using Spline’s Align Path animation feature.

When users click on each step, the camera transitions to a close-up view of the selected area.

To create this dynamic camera system, I placed multiple cameras throughout the scene and assigned hit areas to each step.

This allowed the experience to smoothly transition between different viewpoints as users explored the city.

These cinematic camera transitions helped enhance the sense of immersion and made the overall 3D experience feel more dynamic and interactive.

After completing all animations and interaction setups, I added Screen Resize Events for responsive optimization.

I tested the integrated Webflow website on mobile devices to ensure that every step remained clickable and that all text elements stayed clearly visible across different screen sizes.

To achieve this, I carefully adjusted individual object scaling and camera zoom values for each responsive breakpoint, optimizing the overall 3D experience for desktop, tablet, and mobile environments.

The final interactive Spline scene is now fully integrated into The Countdown website.

Alongside the delivery files, I also provided the client with documentation explaining how to update and manage the Spline scene for future edits and maintenance.

James, who collaborated with me on this project, provided excellent creative direction and support throughout the production process. Here is his review:

“Ayaka has been amazing to work with, super patient, professional and proficient. I would recommend her.”

It was a wonderful opportunity to collaborate with the Sydney-based creative team at Refract and contribute to creating an immersive interactive 3D web experience.