# Skapa interaktiva designer som reagerar på musen med Hana - Hana | Allt du behöver veta - 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. [Kurser](https://spline.design/sv/academy/collections)
3. [Hana | Allt du behöver veta](https://spline.design/sv/academy/collections/hana-everything-you-need-to-know)
4. Skapa interaktiva designer som reagerar på musen med Hana

# Skapa interaktiva designer som reagerar på musen med Hana

Lektion 5 av 15HanaNybö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

## Nästa

[Skapa en 2D-interaktion som följer muspekaren8 minNybörjare](https://spline.design/sv/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)[Fortsätt](https://spline.design/sv/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

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