Confetti (Konfetti)

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.

Viele kleine Punkte treiben über den Hintergrund, verbinden sich oder reagieren auf den Zeiger.

Füge bei [wo] einen „Particles“-Hintergrund hinzu (auch floating particles oder particle field genannt).
Kleine Punkte in verschiedenen Größen sollen langsam auf sanften, umherwandernden Bahnen schweben und treiben, jeder in seinem eigenen Tempo: ruhig und luftig.
Halte die Anzahl der Punkte moderat, damit es auch auf langsameren Geräten leicht bleibt, pausiere es außerhalb des sichtbaren Bereichs und stoppe es bei reduzierter Bewegung (prefers-reduced-motion).

Kleine helle Funken flackern rund um einen Text oder Abschnitt auf und wieder weg.

Füge bei [wo] einen „Sparkles“-Effekt hinzu (auch glitter oder twinkle particles genannt).
Kleine sternförmige Funken sollen an verstreuten Stellen und zu zufälligen Zeitpunkten rund um den Text aufploppen, funkeln und verblassen: leicht und schnell.
Halte die Funken rein dekorativ und vor Screenreadern verborgen, lass sie nie den Text selbst verdecken und stoppe sie bei reduzierter Bewegung (prefers-reduced-motion).

Buchstaben fliegen beim Hovern auseinander und kehren zurück oder platzen beim Erscheinen nach außen.

Füge bei [wo] einen „Letter Scatter“-Hover-Effekt hinzu (auch scatter gather letters oder explosive letter burst genannt).
Fährt der Zeiger über den Text, soll jeder Buchstabe ein kurzes Stück in seine eigene Richtung fliegen und sich dabei leicht drehen; verlässt der Zeiger den Text, sammeln sie sich weich wieder zum Wort.
Halte den Platz des Worts im Layout fest, während die Buchstaben sich bewegen, lass Screenreader es als ein Wort lesen und zeige denselben Effekt beim Tastaturfokus.

Das Kopieren-Symbol verwandelt sich in ein Häkchen, und die Beschriftung zeigt kurz Kopiert.

Füge bei [wo] eine „Copy-to-Clipboard Feedback“-Animation hinzu (auch copied state oder copy icon to checkmark genannt).
Beim Drücken des Kopieren-Buttons soll das Kopieren-Symbol schnell wegschrumpfen, während sich ein Häkchen einzeichnet und die Beschriftung zu „Kopiert“ wechselt; nach einem kurzen Moment kehrt alles weich zurück.
Halte den Button während des Wechsels gleich groß, damit sich nichts verschiebt, und gib den Kopiert-Zustand an Screenreader aus.

Ein Element folgt beim Ziehen dem Zeiger und lässt sich auf einen Bereich oder eine Achse begrenzen.

Füge bei [wo] eine „Drag“-Interaktion hinzu (auch draggable oder drag constraints genannt).
Das Element soll beim Ziehen direkt dem Zeiger folgen, an den Rändern seines erlaubten Bereichs anhalten und beim Loslassen mit einem kleinen Nachfedern an seinen Ruheplatz zurückspringen.
Sorge dafür, dass es mit Touch ebenso wie mit der Maus funktioniert, ohne dass die Seite darunter scrollt, und biete eine Möglichkeit, es mit der Tastatur zu bewegen.

Das Platzhalter-Label wandert nach oben und wird kleiner, sobald das Feld fokussiert oder ausgefüllt ist.

Füge bei [wo] ein „Floating Label“ hinzu (auch float label oder animated placeholder genannt).
Wenn das Feld fokussiert ist oder einen Wert hat, soll das Label, das darin sitzt, weich und schnell nach oben an die Oberkante des Felds gleiten und kleiner werden, und nur dann zurückwandern, wenn das Feld leer und nicht fokussiert ist.
Lass es ein echtes Label bleiben, das mit dem Input verknüpft ist, und sorge dafür, dass sich die Feldhöhe nicht ändert, damit das Formular nie springt.