# Gumawa ng mga Interactive na Design na Tumutugon sa Mouse Mo gamit ang Hana - Spline Academy (https://spline.design/fil/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> Sa video na ito, magbibigay kami ng introduksyon at magpapakita ng iba't ibang halimbawa kung paano gawing interactive experience ang mga design mo para…

1. [Academy](https://spline.design/fil/academy)
2. [Mga Tutorial](https://spline.design/fil/academy/tutorials)
3. Gumawa ng mga Interactive na Design na Tumutugon sa Mouse Mo gamit ang Hana

# Gumawa ng mga Interactive na Design na Tumutugon sa Mouse Mo gamit ang Hana

HanaBaguhan6 min

Sa video na ito, magbibigay kami ng introduksyon at magpapakita ng iba't ibang halimbawa kung paano gawing interactive experience ang mga design mo para tumugon ang mga ito sa cursor mo gamit ang Hana. Tutuklasin namin ang mga event gaya ng Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At at Follow, at kung paano gamitin ang mga ito para mag-trigger ng mga animation at effect.

## Ang matututunan mo

1. [0:00Intro](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Pag-click sa mga Bagay – Mouse Down Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Pagbitaw sa Click – Mouse Up Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Pagdiin nang Matagal – Mouse Press Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Hover Magic – Mouse Hover Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Paharapin ang Design Mo sa Cursor – Look At Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Pasunurin ang Design Mo sa Cursor – Follow Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Silip sa Susunod na Tutorial](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Mga kaugnay na resource

- [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 HanaDokumento](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDokumento](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Overview

- Hana
- 6 min
- Baguhan

## Bahagi ng

- [Hana | Lahat ng Kailangan Mong Malaman](https://spline.design/fil/academy/collections/hana-everything-you-need-to-know/create-interactive-designs-that-react-to-your-mouse-with-hana)

## Mga kaugnay na tutorial

[Lahat ng tutorial](https://spline.design/fil/academy/tutorials)

[Magdisenyo ng mga Interactive Effect gamit ang Progressive Blur at Smoothing GradientsHanaBaguhan9 min](https://spline.design/fil/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Magdagdag ng mga Mouse-Based na Interaction sa mga 3D ObjectSpline 3DBaguhan14 min](https://spline.design/fil/academy/tutorials/add-mouse-based-interactions-to-3d-objects)[Paano Gumawa ng mga 3D Data Visualization sa Spline gamit ang mga Variable at Real-Time APISpline 3DAdvanced15 min](https://spline.design/fil/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

Ang 3D at 2D editor para sa mga team at kanilang mga agent. I-publish sa web, iOS at Android.

#### Magtanong sa AI tungkol sa Spline

#### Mga Produkto

- [3D Design](https://spline.design/fil/3d-design)
- [Hana](https://spline.design/fil/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/fil/ai-generate)
- [Spline MCP](https://spline.design/fil/mcp)
- [Spline Arena](https://spline.design/fil/arena)
- [Presyo](https://spline.design/fil/pricing)
- [Enterprise](https://spline.design/fil/enterprise)

#### Runtimes

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

#### Apps

- [I-download](https://spline.design/fil/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [I-download ang Spline Mirror](https://spline.design/download-mirror)

#### Matuto

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/fil/blog)
- [Changelog](https://spline.design/fil/changelog)
- [Edukasyon](https://spline.design/fil/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/fil/affiliate)

#### Kumpanya

- [Mga Customer](https://spline.design/fil/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/fil/security)

#### Legal

- [Mga Tuntunin at Kundisyon](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.