Spline
Talk to salesStart building

Build an Interactive Keyboard with Hana

HanaBeginner9 min

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

What you’ll learn

  1. 0:00Intro
  2. 0:22Adding the base frame
  3. 0:34Creating the Keyboard base
  4. 1:14Adding shadows to the Keyboard base
  5. 1:37Creating letter and number keys
  6. 3:31Creating the Enter key
  7. 3:45Adding drop shadows to the numbers and letters
  8. 4:07Adding the key press event
  9. 6:57Building the screen interaction
  10. 8:50Final design
  11. 9:04Outro

Related resources

Related tutorials

All tutorials
How to Build a Reactive 3D Orb with Motion and Interaction

Spline 3DIntermediate7 min

Create Interactive Designs That React to Your Mouse with Hana

HanaBeginner6 min

How to Create 3D Data Visualizations in Spline Using Variables and Real-Time APIs

Spline 3DAdvanced15 min