# Build an Interactive Keyboard with Hana (https://academy.spline.design/collections/hana-everything-you-need-to-know/build-an-interactive-keyboard-with-hana)

> A video tutorial from the Spline Academy.

- Product: Hana (2D)
- Level: beginner
- Duration: 9 min 22 s
- Published: 2025-07-09
- Video: https://www.youtube.com/watch?v=2hLXgB3JV_U
- Part of: [Hana | Everything You Need To Know](https://academy.spline.design/collections/hana-everything-you-need-to-know.md)

## About this tutorial

Hi there! 👋

In this tutorial, you’ll learn how to create an interactive keyboard made 100% in Hana. We’ll go through how to add shadows to create depth to our designs and how to apply key events to interact with our scene using our real-life keyboard. This design is very flexible and can be used in a lot of different ways. Let’s dive in!

Remix this demo here: https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c

## Chapters

- [0:00](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=0s) Intro
- [0:22](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=22s) Adding the base frame
- [0:34](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=34s) Creating the Keyboard base
- [1:14](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=74s) Adding shadows to the Keyboard base
- [1:37](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=97s) Creating letter and number keys
- [3:31](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=211s) Creating the Enter key
- [3:45](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=225s) Adding drop shadows to the numbers and letters
- [4:07](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=247s) Adding the key press event
- [6:57](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=417s) Building the screen interaction
- [8:50](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=530s) Final design
- [9:04](https://www.youtube.com/watch?v=2hLXgB3JV_U&t=544s) Outro

## Related documentation

- [Designing in Hana](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in Hana](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)