April 23, 2025
Introducing Hana
A new canvas for interactive design.
Hana presents a new approach for interactive design. Built from scratch with performance at its core, Hana is a real-time canvas to design and animate interactive 2D experiences — from polished interfaces to dynamic visuals, and deliver to production.
Hana empowers you to create rich, state-based content that behave, respond, and reacts within a fast and infinite canvas.
Capabilities
For Hana, we built a new kind of render engine that's able to process vector data really fast, in real-time. It gives creators access to modern vector network editing, state-based transitions, and GPU-accelerated effects — all in a collaborative, browser-native environment.
Everything you design in Hana is production-ready by default. Whether it’s a simple shape or a complex interactive experience, Hana’s engine is built to handle real-time interactions that can be easily embeddable in any website or app.
From precise vector drawing to soft shadows and blurs, Hana combines power and simplicity in a way that feels lightweight — yet limitless.
Experiences made with Hana
Real-Time Design Collaboration
Frames in Hana can be playable components that act independently, all in-editor. This simplifies the creation process by removing the need for an "Animate" mode. Instead, you can just interact with your experience by directly playing it on a Frame in the editor. Frames can also be exported individually as live URLs, images, and more in the future.
Share a link, and collaborators can jump in instantly to experience and contribute to your canvas. Every edit appears live. Feedback is immediate. It’s multiplayer by design, done right.
Hana takes advantage of Spline's 3D editor real-time collaboration system, which is already supported, so your team can move faster and stay in sync.
Vector networks made with Hana
Vector Networks in Real-time
Vector networks (a concept introduced in 2016 by Figma) enable the connection of more than two lines to a single point, which makes it easier to create all sorts of shapes.
Hana takes this approach to the next level, introducing the first system that allows the creation of vector networks for a real-time environment.
In addition, multi-level booleans let you create advanced shapes and fluid effects to achieve complex, animatable shapes easily.
Experiences made with Hana
Interactions and Animation
Use event-driven interactions to add behavior to your designs — from hover states to keyboard input. Animate transitions, build flows, and experiment with motion directly on the canvas. No switching tools.
With Hana, motion and interactivity become part of the design process, not an afterthought.
Experiences made with Hana
Export and Share for production
Similar to Spline's 3D Editor, in Hana, you can generate live interactive links from any Frame. Everything is optimized for embedding into a production-ready environment, so your work looks just as good in your deployment as it does in the editor.
Experiences made with Hana
The next era for interactivity
This is a new medium for interactive thinking. Whether you’re designing a product, crafting a UI interaction, or creating rich interactive experiences, Hana can help you bring your ideas to life.
Hana is the foundation for more to come.
It’s the first step in a broader vision of what is now the Spline's ecosystem, where design in 2D/3D and interactivity blend and deploy seamlessly.
We can’t wait to see what you make with Hana!
— The Spline Team 🌸