Built with Rive
Spline 3D and Rive Animation for SQ Intelligence Project
Ayaka Fuji
Verified
SQ Intelligence Program ⚙ Spline + Rive Project
📝Project Information
Mercury is a New Zealand-based multi-product utility retailer that provides electricity generation, as well as electricity, gas, broadband, and mobile services.
For this project, I worked with Daniel from the Auckland-based creative agency While and For.
Together, we created 3D animations for the website and interactive animations using Rive for Mercury’s newly launched Safety Intelligence (SQ) program.
It aims to make safer outcomes achievable for everyone across teams, organizations, and industries.
Safety Intelligence Program by Mercury NZ.
Project Team
Daniel Rojkind (Web Designer, Creative Director) form while and for
Ayaka Fuji (Spline 3D and Rive Designer) from LITTLE FUJI Design Studio
My role
Spline 3D modeling for mockups
Spline interaction setup for mockups
Rive interactive animations
🎯Our Goal
The goal of this project is to improve the user experience on the website and create interactive assets that clearly communicate the program and increase engagement.
The 3D scenes were initially created in Blender by another designer.
My role focused on rebuilding them in Spline to explore how they could be implemented interactively, as well as evaluating data size and performance.
Spline 3D Assets
🔶Modeling and Interaction Test with Spline
To create the 3D assets in Spline, I first worked on modeling and material development within Spline.
Reproducing the 3D look and feel based on the reference video provided by the client was particularly challenging.
Since it was difficult to achieve colored glass using Spline’s default material layers, I experimented with layering a transparent glass surface on the outside and a colored (yellow) surface inside to simulate the effect.
Although the final production used the original Blender-rendered video, I conducted interaction testing in Spline to explore interactive 3D possibilities.
After setting up interactions, I exported the scene with JavaScript and validated a workflow where the development team could control elements using object IDs.
Rive Animation
📺Animation Setting
In Rive, I created a total of seven animations. Four of them were graph-based animations.
While the graphic designs were originally provided in Figma, the gradients did not translate well into Rive.
As a result, I recreated the graphics directly in Rive and added smooth animations.
Micro-animations created with Rive allow for seamless integration into websites while maintaining a very lightweight file size, without compromising on visual quality such as gradients and transparency.
When sharing Rive files with the client, I ensured that all layers were clearly named and well-organized into groups to make team collaboration and editing as smooth as possible.
👆Interaction Setting
The Health, Safety & Wellbeing (HSW) strategy defines the long-term direction for safety and identifies 12 foundational areas.
We created this interactive animation using Rive.
Each icon includes a micro-animation with idle, hover, and active states.
On hover, the icon changes colour, and when a user clicks on a circle, the central icon switches to an active state and starts a looping animation.
I set up the animations and organized them using Rive’s components (Nested Artboard) feature, making it easier to manage and update each icon efficiently.
🌟Final Output
The final Rive animations were successfully integrated into the website, delivering visually rich and effective expressions while maintaining a lightweight file size.
This is an interactive 3D looping scene created in Spline, designed to respond to mouse hover interactions.
The final output is published on their website.
Daniel, who I collaborated with on this project, provided excellent creative direction and played a key role in its success.
It was an honour to collaborate with local creatives and companies in New Zealand, including the end client, Mercury.
Like this project
What the client had to say
Awesome experience working with Aya! She delivered some awesome work with a super tight deadline (sorry!!!). Excited to work together again!
Daniel Rojkind, while and for
Jan 14, 2026, Client
Posted Apr 6, 2026
Created Spline 3D mockups, micro animations, and interactive motion graphics using Rive for Mercury’s SQ Intelligence website.
Likes
0
Views
3
Timeline
Jan 7, 2026 - Jan 14, 2026
Clients
while and for
