# Bygg ett interaktivt tangentbord med Hana - Spline Academy (https://spline.design/sv/academy/tutorials/build-an-interactive-keyboard-with-hana)

> Hej! 👋

1. [Academy](https://spline.design/sv/academy)
2. [Tutorials](https://spline.design/sv/academy/tutorials)
3. Bygg ett interaktivt tangentbord med Hana

# Bygg ett interaktivt tangentbord med Hana

HanaNybörjare9 min

Hej! 👋

I den här tutorialen lär du dig att skapa ett interaktivt tangentbord som är gjort helt i Hana. Vi går igenom hur du lägger till skuggor för att ge designen djup och hur du använder tangenthändelser för att interagera med scenen med ditt riktiga tangentbord. Designen är väldigt flexibel och kan användas på många olika sätt. Nu kör vi!

Remixa demon här: <https://app.spline.design/ui/56d99098-8346-4abe-9e0a-674fdd6dcb0c>

## Det här lär du dig

1. [0:00Intro](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=0s)
2. [0:22Lägga till grund-framen](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=22s)
3. [0:34Skapa tangentbordets bas](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=34s)
4. [1:14Lägga till skuggor på tangentbordets bas](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=74s)
5. [1:37Skapa bokstavs- och siffertangenter](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=97s)
6. [3:31Skapa Enter-tangenten](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=211s)
7. [3:45Lägga till skuggor under siffror och bokstäver](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=225s)
8. [4:07Lägga till tangenttryckningshändelsen](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=247s)
9. [6:57Bygga skärminteraktionen](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=417s)
10. [8:50Färdig design](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=530s)
11. [9:04Avslutning](https://www.youtube.com/watch?v=2hLXgB3JV%5FU&t=544s)

## Relaterade resurser

- [Interactive KeyboardMall](https://app.spline.design/academy/tutorials/build-an-interactive-keyboard-with-hana?redirect-duplicate-template-uuid=f3103f23-97e2-4ee8-807c-8c73bc5ae38a&is-2d-file=true)
- [Designing in HanaDokument](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDokument](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Översikt

- Hana
- 9 min
- Nybörjare

## Del av

- [Hana | Allt du behöver veta](https://spline.design/sv/academy/collections/hana-everything-you-need-to-know/build-an-interactive-keyboard-with-hana)

## Relaterade tutorials

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

[Så bygger du en reaktiv 3D-sfär med rörelse och interaktionSpline 3DMedelnivå7 min](https://spline.design/sv/academy/tutorials/how-to-build-a-reactive-3d-orb-with-motion-and-interaction)[Skapa interaktiva designer som reagerar på musen med HanaHanaNybörjare6 min](https://spline.design/sv/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)[Så skapar du 3D-datavisualiseringar i Spline med variabler och API:er i realtidSpline 3DAvancerad15 min](https://spline.design/sv/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[Spline](https://spline.design/sv)

3D- och 2D-editorn för team och deras agenter. Publicera på webben, iOS och Android.

#### Fråga AI om Spline

#### Produkter

- [3D-design](https://spline.design/sv/3d-design)
- [Hana](https://spline.design/sv/hana)
- [Omma](https://omma.build)
- [3D-generering med AI](https://spline.design/sv/ai-generate)
- [Spline MCP](https://spline.design/sv/mcp)
- [Spline Arena](https://spline.design/sv/arena)
- [Priser](https://spline.design/sv/pricing)
- [Företag](https://spline.design/sv/enterprise)

#### Runtimes

- [Web](https://spline.design/sv/web)
- [iOS](https://spline.design/sv/ios)
- [Android](https://spline.design/sv/android)

#### Appar

- [Ladda ner](https://spline.design/sv/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Ladda ner Spline Mirror](https://spline.design/download-mirror)

#### Lär dig

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/sv/academy)
- [Spline API](https://www.npmjs.com/package/@splinetool/runtime)
- [Lösningar](https://spline.design/solutions)

#### Community

- [Spline Community](https://community.spline.design)
- [Blog](https://spline.design/sv/blog)
- [Ändringslogg](https://spline.design/sv/changelog)
- [Utbildning](https://spline.design/sv/education)
- [Contra](https://spline.design/contra)
- [Affiliate](https://spline.design/sv/affiliate)

#### Företaget

- [Kunder](https://spline.design/sv/customers)
- [Karriär](https://www.ycombinator.com/companies/spline/jobs)
- [Säkerhet](https://spline.design/sv/security)

#### Juridik

- [Villkor](https://spline.design/terms)
- [Integritet](https://spline.design/privacy)

#### Kontakt

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.