# Skapa interaktiva designer som reagerar på musen med Hana - Spline Academy (https://spline.design/sv/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> I den här videon ger vi en introduktion och visar olika exempel på hur du kan göra designer till interaktiva upplevelser som reagerar på muspekaren med…

1. [Academy](https://spline.design/sv/academy)
2. [Tutorials](https://spline.design/sv/academy/tutorials)
3. Skapa interaktiva designer som reagerar på musen med Hana

# Skapa interaktiva designer som reagerar på musen med Hana

HanaNybörjare6 min

I den här videon ger vi en introduktion och visar olika exempel på hur du kan göra designer till interaktiva upplevelser som reagerar på muspekaren med Hana. Vi utforskar händelser som Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At och Follow, och hur du använder dem för att utlösa animationer och effekter.

## Det här lär du dig

1. [0:00Intro](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Få saker att klicka – händelsen Mouse Down](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Släppa klicket – händelsen Mouse Up](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Hålla nedtryckt – händelsen Mouse Press](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56Hover-magi – händelsen Mouse Hover](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Få designen att vända sig mot muspekaren – händelsen Look At](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Få designen att följa muspekaren – händelsen Follow](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57En försmak av nästa tutorial](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Relaterade resurser

- [Interactive Flat IconsMall](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)

## Översikt

- Hana
- 6 min
- Nybörjare

## Del av

- [Hana | Allt du behöver veta](https://spline.design/sv/academy/collections/hana-everything-you-need-to-know/create-interactive-designs-that-react-to-your-mouse-with-hana)

## Relaterade tutorials

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

[Designa interaktiva effekter med progressiv oskärpa och mjuka övertoningarHanaNybörjare9 min](https://spline.design/sv/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Lägg till musbaserade interaktioner på 3D-objektSpline 3DNybörjare14 min](https://spline.design/sv/academy/tutorials/add-mouse-based-interactions-to-3d-objects)[Så skapar du 3D-datavisualiseringar i Spline med variabler och API:er i realtidSpline 3DAvancerad15 min](https://spline.design/sv/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

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

3D- och 2D-editorn för team och deras agenter. Publicera på webben, iOS och Android.

#### Fråga AI om Spline

#### Produkter

- [3D-design](https://spline.design/sv/3d-design)
- [Hana](https://spline.design/sv/hana)
- [Omma](https://omma.build)
- [3D-generering med AI](https://spline.design/sv/ai-generate)
- [Spline MCP](https://spline.design/sv/mcp)
- [Spline Arena](https://spline.design/sv/arena)
- [Priser](https://spline.design/sv/pricing)
- [Företag](https://spline.design/sv/enterprise)

#### Runtimes

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

#### Appar

- [Ladda ner](https://spline.design/sv/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Ladda ner Spline Mirror](https://spline.design/download-mirror)

#### Lär dig

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

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/sv/blog)
- [Ändringslogg](https://spline.design/sv/changelog)
- [Utbildning](https://spline.design/sv/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/sv/affiliate)

#### Företaget

- [Kunder](https://spline.design/sv/customers)
- [Karriär](https://www.ycombinator.com/companies/spline/jobs)
- [Säkerhet](https://spline.design/sv/security)

#### Juridik

- [Villkor](https://spline.design/terms)
- [Integritet](https://spline.design/privacy)

#### Kontakt

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

© 2026 - Spline, Inc.