# Forma interaktiva, flytande 3D-former som följer muspekaren - Spline Academy (https://spline.design/sv/academy/tutorials/shape-interactive-3d-fluid-shapes-that-follow-the-cursor)

> I den här tutorialen visar vi hur du skapar designer inspirerade av vätskor med hjälp av shape blending. Tillsammans skapar vi fascinerande vattenliknande…

1. [Academy](https://spline.design/sv/academy)
2. [Tutorials](https://spline.design/sv/academy/tutorials)
3. Forma interaktiva, flytande 3D-former som följer muspekaren

# Forma interaktiva, flytande 3D-former som följer muspekaren

Spline 3DNybörjare12 min

I den här tutorialen visar vi hur du skapar designer inspirerade av vätskor med hjälp av shape blending. Tillsammans skapar vi fascinerande vattenliknande former, lägger till transparens och andra effekter för en blank estetik och bygger en interaktion där formerna följer muspekaren – så att dina designer får liv med mjuka animationer!

🌊 Remix: <https://app.spline.design/file/7f488663-6208-4bb0-802a-70bfaa865b27>

Upptäck fler fantastiska kreatörer och projekt #MadeInSpline på <https://community.spline.design/>

## Det här lär du dig

1. [0:00Intro](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=0s)
2. [0:21Designa abstrakta former](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=21s)
3. [1:46Så skapar du transparenta och blanka material](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=106s)
4. [4:38Snabbtips: Cloner + slumpmässighet för loopande animationer](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=278s)
5. [5:54Interaktiv magi: få formerna att följa muspekaren (händelsen Follow)](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=354s)
6. [9:31Snabbtips: skapa en iögonfallande animerad roterande plattform](https://www.youtube.com/watch?v=5W0BSoS24Jk&t=571s)

## Relaterade resurser

- [Water InteractionMall](https://app.spline.design/academy/tutorials/shape-interactive-3d-fluid-shapes-that-follow-the-cursor?redirect-duplicate-template-uuid=f4fc1df0-cb80-4a65-9db1-68f1440194c4&is-2d-file=false)
- [Shape BlendDokument](https://docs.spline.design/designing-in-3-d/shape-blend)
- [Materials & ShadingDokument](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [Follow EventDokument](https://docs.spline.design/interaction-states-events-and-actions/events/follow-event)

## Översikt

- Spline 3D
- 12 min
- Nybörjare

## Del av

- [Animation och interaktioner i Spline](https://spline.design/sv/academy/collections/animation-interactions-in-spline/shape-interactive-3d-fluid-shapes-that-follow-the-cursor)

## Relaterade tutorials

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

[Så lägger du till en Follow-interaktion på ett 3D-objektSpline 3DNybörjare6 min](https://spline.design/sv/academy/tutorials/how-to-add-a-follow-interaction-to-a-3d-object)[Skapa en 3D-scrollanimation och integrera den i FramerSpline 3DNybörjare12 min](https://spline.design/sv/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)[Designa en 3D-webbplats med Spline och FramerSpline 3DNybörjare14 min](https://spline.design/sv/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

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