Toggle Switch

Beim Ankreuzen wird im Kästchen ein Häkchen Strich für Strich gezeichnet.

Füge bei [wo] eine „Checkbox Check Draw“-Animation hinzu (auch animated checkbox oder checkmark draw genannt).
Beim Ankreuzen soll sich das Kästchen mit Farbe füllen und das Häkchen sich in einem schnellen, weichen Strich selbst zeichnen; beim Abwählen wird es auf dieselbe Weise wieder gelöscht.
Lass es eine echte Checkbox mit ihrem checked-Zustand bleiben, die mit der Tastatur funktioniert und einen sichtbaren Fokusring hat.

Eine Unterstreichung oder Pille gleitet vom alten Tab zum neu ausgewählten Tab.

Füge bei [wo] einen „Tab Indicator Slide“ hinzu (auch sliding underline oder active tab indicator genannt).
Wird ein neuer Tab gewählt, soll die Unterstreichung vom alten zum neuen Tab gleiten, schnell und sanft abbremsend, und sich an die Breite des neuen Tabs anpassen, falls sie abweicht.
Behalte eine korrekte Tab-Semantik mit Navigation per Pfeiltasten bei und setze den Indikator bei reduzierter Bewegung (prefers-reduced-motion) ohne Gleiten um.

Ein Augensymbol wechselt zwischen offen und durchgestrichen, wenn das Passwort ein- oder ausgeblendet wird.

Füge bei [wo] einen „Password Reveal Toggle“ hinzu (auch show/hide password oder eye icon toggle genannt).
Ein Druck auf das Auge soll den Schrägstrich schnell wegwischen, während die verdeckten Punkte in die echten Zeichen überblenden, und ein erneuter Druck zeichnet den Strich zurück und verbirgt sie wieder: weich und schnell, ohne Nachfedern.
Halte die Feldbreite stabil, damit der Text nicht springt, und mach den Schalter zu einem echten Button, dessen Beschriftung sagt, ob das Passwort sichtbar ist.

Das Produktbild schrumpft und fliegt im Bogen in das Warenkorb-Symbol.

Füge bei [wo] eine „Add to Cart Fly“-Animation hinzu (auch fly to cart oder add-to-cart animation genannt).
Beim Drücken des Hinzufügen-Buttons soll eine kleine Kopie des Produktbilds schrumpfen, während sie in einem weichen, schnellen Bogen in das Warenkorb-Symbol fliegt, und der Warenkorb soll kurz anstupsen, während sich seine Anzahl aktualisiert.
Spiele sie einmal pro Klick ab, ohne die ursprüngliche Produktkarte zu bewegen, und lass den Flug bei reduzierter Bewegung (prefers-reduced-motion) weg, aktualisiere den Warenkorb aber trotzdem.

Bunte Papierschnipsel schießen heraus und fallen herab, um einen Erfolg zu feiern.

Füge bei [wo] eine Konfetti-Feier (Confetti) hinzu, auch confetti burst genannt.
Kleine bunte Papierschnipsel sollen schnell aus dem Button herausschießen, dann taumelnd herabschweben und dabei ausblenden – ein kurzer, lebhafter Regen.
Löse sie einmal pro Erfolg aus statt in Schleife, lass sie keine Klicks auf der Seite blockieren und lass sie bei reduzierter Bewegung (prefers-reduced-motion) weg.