# Spline Hana - Kanvas desain yang didukung agen AI (https://spline.design/id/hana)

> Hana adalah kanvas desain 2D Spline: pengeditan vektor dengan akselerasi GPU, state dan animasi, serta agen AI — miliknya sendiri atau milik Anda lewat MCP — yang mendesain bersama tim Anda.

# Kanvas desain yang didukung agen AI

Desain bersama tim Anda, didukung agen AI, MCP, dan **alat pengeditan vektor dengan akselerasi GPU**.

[Mulai berkarya](https://app.spline.design/signin)[Hubungkan agen Anda](https://spline.design/id/mcp)

Pustaka

## Desain yang bergerak, didukung Hana

Temukan contoh-contoh yang dibuat di Hana. Remix, bangun ulang, dan jelajahi bagaimana ide Anda bisa menjadi pengalaman siap produksi.

[3D Circular](https://app.spline.design/ui/0c5cafee-bc08-47b1-aa31-41c30beae895)[Fire Character](https://app.spline.design/ui/b0d21f98-f238-4b2c-a6f0-b478719bcc3c)[3D Card](https://app.spline.design/ui/539d3930-61a4-47c9-8324-b81ecb4c93dc)[Cards](https://app.spline.design/ui/0f721512-9f57-455a-8ea9-4641e15a0ca4)[Path Icons](https://app.spline.design/ui/9389d529-f05b-4aa7-9360-11175d1b4e72)

[Noise](https://app.spline.design/ui/c0d70e64-db86-409e-90b5-d03e413eb554)[3D UI](https://app.spline.design/ui/ba70eea9-74e0-4b06-af5e-f622d88b719a)[Power](https://app.spline.design/ui/58ee653d-f29a-489d-83ba-6af3b2086a1a)[Glass Icons](https://app.spline.design/ui/c915f089-5725-47ac-a458-e2df51a45aa1)[Auto Layout](https://app.spline.design/ui/a3144449-bf5c-4189-a3f1-dda35c699bc4)

[Earth](https://app.spline.design/ui/8937cf42-317a-43cb-bbef-d3244437d8c6)[Japanese Text](https://app.spline.design/ui/248fa04b-dae6-4ef4-a457-0eef1e760fbc)[Masking](https://app.spline.design/ui/c7bd1796-a808-44be-8220-fffd02fafbdf)[Blend](https://app.spline.design/ui/98cec79c-bad6-4504-810b-f0a198625a99)[Hana Serif](https://app.spline.design/ui/da8a844d-cff7-403d-b544-d6a0dd8149bf)

Alat desain

## Alat yang familier dan canggih untuk desain profesional

Alat desain yang familier, efek canggih, dan struktur untuk menjaga proyek besar tetap rapi.

- Kanvas tanpa batas berbasis frame
- Jaringan vektor dan boolean
- Halaman dan section
- Gradien, kaca, dan bentuk 3D

Interaktivitas dan animasi

## Hidupkan desain Anda

Tambahkan gerak dan interaktivitas dengan state, event, dan animasi, secara manual atau dengan meminta agen.

- State dan event
- Animasi dengan transition action
- Interaktivitas Follow dan Look At

Agen AI

## Kanvas tempat agen Anda bisa mendesain

Agen bawaan Hana mendesain di kanvas, dan agen Anda juga bisa, dari Claude, ChatGPT, Cursor, atau klien MCP mana pun.

- Membangun frame, efek, dan interaksi
- Beberapa layar dibangun secara paralel
- Agen Anda sendiri lewat MCP
- Semuanya tetap bisa diedit manual
[Hubungkan agen Anda](https://spline.design/id/mcp)

Dibuat untuk interaktivitas

## Alat desain yang dibuat untuk interaktivitas

Antarmuka yang cepat dan familier dengan alat yang Anda butuhkan untuk mendesain antarmuka interaktif, gerak, dan grafis real-time.

- ### Alat desain yang familier  
Desain di kanvas tanpa batas dengan frame, pen tool, boolean, bentuk, dan banyak lagi.
- ### Interaktivitas yang canggih  
Buat pengalaman interaktif dengan state, event, dan action.
- ### Pengalaman beranimasi  
Tambahkan gerak ke desain Anda dengan state dan transisi.
- ### Efek visual  
Gunakan bayangan, blur, noise, kaca, dan 3D untuk membuat efek visual real-time.
- ### Boolean real-time  
Buat sistem boolean yang canggih dan animasikan secara real-time.
- ### Jaringan vektor  
Buat jaringan vektor dan tambahkan interaktivitas unik ke dalamnya.
- ### Pratinjau di kanvas  
Pratinjau interaktivitas dan animasi Anda langsung di kanvas.
- ### Ekspor siap produksi  
Integrasikan desain interaktif Anda ke situs web, aplikasi web, dan produk digital.

Kolaborasi

## Desain bersama, secara real-time

Desain interaktivitas di kanvas tanpa batas dengan kolaborasi real-time, tertata dalam workspace bersama untuk seluruh tim Anda.

### Multiplayer real-time

Desain bersama seluruh tim Anda di file yang sama.

### Peran dan izin

Kendalikan penuh peran Editor dan Viewer setiap orang.

### Manajemen file

Ruang tim bersama untuk menyimpan dan mengelola setiap file dan proyek.

### Catatan dan masukan

Tinggalkan komentar untuk tim Anda atau buat catatan langsung di editor.

Ekspor

## Rilis interaktivitas untuk web

Integrasikan pengalaman interaktif dengan mulus ke situs web, aplikasi web, dan produk digital Anda.

Gerakkan mouse atau jari Anda untuk berinteraksi[Remix scene](https://app.spline.design/ui/2e2daf97-d4bb-4861-9ef6-81348aa5a77d)

index.html

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

<!-- Add your design anywhere on the page -->
<hana-viewer
  url="https://prod.spline.design/HfFj1WYWsj69dY8U-Eld/scene.hanacode">
</hana-viewer>

```

[Webflow](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Framer](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Wix Studio](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[HTML / JS](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Notion](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)[Shopify](https://docs.spline.design/doc/exporting-in-hana/docqB6tzlb52)

## Mulai mendesain dengan Hana

Hubungkan agen Anda, undang tim, dan rilis desain pertama Anda hari ini.

[Spline](https://spline.design/id)

Editor 3D dan 2D untuk tim dan agen mereka. Rilis ke web, iOS, dan Android.

#### Tanya AI tentang Spline

#### Produk

- [Desain 3D](https://spline.design/id/3d-design)
- [Hana](https://spline.design/id/hana)
- [Omma](https://omma.build)
- [Pembuatan 3D dengan AI](https://spline.design/id/ai-generate)
- [Spline MCP](https://spline.design/id/mcp)
- [Spline Arena](https://spline.design/id/arena)
- [Harga](https://spline.design/id/pricing)
- [Enterprise](https://spline.design/id/enterprise)

#### Runtime

- [Web](https://spline.design/id/web)
- [iOS](https://spline.design/id/ios)
- [Android](https://spline.design/id/android)

#### Aplikasi

- [Unduh](https://spline.design/id/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Unduh Spline Mirror](https://spline.design/download-mirror)

#### Belajar

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/id/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Solusi](https://spline.design/solutions)

#### Komunitas

- [Komunitas Spline](https://community.spline.design)
- [Blog](https://spline.design/id/blog)
- [Changelog](https://spline.design/id/changelog)
- [Pendidikan](https://spline.design/id/education)
- [Contra](https://spline.design/contra)
- [Afiliasi](https://spline.design/id/affiliate)

#### Perusahaan

- [Pelanggan](https://spline.design/id/customers)
- [Karier](https://www.ycombinator.com/companies/spline/jobs)
- [Keamanan](https://spline.design/id/security)

#### Legal

- [Syarat & Ketentuan](https://spline.design/terms)
- [Privasi](https://spline.design/privacy)

#### Kontak

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.