From 2D to 3D - Next-Gen Interactive Design Tool “Spline Hana” Design Challenge
- 13 hours ago
- 4 min read
Hello, I’m Aya, a Spline Expert Designer.
I recently participated in a prize-based challenge event using Hana, one of Spline’s products — a 2D-based interactive design tool.
Spline × Contra Hana Challenge
What Is Hana, the Next-Generation Interactive Design Tool Canvas?
Hana is a design canvas that allows you to create interactive designs directly on the web.
While Spline is a 3D interactive design tool, Hana is fundamentally 2D-based and feels closer to Figma in terms of usability.
Because it is web-based, it runs smoothly in the browser.
Most importantly, it is no-code, meaning no programming is required.
You can create interactive designs by setting animations triggered by actions such as mouse hover and click.
It is available for free, so I encourage you to try it yourself 👇
The Hana × Contra Design Challenge “#DesignwithSplineHana”
Hana and Contra teamed up to host a challenge called #DesignWithSplineHana.
Participation is free, and nominated top works receive prize money. In total, more than $5,000 is awarded, making it an incredibly generous challenge.
One of the most notable aspects is the judging panel.
The judges include Ben, CEO of Contra; the Head Product Designer at Spline; the CEO of Not Boring Software, known for interactive software development; and a Product Designer from Meta — an impressive lineup.
Having a Meta product designer view your work is quite a rare opportunity.
Design Requirements for the Challenge
The challenge included several guidelines and requirements. In summary:
Design need to use any of these features in Hana (at least one):
3D transforms
3D shapes
3D projections
Liquid Glass
Design 100% in Hana (do not import work from elsewhere, or use only imported images).
If interactive, optimize your scene (avoid extremely complex scenes that wont run on average devices).
Meeting these conditions was mandatory.
Why I Decided to Join the Design Challenge
As a Spline Expert Designer, I usually work primarily with Spline 3D.
I had only recently started experimenting with Hana, so what I could achieve with it was still completely unknown.
Since there was only a little over a week between the challenge announcement and the deadline, I hesitated until the last minute.
However, a theme I wanted to create came to mind first — so I decided to just go for it.
The original deadline was February 10th (later extended), and I managed to complete and submit my work just in time the night before.
Honestly, I wasn’t confident that I could fully realize my envisioned storyboard in Hana.
I almost gave up several times. But as I explored more of Hana’s features, I gradually managed to shape it into something tangible.
The Interactive Motion Graphics Animations I Created in Hana
The works I created explore the themes of “death” and “life” through two complementary motion graphics animations.
“The Eye” – An Interactive Animation Exploring Death
Using Hana’s Liquid Glass effect and the Pen tool, I created a transparent tear.
After one blink, hovering over the eye triggers an interaction where it follows the mouse cursor.
After the second blink, the highlight disappears from the pupil, leaving only a dark, lifeless eye — telling a somber story.
To achieve the tear’s texture, I repeatedly fine-tuned the Liquid Glass settings.
Even though the eye is flat and 2D-based, I layered multiple effects and gradients to create depth and richness.
Live preview here ↓
“Teardrop” – An Interactive Animation Exploring Life
This second piece transforms the previous 2D eye into 3D.
After shedding a tear, a new life is born — expressing the theme of “life.”
Using the 3D Projection effect, I created a spherical 3D eye.
The falling tear was built using 3D Shapes.
Everything was created entirely in Hana, with no modeling involved.
Even without modeling, Hana allows for richly detailed 3D design expression, which makes me feel it has limitless potential.
This piece also includes mouse-hover interaction, meaning the work does not simply play — it responds to the viewer’s actions in the browser.
Interactive design is perfect for immersive experiences.
The ability to create responsive, two-way interaction through design is what makes it so compelling.
Live preview here ↓
The Most Challenging Part of the Process
Compared to Spline, Hana offers fewer interaction options, and it does not have keyframe timeline animation like After Effects or Rive.
As a result, the most difficult part was managing all animations within a single layer and adjusting timing down to the millisecond.
Since the animation settings and layer structure became quite complex, I consolidated all animations into one layer and carefully named each timeline for organization.
I built each sequence separately and then merged them into a single layer, allowing both detailed animation and interactive design to coexist.
Production Background and Quick Tutorial
One of the challenge requirements was to submit a short tutorial video explaining the work.
So I recorded the production process, edited it, and published a quick tutorial on YouTube.
It is a brief two-minute overview, but it shows how I set up interactive design in Hana and how 2D vector shapes can be transformed into 3D.
Check it on YouTube👇
The Benefits of Participating in Design Challenges
Although my submission was completed at the very last minute, regardless of prize money, it was a valuable opportunity to create work under clear deadlines and guidelines.
In client work, deadlines and purposes are clearly defined.
But in personal projects, it’s easy to keep delaying or lose direction — something many creators can probably relate to.
Since I am much more accustomed to Spline 3D, I honestly had some hesitation toward Hana.
However, I am very satisfied that I was able to realize my envisioned idea in Hana.
As I worked on it, my understanding deepened, and I discovered many new possibilities within Hana.
I’m truly glad I decided to participate!