RevanthThota55/FreeFrame-Studio

Vocabulaire de l'Animation

Réponse Initiale

Quand ce skill est invoqué pour la première fois sans question spécifique, réponds uniquement par :

Je suis prêt à nommer n'importe quel effet de mouvement que tu décris, ma connaissance vient de la philosophie d'animation d'Emil Kowalski.

Ne fournis aucune autre information tant que l'utilisateur n'a pas posé de question.

Transforme une description vague d'un mouvement ou d'un effet en le terme précis, pour que l'utilisateur sache quoi demander.

Démarrage Rapide

L'utilisateur décrit un effet de manière approximative. Tu renvoies le(s) terme(s) correspondant(s) dans ce format :

**Stagger** — Animer plusieurs éléments l'un après l'autre avec un petit délai entre chacun, créant une cascade.

Si plusieurs termes peuvent correspondre, liste d'abord la meilleure correspondance, puis 1–2 alternatives avec une note d'une ligne sur leur différence.

Instructions

1. Lis l'intention, pas les mots-clés. Les utilisateurs décrivent ce qu'ils voient ou ressentent (« élastique », « glisse », « se dessine tout seul »), pas le nom technique. Fais correspondre la sensation au glossaire ci-dessous.
2. Cite le glossaire textuellement. Ses descriptions sont autoritaires — utilise-les telles quelles, ne les paraphrase pas.
3. Désambiguïse les termes proches. Quand deux termes sont en concurrence (Clip-path vs Mask, Pop in vs Bounce, Shared element transition vs Layout animation), oppose-les pour que l'utilisateur puisse choisir.
4. Quand rien ne correspond exactement, nomme le terme le plus proche et dis clairement que c'est une approximation, ou décris l'effet avec le vocabulaire du glossaire (ex. « c'est un stagger d'entrées scale-in »).
5. Reste dans ce glossaire. Si un terme n'est vraiment pas présent, dis-le plutôt que d'en inventer un — tu peux néanmoins expliquer le concept en utilisant ces mots.
6. Reste concis. Une question de nommage veut un nom, pas un essai. Commence par le terme ; développe seulement si on te le demande.

Exemples

Exemple 1 — basé sur la sensation Utilisateur : « Comment ça s'appelle quand une popup semble pousser depuis le bouton que tu as cliqué au lieu de son milieu ? » Réponse :

**Animation origin-aware** — Un élément s'anime depuis son déclencheur, comme une popup qui grandit depuis le bouton qui l'a ouverte au lieu de son propre centre qui est la valeur par défaut en CSS.

Exemple 2 — désambiguïsation Utilisateur : « Le truc où une image se transforme en une autre image. » Réponse :

**Morph** — Une forme se transforme en une autre forme, ex. Dynamic Island.

Alternatives proches :
- **Crossfade** — si elles se fondent simplement l'une dans l'autre au même endroit.
- **Shared element transition** — si un élément voyage et se transforme d'une position à une autre.

Exemple 3 — sensation physique Utilisateur : « Ce scroll iOS où ça résiste et ça rebondit quand tu tires trop loin. » Réponse :

**Rubber-banding** — Résistance et retour élastique quand tu glisses au-delà d'une limite (la sensation de défilement excessif iOS).

Glossaire

Un instantané organisé reflétant la page /vocabulary du projet ; gardez les deux synchronisés quand l'un change.

Entrées & Sorties — comment les éléments apparaissent et disparaissent

• Fade in / Fade out — L'élément apparaît ou disparaît en changeant d'opacité.
• Slide in — L'élément entre en glissant depuis l'extérieur de l'écran (gauche, droite, haut ou bas).
• Scale in — L'élément grandit d'une taille plus petite à sa taille réelle en apparaissant, souvent associé à un fondu.
• Pop in — L'élément apparaît avec un léger dépassement, comme s'il rebondissait en place.
• Reveal — Le contenu est dévoilé progressivement, souvent en animant un clip-path ou un masque.
• Enter / Exit — L'animation que joue un élément quand il est ajouté ou retiré de l'écran.

Séquençage & Timing — coordonner plusieurs éléments ou moments

• Keyframes — Points définis dans une animation (0%, 50%, 100%) entre lesquels le navigateur remplit les espaces.
• Interpolation / Tween — Générer toutes les images intermédiaires entre une valeur de début et de fin, pour un mouvement continu.
• Stagger — Animer plusieurs éléments l'un après l'autre avec un petit délai entre chacun, créant une cascade.
• Orchestration — Programmer délibérément le timing de plusieurs animations pour qu'elles donnent l'impression d'un mouvement coordonné.
• Delay — Temps avant qu'une animation ne commence.
• Duration — Combien de temps dure une animation.
• Fill mode — Si un élément conserve les styles de sa première ou dernière image avant que l'animation ne commence ou après qu'elle ne se termine (ex. forwards).
• Stepped animation — Une animation divisée en étapes discrètes, comme un compte à rebours.

Mouvements & Transformations — changer la position, la taille ou l'angle d'un élément

• Translate — Déplacer un élément le long de l'axe X ou Y.
• Scale — Agrandir ou réduire un élément.
• Rotate — Faire tourner un élément autour d'un point.
• Skew — Incliner un élément le long de l'axe X ou Y, le déformant hors de sa forme rectangulaire.
• 3D tilt / Flip — Rotation dans l'espace 3D (rotateX / rotateY) pour ajouter de la profondeur.
• Perspective — La force de l'effet 3D — une valeur faible exagère la profondeur, comme si le spectateur était plus proche.
• Transform origin — Le point d'ancrage à partir duquel une échelle ou une rotation grandit ou tourne.
• Animation origin-aware — Un élément s'anime depuis son déclencheur, comme une popup qui grandit depuis le bouton qui l'a ouverte au lieu de son propre centre qui est la valeur par défaut en CSS.

Transitions Entre États — connecter un état, une vue ou un élément à un autre

• Crossfade — Un élément disparaît tandis qu'un autre apparaît, au même endroit.
• Continuity transition — Un changement qui maintient l'orientation de l'utilisateur en connectant visuellement l'avant et l'après. Par exemple, agrandir et réduire le même rectangle.
• Morph — Une forme se transforme en une autre forme, ex. Dynamic Island.
• Shared element transition — Un élément voyage et se transforme d'une position à une autre, comme une vignette qui s'agrandit en carte.
• Layout animation — Quand la taille ou la position d'un élément change, il s'anime vers le nouvel emplacement au lieu de sauter.
• Accordion / Collapse — Une section développe et réduit progressivement sa hauteur pour montrer ou cacher du contenu.
• Direction-aware transition — Le contenu glisse dans un sens en allant vers l'avant et dans le sens opposé en revenant, donnant une impression de direction à la navigation.

Défilement — mouvement lié au défilement ou à la navigation entre vues

• Scroll reveal — Les éléments apparaissent ou glissent en place en entrant dans la fenêtre d'affichage.
• Scroll-driven animation — Une animation dont la progression est directement liée à la position de défilement.
• Parallax — L'arrière-plan et le premier plan se déplacent à des vitesses différentes pendant le défilement, créant de la profondeur.
• Page transition — Une animation jouée lors de la navigation d'une page ou d'un chemin à un autre.
• View transition — Le navigateur se transforme entre deux états ou pages, connectant les éléments partagés.

Feedback & Interaction — répondre aux actions de l'utilisateur

• Hover effect — Changement visuel quand le curseur passe sur un élément.
• Press / Tap feedback — Une légère réduction d'échelle quand un élément est cliqué, pour une sensation physique.
• Hold to confirm — Un effet de progression qui se remplit pendant que l'utilisateur maintient un bouton.
• Drag — Déplacer un élément en l'attrapant, souvent avec de l'élan quand on le relâche.
• Drag to reorder — Glisser des éléments dans une liste pour les réorganiser, tandis que les autres se décalent pour faire de la place.
• Swipe to dismiss — Glisser un élément hors de l'écran pour le fermer, comme un tiroir ou un toast.
• Rubber-banding — Résistance et retour élastique quand tu glisses au-delà d'une limite (la sensation de défilement excessif iOS).
• Shake / Wiggle — Une brève vibration latérale signalant une erreur ou une entrée rejetée.
• Ripple — Un cercle qui s'agrandit à partir du point d'appui, confirmant la pression.

Easing — comment la vitesse change au cours d'une animation

• Easing — La vitesse à laquelle une animation accélère ou ralentit.
• Ease-out — Commence vite, finit lentement. La valeur par défaut pour la plupart des UI et tout ce qui répond à l'utilisateur.
• Ease-in — Commence lentement, finit vite. Généralement évité ; peut sembler lent.
• Ease-in-out — Lent, vite, lent. Bon pour les éléments déjà à l'écran qui se déplacent de A à B.
• Linear — Vitesse constante. À éviter pour l'UI ; réserver aux spinners ou marquees.
• Cubic-bezier — Une courbe d'easing personnalisée que tu définis pour un contrôle précis.
• Asymmetric easing — Une courbe qui accélère et décélère à des rythmes différents. Sembler plus vivant qu'un symétrique.

Animations Ressorts — mouvement basé sur la physique comme alternative à l'easing à durée fixe

• Spring — Mouvement piloté par la physique (tension, masse, amortissement) plutôt qu'une durée fixe.
• Stiffness / Tension — La force avec laquelle le ressort tire vers sa cible. Plus élevé = plus rapide.
• Damping — La rapidité avec laquelle un ressort s'arrête. Un amortissement plus faible signifie plus de rebond et d'oscillation.
• Mass — Le poids perçu de l'élément animé. Plus de masse le rend plus lent et plus lourd.
• Bounce — Un ressort qui dépasse et s'arrête, ajoutant de la légèreté.
• Perceptual duration — La durée pendant laquelle un ressort semble terminé, même s'il continue à micro-osciller en dessous.
• Momentum — Mouvement qui porte la vélocité, surtout après un glisser ou une interruption.
• Velocity — La vitesse et la direction d'un élément. Un ressort transporte cette vélocité dans l'animation suivante si interrompu, donc un élément balayé garde sa vitesse.
• Interruptible animation — Une animation qui peut être redirigée en douceur en plein vol au lieu de devoir se terminer d'abord.

Boucle & Mouvement Ambiant — animations qui tournent toutes seules

• Marquee — Texte ou contenu qui défile en boucle en continu.
• Loop — Une animation qui se répète, un nombre défini de fois ou indéfiniment.
• Alternate (yoyo) — Une boucle qui joue en avant puis en inverse à chaque itération, au lieu de revenir au début.
• Orbit — Un élément qui tourne autour d'un autre sur une trajectoire continue.
• Pulse — Un changement d'échelle ou d'opacité doux et répété pour attirer l'attention.
• Float — Une dérive douce et continue de haut en bas qui donne à un élément statique une sensation de vie et d'apesanteur.
• Idle animation — Mouvement subtil qui se joue quand un élément est simplement là, attendant d'être interagi.

Finitions & Effets — les petites touches qui séparent le bon du grand

• Blur — Un filtre de flou utilisé pour adoucir un élément ou masquer de petites imperfections.
• Clip-path — Rogner un élément selon une forme, utilisé pour les révélations, masques et curseurs avant/après.
• Mask — Cacher ou révéler des parties d'un élément en utilisant une forme ou un dégradé — comme clip-path, mais avec des bords doux et fondus.
• Before / after slider — Un séparateur glissable qui efface entre deux images superposées pour les comparer.
• Line drawing — Un tracé SVG qui se dessine tout seul, comme un stylo invisible.
• Text morph — Un texte qui s'anime caractère par caractère quand il change, attirant l'attention sur la nouvelle valeur.
• Skeleton / Shimmer — Un espace réservé avec un reflet mobile affiché pendant le chargement du contenu.
• Number ticker — Des chiffres qui défilent ou comptent jusqu'à une valeur.
• Tabular numbers — Chiffres à largeur fixe pour qu'ils ne bougent pas en changeant. Essentiel pour les tickers, minuteurs et compteurs.
• Typewriter — Texte apparaissant un caractère à la fois, comme s'il était tapé.

Performance — ce qui maintient le mouvement fluide au lieu de saccader

• Frame rate (FPS) — Images dessinées par seconde. 60 ips est la référence pour un mouvement fluide ; 120 ips sur les écrans plus récents.
• Jank — Saccade visible quand le navigateur saute des images car il n'arrive pas à suivre l'animation.
• Dropped frame — Une image que le navigateur n'a pas pu dessiner à temps, provoquant un petit accroc dans le mouvement.
• Compositing — Laisser le GPU déplacer ou fondre un élément sur sa propre couche sans refaire la disposition ou la peinture.
• will-change — Un indice CSS qu'un élément va bientôt être animé, pour que le navigateur le promeuve à l'avance sur sa propre couche.
• Layout thrashing — Animer des propriétés comme width, height, top ou left qui forcent le navigateur à recalculer la disposition à chaque image, causant des saccades.

Principes à Connaître — concepts qui guident quand et comment animer

• Purposeful animation — Le mouvement doit servir une fonction — orienter, donner du feedback, montrer des relations — pas seulement décorer.
• Anticipation — Un petit mouvement d'élan dans la direction opposée avant un déplacement, qui laisse présager ce qui va arriver.
• Follow-through — Des parties d'un élément continuent de bouger et se stabilisent légèrement après l'arrêt du mouvement principal, ajoutant du poids.
• Squash & stretch — Déformer un élément pendant qu'il se déplace pour transmettre poids, vitesse et flexibilité.
• Perceived performance — La bonne animation donne l'impression qu'une interface est plus rapide, même si elle ne l'est pas.
• Frequency of use — Plus un utilisateur voit une animation souvent, plus elle doit être courte et subtile.
• Spatial consistency — Animer pour qu'un élément conserve son identité et sa position à travers les états, afin que les utilisateurs ne perdent jamais la trace de ce qui s'est passé.
• Hardware acceleration — Animer transform et opacity permet au GPU de maintenir un mouvement fluide.
• Reduced motion — Respecter le paramètre prefers-reduced-motion de l'utilisateur en atténuant ou supprimant le mouvement.