Magnetic Button

Icons in einer Reihe wachsen weich, wenn sich der Zeiger nähert, wie im macOS-Dock.

Füge bei [wo] einen „Dock Magnification“-Effekt hinzu (auch dock genannt).
Die Icons der Reihe sollen weich größer werden, je näher der Zeiger kommt, das nächste am größten und seine Nachbarn leicht vergrößert, und alle zur normalen Größe zurückkehren, wenn der Zeiger die Reihe verlässt.
Lass die Icons von einer festen Grundlinie aus nach oben wachsen und halte jedes Icon bei Touch und Tastatur in normaler Größe bedienbar.

Die Karte verschiebt und skaliert sich leicht, wenn sich der Zeiger über ihr bewegt.

Füge bei [wo] einen „Wobble Card“-Effekt hinzu.
Wenn sich der Zeiger über die Karte bewegt, soll sie sich leicht zu ihm hin verschieben, während ihr Inhalt sich leicht in die Gegenrichtung verschiebt und etwas vergrößert, weich folgend, und beim Verlassen kehrt alles an seinen Platz zurück.
Halte die Bewegung klein und schalte sie auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) ab.

Ein Feld kleiner Striche dreht sich zum Zeiger hin, wie Eisenspäne um einen Magneten.

Füge bei [wo] einen „Magnetic Filings“-Effekt hinzu.
Ein Raster kurzer Striche soll sich sofort so drehen, dass jeder direkt auf den Zeiger zeigt, wie Eisenspäne um einen Magneten, und ohne Zeiger sollen alle zur Mitte zeigen.
Halte es als dekorativen Hintergrund, der nie Klicks blockiert, und lass die Striche bei reduzierter Bewegung (prefers-reduced-motion) stillstehen.

Die Textmarke wächst oder schrumpft passend zur Größe des Zeichens, neben dem sie steht.

Füge bei [wo] einen „Adaptive Caret“-Effekt hinzu (auch adaptive caret size genannt).
Die Textmarke soll vor das Zeichen springen, das dem Zeiger am nächsten ist, und sich schnell auf dessen Höhe strecken oder stauchen, mit einer weichen, zackigen Größenänderung ohne Nachfedern.
Verhindere, dass sich der Text selbst verschiebt, und lass die Marke Tastaturbewegungen genauso folgen wie dem Zeiger.

Ein kreisförmiger Cursor invertiert die Farben darunter mit mix-blend-mode difference.

Füge bei [wo] einen „Blend-Mode Cursor“ hinzu (auch difference cursor oder inverting cursor genannt).
Ersetze den Zeiger durch einen gefüllten Kreis, der ohne Verzögerung direkt darunter sitzt und die Farben von Text und Formen invertiert, über die er fährt.
Begrenze das Blending auf diesen Bereich, damit es sich nicht mit dem Rest der Seite mischt, sorg dafür, dass es auch im Dark Mode klar invertiert, und behalte auf Touch-Geräten den normalen Cursor.