# Skapa en 2D-interaktion som följer muspekaren - Spline Academy (https://spline.design/sv/academy/tutorials/create-a-2d-follow-interaction)

> Om det här är första gången du provar interaktiv 2D-design är det här ett perfekt ställe att börja! 😉 I den här tutorialen visar vi steg för steg hur du…

1. [Academy](https://spline.design/sv/academy)
2. [Tutorials](https://spline.design/sv/academy/tutorials)
3. Skapa en 2D-interaktion som följer muspekaren

# Skapa en 2D-interaktion som följer muspekaren

HanaNybörjare8 min

Om det här är första gången du provar interaktiv 2D-design är det här ett perfekt ställe att börja! 😉 I den här tutorialen visar vi steg för steg hur du enkelt skapar en 2D-interaktion som följer muspekaren (eller pekskärmens input på mobila enheter) med Hana, en ny canvas i realtid för att designa och animera interaktiva 2D-upplevelser.

Vi bygger den här lekfulla interaktionen med händelsen Follow och skapar en mjuk, flytande kedjereaktion. Det är ett roligt och enkelt sätt att ge din webbplats eller ditt projekt lite rörelse och personlighet.

Demo 👉 <https://app.spline.design/ui/98440491-bf75-4e54-ab6f-afa16fc04f7e>

Lär dig att skapa det här i 3D med Splines 3D-editor: <https://youtu.be/TQe5Ae16rE8>

## Det här lär du dig

1. [0:00Kom igång](https://www.youtube.com/watch?v=bKrapjgDBNo&t=0s)
2. [0:49Skapa ellipser och använda händelsen Follow](https://www.youtube.com/watch?v=bKrapjgDBNo&t=49s)
3. [2:41Justera dämpningsvärden och storlekar](https://www.youtube.com/watch?v=bKrapjgDBNo&t=161s)
4. [6:10Exportera och bädda in designen](https://www.youtube.com/watch?v=bKrapjgDBNo&t=370s)

## Relaterade resurser

- [Follow CirclesMall](https://app.spline.design/academy/tutorials/create-a-2d-follow-interaction?redirect-duplicate-template-uuid=3b7c3f0a-306e-4a88-aa07-e705edb96030&is-2d-file=true)
- [Designing in HanaDokument](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Hana EventsDokument](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana#hana-events)
- [Exporting as EmbedDokument](https://docs.spline.design/hana-a-canvas-for-interactivity/exporting-in-hana#exporting-as-embed-link)

## Översikt

- Hana
- 8 min
- Nybörjare

## Del av

- [Hana | Allt du behöver veta](https://spline.design/sv/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

## Relaterade tutorials

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

[Kom igång med interaktiv 2D i HanaHanaNybörjare17 min](https://spline.design/sv/academy/tutorials/get-started-with-interactive-2d-in-hana)[Så animerar du längs en bana med Hana och SplineHanaNybörjare7 min](https://spline.design/sv/academy/tutorials/how-to-animate-along-a-path-with-hana-and-spline)[Skapa interaktiva designer som reagerar på musen med HanaHanaNybörjare6 min](https://spline.design/sv/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

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