Ripple

Beim Hovern wächst ein farbiger Kreis aus der Mitte oder schrumpft zu ihr hin, um das Element zu füllen.

Füge bei [wo] einen „Radial Fill“-Hover-Effekt hinzu (auch circle expand genannt).
Ein Kreis in der neuen Farbe soll sanft aus der Mitte wachsen, bis er das Element füllt, und beim Verlassen des Zeigers zur Mitte zurückschrumpfen, während die Beschriftung die Farbe wechselt, um lesbar zu bleiben.
Beschneide den Kreis auf die Form des Elements, halte die Beschriftung darüber und zeige denselben Effekt beim Tastaturfokus.

Die neue Ansicht erscheint in einem Kreis, der sich vom Klickpunkt aus ausdehnt.

Füge bei [wo] einen „Circular Reveal“-Übergang hinzu (auch clip-path circle expand oder theme toggle reveal genannt).
Die neue Ansicht soll in einem Kreis erscheinen, der vom gedrückten Bedienelement aus wächst, bis er die ganze Fläche bedeckt: weich und gleichmäßig, sanft beschleunigend und abbremsend.
Lass den Kreis genau dort beginnen, wo gedrückt wurde, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) sofort ohne Kreis.

Konzentrische Kreise breiten sich von einem Mittelpunkt nach außen aus und verblassen.

Füge bei [wo] einen „Ripple Rings“-Effekt hinzu (auch background ripple oder concentric ripples genannt).
Ringe sollen sich fortlaufend von einem Mittelpunkt nach außen ausbreiten und beim Wachsen verblassen, gleichmäßig nacheinander: langsam und stetig.
Lass das mittlere Element ruhig an seinem Platz und stoppe die Wellen bei reduzierter Bewegung (prefers-reduced-motion).

Eine durchscheinende Überlagerung tönt das Element und zeigt so, dass der Zeiger darüber ist.

Füge bei [wo] einen „Hover State Layer“ hinzu (auch hover state, state layer oder hover overlay genannt).
Eine schwache, durchscheinende Überlagerung in der Inhaltsfarbe soll schnell über dem Element einblenden, solange der Zeiger darüber ist, und beim Verlassen ausblenden.
Halte sie schwach, damit der Kontrast erhalten bleibt, und nutze denselben Layer-Ansatz für Fokus- und gedrückte Zustände.

Ein Kreis und ein Häkchen zeichnen sich selbst, um zu bestätigen, dass eine Aktion geklappt hat.

Füge bei [wo] eine „Success Checkmark“-Animation hinzu (auch animated success tick genannt).
Ein Kreis soll sich in einem weichen Strich selbst zeichnen, dann erscheint das Häkchen darin, und das ganze Zeichen ploppt sanft ein wenig auf: ruhig und selbstsicher.
Spiele sie einmal ab, wenn die Aktion gelingt, ergänze eine Textmeldung, die Screenreader vorlesen können, und zeige bei reduzierter Bewegung (prefers-reduced-motion) sofort das fertige Zeichen.

Wischt man eine Listenzeile zur Seite, erscheinen Aktionsbuttons wie Löschen oder Archivieren.

Füge bei [wo] eine „Swipe to Delete“-Interaktion hinzu (auch swipe actions oder swipe to reveal genannt).
Wird eine Zeile zur Seite gezogen, soll sie direkt dem Finger folgen und dahinter Aktionsbuttons wie Archivieren und Löschen freilegen, bis diese ganz sichtbar sind, und beim Loslassen weich ohne Nachfedern an ihren Platz gleiten.
Halte vertikales Scrollen beim horizontalen Wischen funktionsfähig und mach dieselben Aktionen ohne Wischen per Tastatur und Screenreader erreichbar.

Ein runder Knopf gleitet über eine Schiene, und die Farbe der Schiene wechselt zwischen aus und an.

Füge bei [wo] eine „Toggle Switch“-Animation hinzu (auch switch genannt).
Beim Ein- oder Ausschalten soll der runde Knopf weich ans andere Ende der Schiene gleiten, während die Farbe der Schiene wechselt: schnell und knackig, ohne Nachfedern.
Mach ihn zu einem echten barrierefreien Schalter (role="switch" mit seinem checked-Zustand), der auch mit der Tastatur funktioniert.