At CYFRON SOFTWARE TRADING, we often highlight tools that reflect our core values—usability, innovation, aesthetic clarity, and practical design. Today we’re taking a closer look at HANA, a 2D canvas editor developed by Spline 3D, which brings a streamlined, visual-first approach to web interface design with zero lines of code.
What makes HANA stand out is its ability to generate fully interactive and animated UI components directly in the browser. Designers and developers alike can create and modify complex layouts without diving into traditional front-end programming. This opens up new pathways for collaboration between design and development teams and accelerates prototyping, iteration, and deployment cycles.
In a recent hands-on build, a standard 1920×1080 screen frame was used to create a refined card-style layout—echoing the grid clarity of tools like Figma. Rounded cards, replicated using simple keyboard shortcuts (Control + D), were arranged into a parent frame called “card container.” Typography was thoughtfully implemented using the BB Boss New font in black, with heading sizes finalized at 125px and subheadings at 30px. Background hues were adjusted to an elegant RGB(242, 242, 251), enhancing readability while keeping visual fatigue low.
From this point, HANA’s strengths in visual dynamics began to shine. A 3D projection effect with a cylindrical profile added depth to the layout. A continuous 10-second Y-axis rotation transformed an otherwise static UI into a subtle, engaging animation—one that loops smoothly using linear easing. Additional elements, like liquid glass overlays and mouse-following triangle shapes, contributed to a high-touch, reactive interface. These enhancements weren’t achieved through complex JavaScript libraries, but through sliders, toggles, and value inputs—all within the HANA environment.
Exporting and integration were similarly seamless. After hiding unnecessary branding, enabling page scroll, and adjusting display mode to “cover,” the project was embedded into a basic HTML template—reminding us that deployment doesn’t have to be complicated. Simple styling tweaks (like zeroing out margins) ensured the design fit edge-to-edge on all viewports. HANA’s output is responsive and cross-device friendly, performing well across modern desktops and mobile screens alike.
The implications here are important. For software development teams, HANA offers a way to delegate more of the interface construction to non-developers while preserving quality and interactivity. Product managers and UX designers can visually prototype and present highly functional materials without waiting for front-end implementation. Meanwhile, developers are free to focus on core logic, backend services, and integration—a win-win in time and resource management.
Looking ahead, the potential for AI integration further strengthens HANA's position as a forward-thinking tool. Automating layout suggestions or adaptive behaviors based on user data could turn HANA into a dynamic co-pilot for interface development.
At CYFRON, tools like HANA reinforce our pursuit of design systems that are beautiful to look at, intuitive to use, and efficient to build. It’s not about eliminating coding—it’s about empowering teams to get more done, together.