Heartbeat

Das Element skaliert oder blendet sanft und wiederholt ein und aus.

Füge bei [wo] einen „Pulse“-Effekt hinzu (auch pulsing genannt).
Das Element soll in einem langsamen, gleichmäßigen Rhythmus sanft anschwellen und wieder zurückgehen: dezent, ohne Nachfedern.
Lass ihn nahtlos in Schleife laufen, ohne das umliegende Layout zu verschieben, und stoppe ihn bei reduzierter Bewegung (prefers-reduced-motion).

Ein Herzsymbol füllt sich beim Klicken mit Farbe und sprüht kleine Partikel aus oder pulsiert.

Füge bei [wo] eine „Like / Heart Burst“-Animation hinzu (auch heart animation oder favorite toggle genannt).
Beim Liken soll sich das Herz mit Farbe füllen und federnd aufploppen, während ein Ring und kleine Punkte nach außen springen und verblassen, alles schnell und verspielt; beim Entliken leert sich das Herz einfach still.
Mach es zu einem echten Umschalt-Button mit gedrücktem Zustand und spiele den Burst nur beim Einschalten ab.

Das Element wird größer, wackelt mit leichter Drehung und kehrt mit feierlichem Schwung zur Ausgangsgröße zurück.

Füge bei [wo] einen „Tada“-Aufmerksamkeitseffekt hinzu.
Das Element soll kurz etwas kleiner werden, dann wachsen und mit schneller Neigung hin und her wackeln, bevor es zur normalen Größe zurückkehrt, wie eine kleine Feier.
Spiele ihn einmal ab, etwa direkt nach einem Erfolg, und lass ihn bei reduzierter Bewegung (prefers-reduced-motion) weg.

Das Element vergrößert sich schnell und federt mit einem kleinen Plopp zurück.

Füge bei [wo] einen „Pop“-Hover-Effekt hinzu.
Bei jedem Eintritt des Zeigers soll das Element einmal schnell anschwellen und wieder auf seine normale Größe zurückgehen, wie ein kleiner federnder Plopp.
Spiele ihn einmal pro Hover ab, statt die größere Größe zu halten oder zu loopen, und verhindere, dass sich das umgebende Layout verschiebt.

Das Element verzerrt sich mit abklingender Stärke hin und her wie wackelnder Wackelpudding.

Füge bei [wo] einen „Jello“-Aufmerksamkeitseffekt hinzu (auch jelly genannt).
Das Element soll sich wie wackelnder Wackelpudding hin und her verzerren: anfangs kräftig, dann schnell zur Ruhe kommend.
Spiele ihn beim Auslösen einmal ab und behalte den Platzbedarf des Elements bei, damit sich benachbarte Inhalte nicht verschieben.

Eine Kopie des Elements wächst wiederholt und blendet dabei aus, wie ein Radarsignal.

Füge bei [wo] einen „Ping“-Effekt hinzu (auch radar ping oder pulse ring genannt).
Eine Kopie des Elements soll nach außen wachsen und ausblenden, immer wieder in gleichmäßigem Takt, während das Element selbst stillsteht.
Zeichne den Ring auf einer eigenen Ebene, damit er nie das Layout verändert, und stoppe die Schleife bei reduzierter Bewegung (prefers-reduced-motion).