# How to Build a Reactive 3D Orb with Motion and Interaction - Spline Academy (https://spline.design/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

> Today, we’ll show you how to create this tech-inspired interactive 3D orb using the cloner and mouse events in Spline, perfect for any web projects like…

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. How to Build a Reactive 3D Orb with Motion and Interaction

# How to Build a Reactive 3D Orb with Motion and Interaction

Spline 3DIntermediate7 min

Today, we’ll show you how to create this tech-inspired interactive 3D orb using the cloner and mouse events in Spline, perfect for any web projects like landing pages, product showcases, or any design project you like.

This scene was made by Vlad Kolokolnikov, check out the Spline community to find this and more 3D scenes free to remix.

Demo: <https://app.spline.design/community/file/306ca2a5-d1ab-46ac-a27c-198575c82db0>

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=0s)
2. [0:18Creating base object and adding materials](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=18s)
3. [1:30Using Cloner](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=90s)
4. [2:25Adding a Follow event](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=145s)
5. [3:46Adding a Distance event](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=226s)
6. [4:32Polishing the animation](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=272s)
7. [5:17Animating the cloner group](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=317s)
8. [5:47Final design](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=347s)
9. [6:13Export tips](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=373s)
10. [6:20Outro](https://www.youtube.com/watch?v=ol3f-vwZhBI&t=380s)

## Related resources

- [Reactive OrbTemplate](https://app.spline.design/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction?redirect-duplicate-template-uuid=684c8aec-6fec-4d6b-ae37-a3a1fd5fac27&is-2d-file=false)
- [Cloner MotionDocument](https://docs.spline.design/designing-in-3-d/cloner-motion)
- [How state-based animation worksDocument](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Materials & ShadingDocument](https://docs.spline.design/#%F0%9F%8C%88-materials-&-shading)

## Overview

- Spline 3D
- 7 min
- Intermediate

## Part of

- [Spline Advanced | Feature Deep Dive](https://spline.design/academy/collections/spline-advanced-feature-deep-dive/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)

## Related tutorials

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

[How to Create 3D Data Visualizations in Spline Using Variables and Real-Time APIsSpline 3DAdvanced15 min](https://spline.design/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)[Create Liquid Glass Materials in 3DSpline 3DBeginner12 min](https://spline.design/academy/tutorials/create-liquid-glass-materials-in-3d)[Create an Interactive Switch with Progressive Blur and GradientsHanaBeginner4 min](https://spline.design/academy/tutorials/create-an-interactive-switch-with-progressive-blur-and-gradients)

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