# Animate Interactive 3D Boxes - Animation & Interactions in Spline - Spline Academy (https://spline.design/academy/tutorials/animate-interactive-3d-boxes)

> Hey there! In this tutorial, we're going to have some fun learning how to whip up an interaction where, as you move your cursor over multiple cubes, they…

1. [Academy](https://spline.design/academy)
2. [Courses](https://spline.design/academy/collections)
3. [Animation & Interactions in Spline](https://spline.design/academy/collections/animation-interactions-in-spline)
4. Animate Interactive 3D Boxes

# Animate Interactive 3D Boxes

Lesson 5 of 14Spline 3DIntermediate4 min

Hey there! In this tutorial, we're going to have some fun learning how to whip up an interaction where, as you move your cursor over multiple cubes, they playfully adjust their positions and switch up their colors.

And it will take us less than 5 minutes! 👀 Check Spline: <https://spline.design/>

Remix 👉 <https://app.spline.design/file/8f4650a0-c475-415a-a6d5-c914d47c16bd>

Share your version in our community at <https://community.spline.design/> We can't wait to see it 🤩

Happy learning!

## What you’ll learn

1. [0:00Introduction](https://www.youtube.com/watch?v=RmC2xEtXobE&t=0s)
2. [0:12Creating a cube](https://www.youtube.com/watch?v=RmC2xEtXobE&t=12s)
3. [0:31Adding colors and Materials](https://www.youtube.com/watch?v=RmC2xEtXobE&t=31s)
4. [1:29Adding Depth](https://www.youtube.com/watch?v=RmC2xEtXobE&t=89s)
5. [1:56Creating Mouse Hover Interaction](https://www.youtube.com/watch?v=RmC2xEtXobE&t=116s)
6. [2:39Cube duplication](https://www.youtube.com/watch?v=RmC2xEtXobE&t=159s)
7. [4:00Export options and Community inspiration](https://www.youtube.com/watch?v=RmC2xEtXobE&t=240s)

## Related resources

- [Interactive Cubes ExperienceTemplate](https://app.spline.design/academy/tutorials/animate-interactive-3d-boxes?redirect-duplicate-template-uuid=3274b34e-60fa-4a92-bb4a-2fb5383f3021&is-2d-file=false)
- [Mouse Hover EventDocument](https://docs.spline.design/interaction-states-events-and-actions/events/mouse-hover-event)
- [Cloner MotionDocument](https://docs.spline.design/designing-in-3-d/cloner-motion)
- [ComponentsDocument](https://docs.spline.design/designing-in-3-d/components)
- [Transition ActionDocument](https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action)

## Overview

- Spline 3D
- 4 min
- Intermediate

## Up next

[How to Create a Spinning 3D Icon15 minBeginner](https://spline.design/academy/collections/animation-interactions-in-spline/how-to-create-a-spinning-3d-icon)[Continue](https://spline.design/academy/collections/animation-interactions-in-spline/how-to-create-a-spinning-3d-icon)

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