Shape Morph

Une forme organique modifie son contour en continu.

Ajoute une animation en boucle « Blob Morph » (aussi appelée morphing blob ou animated blob) sur [où].
Une forme organique doit changer lentement de contour sans arrêt tout en tournant doucement : fluide et souple, sans angles vifs.
Rends la boucle continue pour que la forme ne saute jamais, et garde-la immobile si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une icône, comme le menu hamburger, se transforme en une autre (X) grâce à des barres qui pivotent et se déplacent.

Ajoute un « Icon Morph » (aussi appelé hamburger to X ou menu icon morph) sur [où].
À chaque appui, les barres du haut et du bas doivent d’abord glisser ensemble vers le milieu puis pivoter pour former un X pendant que la barre centrale disparaît en fondu ; un nouvel appui inverse le tout : rapide et vif.
Fais-en un vrai bouton bascule dont le libellé accessible et l’état déplié changent avec lui, et garde la taille de l’icône fixe pour que rien ne bouge autour.

Un mot se floute et se fond dans le suivant au même endroit.

Ajoute un effet « Morphing Text » (aussi appelé text morph) sur [où].
Un mot doit se flouter et fondre dans le suivant au même endroit, avec une fusion douce et gluante, puis rester immobile un instant avant le changement suivant.
Fais défiler les mots sans coupure, laisse les lecteurs d’écran lire les mots comme du texte normal et arrête le cycle si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Les coins de l’élément s’arrondissent en douceur au survol.

Ajoute un effet au survol « Round Corners » sur [où].
Les angles vifs de l’élément doivent s’arrondir en douceur tant que le pointeur est dessus, puis redevenir nets quand il sort : doux et rapide.
Garde la taille de l’élément inchangée et applique le même effet au focus clavier.

Un filtre SVG déforme du texte ou des formes avec un bruit animé.

Ajoute un effet de survol « SVG Displacement Distortion » (aussi appelé displacement map effect) sur [où].
Pendant le survol, le texte ou la forme doit onduler et trembler comme vu à travers de l’eau en mouvement, avec une apparition douce, puis redevenir net quand le pointeur s’en va.
N’applique le filtre de distorsion que lorsque l’effet est actif pour qu’il ne coûte rien au repos, et montre le même effet au focus clavier.

Une forme de masque balaie la surface ou suit le pointeur pour dévoiler le contenu en dessous.

Ajoute un effet de survol « SVG Mask Reveal » (aussi appelé clip-path reveal ou spotlight mask) sur [où].
Pendant le survol, un masque circulaire doit s’agrandir depuis le centre et dévoiler le contenu en dessous, puis se refermer quand le pointeur s’en va : fluide et assez rapide.
Garde les deux calques exactement à la même taille pour que rien ne bouge, et montre le même dévoilement au focus clavier et au toucher.