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

> Hello! 👋

1. [Academy](https://spline.design/academy)
2. [Courses](https://spline.design/academy/collections)
3. [Hana | Everything You Need To Know](https://spline.design/academy/collections/hana-everything-you-need-to-know)
4. Design Interactions with Liquid Glass & 3D Transforms in Hana

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

Lesson 3 of 15HanaBeginner16 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

## Up next

[Explore 3D Projections and Noise Effects8 minBeginner](https://spline.design/academy/collections/hana-everything-you-need-to-know/explore-3d-projections-and-noise-effects)[Continue](https://spline.design/academy/collections/hana-everything-you-need-to-know/explore-3d-projections-and-noise-effects)

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