# Create an Interactive 3D Character using Variables - Spline Academy (https://spline.design/academy/tutorials/create-an-interactive-3d-character-using-variables)

> Hey there! In this video, we're going to show you how to bring a cute interactive 3D Pufferfish character to life. Check Spline: https://spline.design/

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Create an Interactive 3D Character using Variables

# Create an Interactive 3D Character using Variables

Spline 3DAdvanced17 min

Hey there! In this video, we're going to show you how to bring a cute interactive 3D Pufferfish character to life. Check Spline: <https://spline.design/>

We'll use variables to spark events that change the little guy's size and position. The more you click on the pufferfish, the more he puffs up and eventually floats to the top of the landing page.

We'll also walk you through how to create and animate various elements of the Pufferfish. You'll see them grow with the fish and add playful effects like bouncing when the mouse gets close.

So, let's dive in, explore the magic of variables, and have a blast creating interactive scenes!

🐡 Remix: <https://app.spline.design/file/810351d5-4fd8-4f85-92b2-286329f49a3f> 🌐 Live Site: <https://safe-value-478717.framer.app/>

Learn more about Variables: 👉 <https://youtu.be/Id%5FSZVCUVMM> 📘 <https://docs.spline.design/>

✨ Join our Spline community for inspiration and share your designs. <https://community.spline.design/>

💬 ❤️ Share your tutorial suggestions in the comments.

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=0s)
2. [0:34Creating and Using Variables](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=34s)
3. [4:29Adding Different Elements](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=269s)
4. [8:34Animating Elements and Making them Follow Growth](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=514s)
5. [15:02Interactive Effects and Exporting](https://www.youtube.com/watch?v=eCxLYk2rNzg&t=902s)

## Related resources

- [Pufferfish Template](https://app.spline.design/academy/tutorials/create-an-interactive-3d-character-using-variables?redirect-duplicate-template-uuid=4c31a93c-9867-4864-9e5b-58eb843e508d&is-2d-file=false)
- [VariablesDocument](https://docs.spline.design/interaction-states-events-and-actions/variables)
- [Variable Change EventDocument](https://docs.spline.design/interaction-states-events-and-actions/events/variable-change-event)
- [Conditional ActionDocument](https://docs.spline.design/interaction-states-events-and-actions/actions/conditional-action)

## Overview

- Spline 3D
- 17 min
- Advanced

## Part of

- [Spline Advanced | Feature Deep Dive](https://spline.design/academy/collections/spline-advanced-feature-deep-dive/create-an-interactive-3d-character-using-variables)

## Related tutorials

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

[Embed Interactive 3D Scenes into Wix WebsitesSpline 3DBeginner5 min](https://spline.design/academy/tutorials/embed-interactive-3d-scenes-into-wix-websites)[Build an AI Voice Assistant in 3DSpline 3DAdvanced13 min](https://spline.design/academy/tutorials/build-an-ai-voice-assistant-in-3d)[Add Look At Animations to 3D ObjectsSpline 3DBeginner10 min](https://spline.design/academy/tutorials/add-look-at-animations-to-3d-objects)

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