# Create Interactive Designs That React to Your Mouse with Hana - Spline Academy (https://spline.design/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> In this video, we’ll give you an introduction and show various examples of how you can turn designs into interactive experiences so that your designs…

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Create Interactive Designs That React to Your Mouse with Hana

# Create Interactive Designs That React to Your Mouse with Hana

HanaBeginner6 min

In this video, we’ll give you an introduction and show various examples of how you can turn designs into interactive experiences so that your designs respond to your cursor using Hana. We'll explore events like Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At, and Follow, and how to use them to trigger animations and effects.

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Making Things Click – Mouse Down Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Releasing the Click – Mouse Up Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Holding It Down – 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:26Make Your Design Face the Cursor – Look At Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Make Your Design Follow the Cursor – Follow Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Sneak Peek of the Next Tutorial](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Related resources

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

## Overview

- Hana
- 6 min
- Beginner

## Part of

- [Hana | Everything You Need To Know](https://spline.design/academy/collections/hana-everything-you-need-to-know/create-interactive-designs-that-react-to-your-mouse-with-hana)

## Related tutorials

[All tutorials](https://spline.design/academy/tutorials)

[Design Interactive Effects with Progressive Blur and Smoothing GradientsHanaBeginner9 min](https://spline.design/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Add Mouse-Based Interactions to 3D ObjectsSpline 3DBeginner14 min](https://spline.design/academy/tutorials/add-mouse-based-interactions-to-3d-objects)[How to Create 3D Data Visualizations in Spline Using Variables and Real-Time APIsSpline 3DAdvanced15 min](https://spline.design/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

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

#### Runtimes

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

#### Apps

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

#### Learn

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

#### Community

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

#### Company

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

#### Legal

- [Terms & Conditions](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.