# Create Animated 3D Blobs that React to Your Mouse - Spline 101 | Build Your First Interactive Scene - Spline Academy (https://spline.design/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse)

> In this beginner-friendly tutorial, we’ll start from scratch and learn how to create colorful, animated, and interactive 3D blobs, using Shape Blend.

1. [Academy](https://spline.design/academy)
2. [Courses](https://spline.design/academy/collections)
3. [Spline 101 | Build Your First Interactive Scene](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene)
4. Create Animated 3D Blobs that React to Your Mouse

# Create Animated 3D Blobs that React to Your Mouse

Lesson 15 of 16Spline 3DBeginner12 min

In this beginner-friendly tutorial, we’ll start from scratch and learn how to create colorful, animated, and interactive 3D blobs, using Shape Blend.

We’ll walk you through some easy tips for applying colors and textures to create smooth transitions and natural-looking gradients.

Plus, we’ll explore how to add interactive events, like changing the shape of the blob when you hover over it.

\--

Discover more amazing creators and projects #MadeInSpline at <https://community.spline.design/>

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=l32kDk5DU00&t=0s)
2. [0:24Creating a Blob with Shape Blend](https://www.youtube.com/watch?v=l32kDk5DU00&t=24s)
3. [1:31Adding Colors](https://www.youtube.com/watch?v=l32kDk5DU00&t=91s)
4. [3:21Adding Glow Effects and Textures](https://www.youtube.com/watch?v=l32kDk5DU00&t=201s)
5. [5:20Animating Our Blob](https://www.youtube.com/watch?v=l32kDk5DU00&t=320s)
6. [6:49How to Make the Animation Loop](https://www.youtube.com/watch?v=l32kDk5DU00&t=409s)
7. [8:32Interactive Effect with Cursor](https://www.youtube.com/watch?v=l32kDk5DU00&t=512s)
8. [9:44Quick Tips](https://www.youtube.com/watch?v=l32kDk5DU00&t=584s)
9. [10:38Other Examples of Interactive Scenes with Shape Blend](https://www.youtube.com/watch?v=l32kDk5DU00&t=638s)
10. [11:00Our Spline Community](https://www.youtube.com/watch?v=l32kDk5DU00&t=660s)
11. [11:05Be Our Next Designer of the Week!](https://www.youtube.com/watch?v=l32kDk5DU00&t=665s)

## Related resources

- [Animated Shape BlendTemplate](https://app.spline.design/academy/tutorials/create-animated-3d-blobs-that-react-to-your-mouse?redirect-duplicate-template-uuid=546ba9b3-f563-43e4-bbd7-a72c5941902e&is-2d-file=false)
- [Shape BlendDocument](https://docs.spline.design/designing-in-3-d/shape-blend)
- [Materials & ShadingDocument](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)
- [How state-based animation worksDocument](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Follow EventDocument](https://docs.spline.design/interaction-states-events-and-actions/events/follow-event)

## Overview

- Spline 3D
- 12 min
- Beginner

## Up next

[Turn Your Spline Designs into Interactive Web Experiences10 minBeginner](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)[Continue](https://spline.design/academy/collections/spline-101-build-your-first-interactive-scene/turn-your-spline-designs-into-interactive-web-experiences)

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

The 3D and 2D editor for teams and their agents. Ship to the web, iOS and Android.

#### Ask AI about Spline

#### Products

- [3D Design](https://spline.design/3d-design)
- [Hana](https://spline.design/hana)
- [Omma](https://omma.build)
- [AI 3D Generation](https://spline.design/ai-generate)
- [Spline MCP](https://spline.design/mcp)
- [Pricing](https://spline.design/pricing)
- [Enterprise](https://spline.design/enterprise)

#### Runtimes

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

#### Apps

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

#### Learn

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

#### Community

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

#### Company

- [Customers](https://spline.design/customers)
- [Careers](https://www.ycombinator.com/companies/spline/jobs)
- [Security](https://spline.design/security)

#### Legal

- [Terms & Conditions](https://spline.design/terms)
- [Privacy](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.