# Animate Interactive 3D Boxes - 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. [Tutorials](https://spline.design/academy/tutorials)
3. Animate Interactive 3D Boxes

# Animate Interactive 3D Boxes

Spline 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

## Part of

- [Animation & Interactions in Spline](https://spline.design/academy/collections/animation-interactions-in-spline/animate-interactive-3d-boxes)

## Related tutorials

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

[Bring an Interactive 3D Robot to LifeSpline 3DBeginner13 min](https://spline.design/academy/tutorials/bring-an-interactive-3d-robot-to-life)[Export Interactive Experiences Natively for iOS and visionOSSpline 3DIntermediate15 min](https://spline.design/academy/tutorials/export-interactive-experiences-natively-for-ios-and-visionos)[How to Export Native 3D for AndroidSpline 3DIntermediate12 min](https://spline.design/academy/tutorials/how-to-export-native-3d-for-android)

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