# Interaktive Designs, die auf deine Maus reagieren, mit Hana erstellen - Spline Academy (https://spline.design/de/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> In diesem Video geben wir dir eine Einführung und zeigen verschiedene Beispiele, wie du mit Hana Designs in interaktive Erlebnisse verwandelst, die auf…

1. [Academy](https://spline.design/de/academy)
2. [Tutorials](https://spline.design/de/academy/tutorials)
3. Interaktive Designs, die auf deine Maus reagieren, mit Hana erstellen

# Interaktive Designs, die auf deine Maus reagieren, mit Hana erstellen

HanaEinsteiger6 Min.

In diesem Video geben wir dir eine Einführung und zeigen verschiedene Beispiele, wie du mit Hana Designs in interaktive Erlebnisse verwandelst, die auf deinen Cursor reagieren. Wir erkunden Events wie Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At und Follow und zeigen, wie du damit Animationen und Effekte auslöst.

## Das lernst du

1. [0:00Intro](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Klicks auslösen – Mouse-Down-Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Den Klick loslassen – Mouse-Up-Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Gedrückt halten – Mouse-Press-Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Hover-Magie – Mouse-Hover-Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Dein Design zum Cursor ausrichten – Look-At-Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Dein Design dem Cursor folgen lassen – Follow-Event](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Vorschau auf das nächste Tutorial](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Weitere Ressourcen

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

## Überblick

- Hana
- 6 Min.
- Einsteiger

## Teil von

- [Hana | Alles, was du wissen musst](https://spline.design/de/academy/collections/hana-everything-you-need-to-know/create-interactive-designs-that-react-to-your-mouse-with-hana)

## Ähnliche Tutorials

[Alle Tutorials](https://spline.design/de/academy/tutorials)

[Interaktive Effekte mit Progressive Blur und weichen Verläufen designenHanaEinsteiger9 Min.](https://spline.design/de/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Mausbasierte Interaktionen für 3D-ObjekteSpline 3DEinsteiger14 Min.](https://spline.design/de/academy/tutorials/add-mouse-based-interactions-to-3d-objects)[3D-Datenvisualisierungen in Spline mit Variablen und Echtzeit-APIs erstellenSpline 3DProfi15 Min.](https://spline.design/de/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

Der 3D- und 2D-Editor für Teams und ihre Agenten. Veröffentliche im Web, auf iOS und Android.

#### Frag die KI zu Spline

#### Produkte

- [3D-Design](https://spline.design/de/3d-design)
- [Hana](https://spline.design/de/hana)
- [Omma](https://omma.build)
- [KI-3D-Generierung](https://spline.design/de/ai-generate)
- [Spline MCP](https://spline.design/de/mcp)
- [Spline Arena](https://spline.design/de/arena)
- [Preise](https://spline.design/de/pricing)
- [Enterprise](https://spline.design/de/enterprise)

#### Runtimes

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

#### Apps

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

#### Lernen

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

#### Community

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

#### Unternehmen

- [Kunden](https://spline.design/de/customers)
- [Karriere](https://www.ycombinator.com/companies/spline/jobs)
- [Sicherheit](https://spline.design/de/security)

#### Rechtliches

- [AGB](https://spline.design/terms)
- [Datenschutz](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.