Skill
Role
Software
Rive Animation
Spline 3D Modeling
Spline 3D Animation
Interaction Design
Rive interactive animation design
Spline 3D modeling for mockups
Spline interaction setup for mockups
Rive
Spline
Mercury NZ
Rive Animation and Spline3D Design for Mercury NZ
Mercury is a New Zealand-based multi-product utility retailer providing electricity generation, as well as electricity, gas, broadband, and mobile services.
For this project, we collaborated with While and For, also based in New Zealand, to create 3D animations and interactive Rive animations for Mercury’s newly launched Safety Intelligence (SQ) programme website.
Project Summary and Objectives
This project was created in collaboration with While and For for Mercury NZ’s SQ Safety Intelligence Programme.
The goal was to improve the website’s user experience by developing interactive assets that clearly communicate the programme and increase engagement.
Using graphic designs provided by While and For in Figma, I created interactive diagrams, lightweight loop animations, and data visualisations in Rive.
We also explored interactive implementation with Spline 3D, focusing on performance and data optimisation for web use.
3D Modeling and Interaction Test with Spline
To explore interactive integration of 3D tiles representing the SQ Safety Intelligence Programme, we prototyped in Spline.
Recreating the look and feel from the reference video was challenging, particularly the colored glass effect.
To achieve this, I layered a transparent outer surface with a colored inner surface.
We rebuilt the models and materials in Spline, implemented mouse-based rotation, and evaluated visual quality and scene performance for web use.
The final Rive animations were successfully integrated into the website, delivering visually rich and effective expressions while maintaining a lightweight file size.
The final Rive animations were successfully integrated into the website, delivering visually rich and effective expressions while maintaining a lightweight file size.
FINAL OUTPUTS
Rive Animation and Spline3D Design for Mercury NZ
Rive Animation Development and Structured File Delivery
The Health, Safety & Wellbeing (HSW) strategy defines the long-term direction for safety and identifies 12 foundational areas.
This interactive animation was created using Rive in their website.
Each icon features three micro-animation states: idle, hover, and active.
On hover, the icon changes colour, and when a user clicks on a circle, the central icon switches to an active state and begins a looping animation.
The animations were structured using Rive’s Components, enabling efficient management and easy updates across all icons.
Spline 3D Interaction Prototype
We also created a prototype of an interactive Spline 3D scene, where tiles rotate based on button interactions on the website.
MouseDown triggers were set within Spline, and tile rotations were controlled using State Change Events.
The scene was exported for web use and shared with the development team along with object IDs for integration.
Although Spline 3D scenes were explored during the process, they were not used in the final implementation due to limitations of Spline in accurately reproducing the desired visual quality.
Rive Animation Development and Structured File Delivery
The Health, Safety & Wellbeing (HSW) strategy defines the long-term direction for safety and identifies 12 foundational areas.
This interactive animation was created using Rive in their website.
Each icon features three micro-animation states: idle, hover, and active.
On hover, the icon changes colour, and when a user clicks on a circle, the central icon switches to an active state and begins a looping animation.
The animations were structured using Rive’s Components, enabling efficient management and easy updates across all icons.
Spline 3D Interaction Prototype
We also created a prototype of an interactive Spline 3D scene, where tiles rotate based on button interactions on the website.
MouseDown triggers were set within Spline, and tile rotations were controlled using State Change Events.
The scene was exported for web use and shared with the development team along with object IDs for integration.
Although Spline 3D scenes were explored during the process, they were not used in the final implementation due to limitations of Spline in accurately reproducing the desired visual quality.
Rive Animation Development and Structured File Delivery
Micro-animations created with Rive enable seamless integration into websites while maintaining a lightweight file size, without compromising visual quality such as gradients and transparency.
Although the graphic designs were originally provided in Figma, gradient effects did not translate well into Rive, so adjustments were made during the process.
When delivering the Rive files, we organized the layers with clear naming, tags, and the Solo feature to ensure smooth collaboration and easy editing for the team.
Rive Animation and Spline3D Design for Mercury NZ