# Membuat Desain Interaktif yang Bereaksi terhadap Mouse dengan Hana - Spline Academy (https://spline.design/id/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> Dalam video ini, kami akan memberikan pengantar dan menunjukkan berbagai contoh cara mengubah desain menjadi pengalaman interaktif, sehingga desain Anda…

1. [Academy](https://spline.design/id/academy)
2. [Tutorial](https://spline.design/id/academy/tutorials)
3. Membuat Desain Interaktif yang Bereaksi terhadap Mouse dengan Hana

# Membuat Desain Interaktif yang Bereaksi terhadap Mouse dengan Hana

HanaPemula6 mnt

Dalam video ini, kami akan memberikan pengantar dan menunjukkan berbagai contoh cara mengubah desain menjadi pengalaman interaktif, sehingga desain Anda merespons kursor di Hana. Kita akan menjelajahi event seperti Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At, dan Follow, serta cara memakainya untuk memicu animasi dan efek.

## Yang akan Anda pelajari

1. [0:00Intro](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Membuat Objek Bisa Diklik – Event Mouse Down](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Melepas Klik – Event Mouse Up](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Menahan Klik – Event Mouse Press](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Keajaiban Hover – Event Mouse Hover](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Membuat Desain Menghadap Kursor – Event Look At](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Membuat Desain Mengikuti Kursor – Event Follow](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Sekilas Tutorial Berikutnya](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Sumber terkait

- [Interactive Flat IconsTemplate](https://app.spline.design/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana?redirect-duplicate-template-uuid=2a05e307-90dd-4666-bc8b-f2b7f3c2cce8&is-2d-file=true)
- [Designing in HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDokumen](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Ikhtisar

- Hana
- 6 mnt
- Pemula

## Bagian dari

- [Hana | Semua yang Perlu Anda Ketahui](https://spline.design/id/academy/collections/hana-everything-you-need-to-know/create-interactive-designs-that-react-to-your-mouse-with-hana)

## Tutorial terkait

[Semua tutorial](https://spline.design/id/academy/tutorials)

[Mendesain Efek Interaktif dengan Progressive Blur dan Gradien HalusHanaPemula9 mnt](https://spline.design/id/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Menambahkan Interaksi Berbasis Mouse ke Objek 3DSpline 3DPemula14 mnt](https://spline.design/id/academy/tutorials/add-mouse-based-interactions-to-3d-objects)[Cara Membuat Visualisasi Data 3D di Spline dengan Variabel dan API Real-TimeSpline 3DLanjutan15 mnt](https://spline.design/id/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[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.