# Design Interactions with Liquid Glass & 3D Transforms in Hana - Spline Academy (https://spline.design/academy/tutorials/design-interactions-with-liquid-glass-3d-transforms-in-hana)

> Hello! 👋

1. [Academy](https://spline.design/academy)
2. [Tutorials](https://spline.design/academy/tutorials)
3. Design Interactions with Liquid Glass & 3D Transforms in Hana

# Design Interactions with Liquid Glass & 3D Transforms in Hana

HanaBeginner16 min

Hello! 👋

In this tutorial, you will learn how to use the latest liquid glass effects in Spline Hana to create UI micro interactions. We will also discuss how to utilize the 3D projection tools to create stunning designs that utilize 3D perspective.

## What you’ll learn

1. [0:00Intro](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=0s)
2. [0:34Building a Liquid Glass toggle](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=34s)
3. [2:28Adding the Liquid Glass effect](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=148s)
4. [5:00Creating the interaction](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=300s)
5. [6:33More about Hana updates](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=393s)
6. [7:10Building stackable glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=430s)
7. [10:00How to export your Hana design](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=600s)
8. [10:12Experimenting with custom shapes](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=612s)
9. [10:32Creating a magnifying effect using Liquid Glass](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=632s)
10. [10:51Exploring 3D projections](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=651s)
11. [11:13Building a 3D portal](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=673s)
12. [12:16How to create a 3D Carousel](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=736s)
13. [13:33Bonus Tip](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=813s)
14. [13:38Auto Layout](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=818s)
15. [15:15Outro](https://www.youtube.com/watch?v=IZM1H1xBQdk&t=915s)

## Related resources

- [Vertical Glass StackTemplate](https://app.spline.design/academy/tutorials/design-interactions-with-liquid-glass-3d-transforms-in-hana?redirect-duplicate-template-uuid=cca331bd-acd6-4cb2-9d62-c3a376d6a526&is-2d-file=true)
- [3D TransformDocument](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana#%F0%9F%A7%8A-3d-transform)
- [Effects in HanaDocument](https://docs.spline.design/hana-a-canvas-for-interactivity/effects-in-hana#liquid-glass)

## Overview

- Hana
- 16 min
- Beginner

## Part of

- [Hana | Everything You Need To Know](https://spline.design/academy/collections/hana-everything-you-need-to-know/design-interactions-with-liquid-glass-3d-transforms-in-hana)

## Related tutorials

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

[Create Liquid Glass Materials in 3DSpline 3DBeginner12 min](https://spline.design/academy/tutorials/create-liquid-glass-materials-in-3d)[Build 3D Icons with VectorsSpline 3DBeginner10 min](https://spline.design/academy/tutorials/build-3d-icons-with-vectors)[Creating Refractive 3D Text in HanaHanaBeginner7 min](https://spline.design/academy/tutorials/creating-refractive-3d-text-in-hana)

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