Energy Creates is a national contest in Canada that invites youth aged 15 to 25 to explore how the energy sector shapes our lives, drives the economy, and strengthens Canada’s role on the global stage.

In this project, I worked with talented web designer Brian from Studio Digital to build an interactive gallery for the student showcase, combining 3D elements in Spline with seamless Webflow integration to create an engaging digital experience.

Brian Murchison (Webflow / Framer Designer) form Studio Digital

Ayaka Fuji (Spline 3D Designer)

Spline 3D Modeling Creation

Spline interaction setting

3D animation

Our goal was to develop a 3D website that showcases student artworks in an engaging and interactive way.

The 3D scenes were created in Spline and integrated into Webflow, with interactions such as mouse-down events triggering pop-up windows on the site.

I collaborated closely with 3D artists from Brian’s team, who provided background elements and some 3D models, as well as the Webflow designer.

My role focused on adding 3D models, setting up interactions, and creating animations within Spline.

Since we planned to showcase over 10 student artworks, the scene needed to be optimized for performance. For the modeling, I created simple abstract 3D props such as lights, sofas, and animated lines to enhance the environment without overwhelming the scene.

For the student names and description boards, I used Spline’s native text feature, allowing us to easily update the content.

As we were collaborating within the same scene, I focused on keeping the objects and groups well-organized to ensure a smooth editing process for the entire team.

To keep the visitor experience engaging without overwhelming the scene, I focused on creating simple, looped animations. These subtle movements added life to the environment while maintaining smooth performance across devices.

My main role was setting up interactions in Spline, including navigation buttons that connect to each student’s artwork area.

Visitors can click these buttons to switch between different student showcases.

Some 3D objects, such as lights and books, also feature mouse hover interactions.

These small details help enhance the overall 3D website experience, making it more dynamic and immersive.

This beautiful and interactive 3D website was published as an online gallery to showcase student work. By using Spline, we were able to explore more flexible and creative approaches to building a 3D web experience.

Collaborating with talented designer Brian was an amazing experience that allowed us to explore creative ideas and design something meaningful together.

Working as a team made the process not only more enjoyable but also more inspiring and combining different skills brought the project to a whole new level🌟