# Create an Interactive 3D Character using Variables - Spline Advanced | Feature Deep Dive - 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. [Courses](https://spline.design/academy/collections)
3. [Spline Advanced | Feature Deep Dive](https://spline.design/academy/collections/spline-advanced-feature-deep-dive)
4. Create an Interactive 3D Character using Variables

# Create an Interactive 3D Character using Variables

Lesson 5 of 17Spline 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

## Up next

[How to Create a 3D Carousel Interaction16 minAdvanced](https://spline.design/academy/collections/spline-advanced-feature-deep-dive/how-to-create-a-3d-carousel-interaction)[Continue](https://spline.design/academy/collections/spline-advanced-feature-deep-dive/how-to-create-a-3d-carousel-interaction)

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