# Maak met Hana interactieve designs die op je muis reageren - Hana | Alles wat je moet weten - Spline Academy (https://spline.design/nl/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> In deze video geven we je een introductie en laten we met verschillende voorbeelden zien hoe je designs met Hana omzet in interactieve ervaringen die op je…

1. [Academy](https://spline.design/nl/academy)
2. [Cursussen](https://spline.design/nl/academy/collections)
3. [Hana | Alles wat je moet weten](https://spline.design/nl/academy/collections/hana-everything-you-need-to-know)
4. Maak met Hana interactieve designs die op je muis reageren

# Maak met Hana interactieve designs die op je muis reageren

Les 5 van 15HanaBeginner6 min

In deze video geven we je een introductie en laten we met verschillende voorbeelden zien hoe je designs met Hana omzet in interactieve ervaringen die op je cursor reageren. We bekijken events als Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At en Follow, en hoe je ze gebruikt om animaties en effecten te triggeren.

## Wat je leert

1. [0:00Intro](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Dingen laten klikken – Mouse Down-event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32De klik loslaten – Mouse Up-event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Ingedrukt houden – Mouse Press-event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Hovermagie – Mouse Hover-event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Laat je design naar de cursor kijken – Look At-event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Laat je design de cursor volgen – Follow-event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Een voorproefje van de volgende tutorial](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Gerelateerde bronnen

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

## Overzicht

- Hana
- 6 min
- Beginner

## Hierna

[Maak een 2D-interactie die de cursor volgt8 minBeginner](https://spline.design/nl/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)[Verder](https://spline.design/nl/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

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

De 3D- en 2D-editor voor teams en hun agents. Publiceer op het web, iOS en Android.

#### Vraag AI naar Spline

#### Producten

- [3D-design](https://spline.design/nl/3d-design)
- [Hana](https://spline.design/nl/hana)
- [Omma](https://omma.build)
- [3D genereren met AI](https://spline.design/nl/ai-generate)
- [Spline MCP](https://spline.design/nl/mcp)
- [Spline Arena](https://spline.design/nl/arena)
- [Prijzen](https://spline.design/nl/pricing)
- [Enterprise](https://spline.design/nl/enterprise)

#### Runtimes

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

#### Apps

- [Downloaden](https://spline.design/nl/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Spline Mirror downloaden](https://spline.design/download-mirror)

#### Leren

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

#### Community

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

#### Bedrijf

- [Klanten](https://spline.design/nl/customers)
- [Vacatures](https://www.ycombinator.com/companies/spline/jobs)
- [Beveiliging](https://spline.design/nl/security)

#### Juridisch

- [Algemene voorwaarden](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.