# Créer une interaction Follow en 2D - Hana | Tout ce qu’il faut savoir - Spline Academy (https://spline.design/fr/academy/tutorials/create-a-2d-follow-interaction)

> Si c’est la première fois que vous essayez le design 2D interactif, c’est l’endroit idéal pour commencer ! 😉 Dans ce tutoriel, nous vous guidons pas à pas…

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 une interaction Follow en 2D

# Créer une interaction Follow en 2D

Leçon 6 sur 15HanaDébutant8 min

Si c’est la première fois que vous essayez le design 2D interactif, c’est l’endroit idéal pour commencer ! 😉 Dans ce tutoriel, nous vous guidons pas à pas pour créer facilement une interaction 2D qui suit votre curseur (ou le toucher sur mobile) avec Hana, un nouveau canevas en temps réel pour concevoir et animer des expériences 2D interactives.

Nous construisons cette interaction ludique en appliquant l’événement Follow pour créer une réaction en chaîne fluide. Une façon simple et amusante d’ajouter du mouvement et de la personnalité à votre site web ou à votre projet.

Démo 👉 <https://app.spline.design/ui/98440491-bf75-4e54-ab6f-afa16fc04f7e>

Apprenez à le créer en 3D avec l’éditeur 3D de Spline : <https://youtu.be/TQe5Ae16rE8>

## Ce que vous allez apprendre

1. [0:00Premiers pas](https://www.youtube.com/watch?v=bKrapjgDBNo&t=0s)
2. [0:49Créer des ellipses et appliquer l’événement Follow](https://www.youtube.com/watch?v=bKrapjgDBNo&t=49s)
3. [2:41Ajuster les valeurs d’amortissement et les tailles](https://www.youtube.com/watch?v=bKrapjgDBNo&t=161s)
4. [6:10Exporter et intégrer le design](https://www.youtube.com/watch?v=bKrapjgDBNo&t=370s)

## Ressources associées

- [Follow CirclesModèle](https://app.spline.design/academy/tutorials/create-a-2d-follow-interaction?redirect-duplicate-template-uuid=3b7c3f0a-306e-4a88-aa07-e705edb96030&is-2d-file=true)
- [Designing in HanaDocument](https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana)
- [Hana EventsDocument](https://docs.spline.design/hana-a-canvas-for-interactivity/interactivity-in-hana#hana-events)
- [Exporting as EmbedDocument](https://docs.spline.design/hana-a-canvas-for-interactivity/exporting-in-hana#exporting-as-embed-link)

## Présentation

- Hana
- 8 min
- Débutant

## À suivre

[Concevoir des effets interactifs avec flou progressif et dégradés doux9 minDébutant](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)[Continuer](https://spline.design/fr/academy/collections/hana-everything-you-need-to-know/design-interactive-effects-with-progressive-blur-and-smoothing-gradients)

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