# Créer avec Hana des designs interactifs qui réagissent à votre souris - 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. [Tutoriels](https://spline.design/fr/academy/tutorials)
3. Créer avec Hana des designs interactifs qui réagissent à votre souris

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

HanaDé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

## Fait partie de

- [Hana | Tout ce qu’il faut savoir](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/create-interactive-designs-that-react-to-your-mouse-with-hana)

## Tutoriels associés

[Tous les tutoriels](https://spline.design/fr/academy/tutorials)

[Concevoir des effets interactifs avec flou progressif et dégradés douxHanaDébutant9 min](https://spline.design/fr/academy/tutorials/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Ajouter des interactions à la souris aux objets 3DSpline 3DDébutant14 min](https://spline.design/fr/academy/tutorials/add-mouse-based-interactions-to-3d-objects)[Créer des visualisations de données 3D dans Spline avec des variables et des API en temps réelSpline 3DAvancé15 min](https://spline.design/fr/academy/tutorials/how-to-create-3d-data-visualizations-in-spline-using-variables-and-real-time-apis)

[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.