SVG Mask Reveal

Un cercle de lumière autour du pointeur révèle le contenu pendant que le reste reste sombre.

Ajoute un effet « Cursor Spotlight » (aussi appelé flashlight cursor ou spotlight effect) sur [où].
Un cercle de lumière doux doit suivre le pointeur et révéler le contenu en dessous pendant que le reste de la zone reste assombri.
Sur les appareils tactiles, où il n’y a pas de pointeur à suivre, affiche plutôt le contenu entièrement éclairé.

Déplacer le pointeur sur une carte dévoile un texte caché sous un bord de masque ou un projecteur.

Ajoute un effet « Text Reveal Card » (aussi appelé spotlight text reveal) sur [où].
Quand le pointeur se déplace sur la carte, un bord vertical doit le suivre de près et dévoiler un texte caché d’un côté, de façon fluide et directe, sans latence.
Sur les écrans tactiles, où il n’y a pas de pointeur à suivre, laisse un glisser ou un appui révéler le texte caché, et rends ce texte accessible aux lecteurs d’écran.

Un clip-path ou un masque s’agrandit depuis un bord ou un point et découvre peu à peu l’image ou le texte.

Ajoute un effet d’entrée « Clip Reveal » (aussi appelé mask reveal, wipe reveal ou image reveal) sur [où].
Un bord de découpe doit balayer de gauche à droite pour découvrir progressivement le contenu, qui reste immobile : fluide, avec un début et une fin en douceur.
Réserve l’espace de l’élément dès le départ pour que rien ne se décale, et affiche-le entièrement découvert si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

Une image se découvre à mesure qu’un cache se rétracte ou que le bord d’un masque s’étend.

Ajoute un « Image Reveal Wipe » (aussi appelé mask reveal ou clip-path reveal) sur [où].
Quand l’image entre à l’écran au défilement, un cache doit s’effacer depuis un côté et la dévoiler en douceur au rythme du défilement, pour qu’elle soit entièrement visible bien avant de quitter l’écran.
Réserve l’espace de l’image pour que la mise en page ne saute pas, et affiche l’image entièrement dévoilée si l’utilisateur a activé la réduction des animations (prefers-reduced-motion).

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

Les formes proches fusionnent comme des gouttes liquides grâce à un filtre de flou et de contraste.

Ajoute un « Gooey Effect » (aussi appelé goo effect ou metaballs) sur [où].
Au survol, de petites gouttes doivent se détacher de la forme principale en s’étirant comme un liquide avant de se libérer, puis revenir et fusionner en douceur quand le pointeur s’en va.
Applique le filtre de flou et de contraste uniquement au petit groupe de formes, pas à toute la page, et montre le même effet au focus clavier et au toucher.

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.