# Créer avec Hana des designs interactifs qui réagissent à votre souris - Hana | Tout ce qu’il faut savoir - Spline Academy (https://spline.design/fr/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana)

> Dans cette vidéo, nous vous proposons une introduction et plusieurs exemples pour transformer vos designs en expériences interactives qui réagissent à votre…

1. [Academy](https://spline.design/fr/academy)
2. [Cours](https://spline.design/fr/academy/collections)
3. [Hana | Tout ce qu’il faut savoir](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know)
4. Créer avec Hana des designs interactifs qui réagissent à votre souris

# Créer avec Hana des designs interactifs qui réagissent à votre souris

Leçon 5 sur 15HanaDébutant6 min

Dans cette vidéo, nous vous proposons une introduction et plusieurs exemples pour transformer vos designs en expériences interactives qui réagissent à votre curseur avec Hana. Nous explorons des événements comme Mouse Down, Mouse Up, Mouse Press, Mouse Hover, Look At et Follow, et la façon de les utiliser pour déclencher des animations et des effets.

## Ce que vous allez apprendre

1. [0:00Intro](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=0s)
2. [0:15Faire réagir au clic – événement Mouse Down](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=15s)
3. [2:32Relâcher le clic – événement Mouse Up](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=152s)
4. [2:46Maintenir appuyé – événement Mouse Press](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=166s)
5. [2:56La magie du survol – événement Mouse Hover](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=176s)
6. [3:26Orienter votre design vers le curseur – événement Look At](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=206s)
7. [4:51Faire suivre le curseur à votre design – événement Follow](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=291s)
8. [5:57Aperçu du prochain tutoriel](https://www.youtube.com/watch?v=TgZdS8RK0bM&t=357s)

## Ressources associées

- [Interactive Flat IconsModèle](https://app.spline.design/academy/tutorials/create-interactive-designs-that-react-to-your-mouse-with-hana?redirect-duplicate-template-uuid=2a05e307-90dd-4666-bc8b-f2b7f3c2cce8&is-2d-file=true)
- [Designing in HanaDocument](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Interactivity in HanaDocument](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana)

## Présentation

- Hana
- 6 min
- Débutant

## À suivre

[Créer une interaction Follow en 2D8 minDébutant](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)[Continuer](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/create-a-2d-follow-interaction)

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

L’éditeur 3D et 2D pour les équipes et leurs agents. Publiez sur le web, iOS et Android.

#### Interrogez l’IA sur Spline

#### Produits

- [Design 3D](https://spline.design/fr/3d-design)
- [Hana](https://spline.design/fr/hana)
- [Omma](https://omma.build)
- [Génération 3D par IA](https://spline.design/fr/ai-generate)
- [Spline MCP](https://spline.design/fr/mcp)
- [Spline Arena](https://spline.design/fr/arena)
- [Tarifs](https://spline.design/fr/pricing)
- [Enterprise](https://spline.design/fr/enterprise)

#### Runtimes

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

#### Apps

- [Télécharger](https://spline.design/fr/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Télécharger Spline Mirror](https://spline.design/download-mirror)

#### Apprendre

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

#### Communauté

- [Communauté Spline](https://community.spline.design)
- [Blog](https://spline.design/fr/blog)
- [Nouveautés](https://spline.design/fr/changelog)
- [Éducation](https://spline.design/fr/education)
- [Contra](https://spline.design/contra)
- [Affiliation](https://spline.design/fr/affiliate)

#### Entreprise

- [Clients](https://spline.design/fr/customers)
- [Carrières](https://www.ycombinator.com/companies/spline/jobs)
- [Sécurité](https://spline.design/fr/security)

#### Mentions légales

- [Conditions générales](https://spline.design/terms)
- [Confidentialité](https://spline.design/privacy)

#### Contact

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

© 2026 - Spline, Inc.