Build an Interactive Keyboard with Hana

Build an Interactive Keyboard with Hana

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

#interactive#keyboard#hana#tutorial-interaction#tutorial-events#spline#design#ui#ux#graphic design#interaction#motion#keys#interactivity#web design

What you'll learn

  • 0:00Intro
  • 0:22Adding the base frame
  • 0:34Creating the Keyboard base
  • 1:14Adding shadows to the Keyboard base
  • 1:37Creating letter and number keys
  • 3:31Creating the Enter key

Related resources

Overview

Hana 2D
9min
Beginner