# Spline Hana - A design canvas powered by AI agents (https://spline.design/hana)

> Hana is Spline's 2D design canvas: GPU-accelerated vector editing, states and animations, and AI agents — its own or yours over MCP — designing with your team.

# A design canvas powered by AI agents

Design with your team, supported by AI agents, MCP, and GPU accelerated vector editing tools.

[Get started — it’s free ](https://app.spline.design?)

## Design in motion, powered by Hana

Discover examples built in Hana. Remix, rebuild, and explore how your ideas can become production-ready experiences.

Design Tools

## Familiar and advanced tools for professional design

Familiar design tools, advanced effects, and the structure to keep big projects organized.

- Frame-based infinite canvas
- Vector networks and Booleans
- Pages and Sections
- Gradients, Glass and 3D Shapes

Interactivity & Animation

## Bring your designs to life

Add motion and interactivity with states, events and animations — by hand, or ask the agent.

- States & Events
- Animate with Transition Actions
- Follow and Look At interactivity

AI Agents

## A canvas your agents can design on

Hana's own agent designs on the canvas, and yours can too — from Claude, Cursor or Codex.

- Builds frames, effects and interactions
- Several screens built in parallel
- Your own agent over MCP, on desktop
- Everything stays editable by hand

## A design tool, built for interactivity

A fast, familiar interface with the tools you need to design real-time interactive interfaces, motion and graphics.

- ### Familiar Design Tools  
Design on an infinite canvas with frames, pen tool, booleans, shapes and more.
- ### Powerful Interactivity  
Create interactive experiences with states, events, and actions.  
new
- ### Animated Experiences  
Add motion to your designs with States and Transitions.
- ### Visual Effects  
Use shadows, blurs, noise, glass and 3D to create real-time visual effects.
- ### Real-time booleans  
Create sophisticated boolean systems and animate them in real-time.
- ### Vector networks  
Make vector networks and add unique interactivity to it.
- ### On-canvas Preview  
Preview your interactivity and animations right on canvas.
- ### Production-Ready Exports  
Integrate your interactive designs into your websites, web apps, and digital products.

## Design together in real-time

Design interactivity on an infinite canvas with real-time collaboration. Organized on a shared workspace for your entire team.

### Real-time Multiplayer

Design together with your entire team on the same environment.

### Roles & Permissions

Take full control over individual Editor and Viewer roles.

### File Management

A shared team space to store and manage all files and projects.

### Notes & Feedback

Leave comments for your team or take notes directly in the editor.

## 

## Ship interactivity for the web

Seamlessly integrate interactive experiences into your websites, web apps, and digital products.

Move mouse or finger to interact

[Remix scene](https://app.spline.design/ui/2e2daf97-d4bb-4861-9ef6-81348aa5a77d)

Webflow Project

1

2

3

4

5

6

7

8

9

10

```
<!-- Import Hana Viewer -->
<script 
    type="module" 
    src="https://cdn.spline.design/@splinetool/hana-viewer@1.0.97/hana-viewer.js">
</script>

<!-- Add your design using the hana-viewer component -->
<hana-viewer 
    url="https://prod.spline.design/HfFj1WYWsj69dY8U-Eld/scene.hanacode"
</hana-viewer>
```

[Docs](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)

## Design. Collaborate. Ship.

Superpower your team to deliver production-ready interactive 2D and 3D experiences all in one platform.

[Get started — it's free ](https://app.spline.design/signin)