Cursor

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.

Eine Form oder ein Label folgt dem Zeiger mit federnder oder weich gebremster Verzögerung.

Füge bei [wo] einen „Cursor Follower“ hinzu (auch following pointer oder smooth cursor genannt).
Ein kleiner runder Marker soll dem Zeiger mit weicher, sanft gebremster Verzögerung folgen und genau dort ausgleiten, wo der Zeiger stehen bleibt, ohne nachzufedern.
Lass den echten Zeiger sichtbar, sorg dafür, dass der Marker nie Klicks blockiert, und lass ihn auf Touch-Geräten weg.

Ein Vorschaubild folgt dem Zeiger, während er über einem Eintrag einer Textliste schwebt.

Füge bei [wo] einen „Cursor Image Hover“-Effekt hinzu (auch hover image follow oder image preview on hover genannt).
Solange der Zeiger über einem Eintrag einer Textliste ist, soll ein kleines Vorschaubild dieses Eintrags neben dem Zeiger schweben, ihm mit leichter, weicher Verzögerung folgen und zum nächsten Bild gleiten, wenn der Zeiger zu einem anderen Eintrag wechselt.
Die Vorschau darf nie Klicks auf die Liste blockieren, und die Liste muss auf Touch-Geräten und per Tastatur auch ohne sie voll nutzbar bleiben.

Ein Lichtkreis um den Zeiger enthüllt den Inhalt, während der Rest dunkel bleibt.

Füge bei [wo] einen „Cursor Spotlight“-Effekt hinzu (auch flashlight cursor oder spotlight effect genannt).
Ein weicher Lichtkreis soll dem Zeiger folgen und den Inhalt darunter sichtbar machen, während der Rest des Bereichs abgedunkelt bleibt.
Zeige auf Touch-Geräten, wo es keinen Zeiger zum Folgen gibt, den Inhalt stattdessen voll ausgeleuchtet.

Hinter dem Mauszeiger bleibt beim Bewegen eine verblassende Spur aus Formen zurück.

Füge bei [wo] eine Mausspur (Cursor Trail) hinzu, auch mouse trail genannt.
Wenn sich der Zeiger bewegt, soll er eine kurze Kette kleiner Punkte hinterlassen, die jeweils schnell schrumpfen und verblassen, sodass die Spur kurz bleibt und den Weg weich nachzeichnet.
Zeichne die Spur nur, solange sich der Zeiger bewegt, lass sie nie Klicks blockieren und lass sie auf Touch-Geräten und bei reduzierter Bewegung (prefers-reduced-motion) weg.

Der Standardpfeil wird durch einen gestalteten Punkt oder Ring ersetzt, der sich über interaktiven Elementen verändert.

Füge bei [wo] einen „Custom Cursor“ hinzu (auch animated cursor oder cursor replacement genannt).
Ersetze den Standardpfeil durch einen kleinen Punkt, der dem Zeiger exakt folgt, und einen Ring, der ein wenig hinterherläuft, und lass den Ring über Links und Buttons weich größer werden.
Behalte auf Touch-Geräten und in Textfeldern den normalen Cursor und lass den eigenen Cursor nie Klicks blockieren.

Das Element wird zum Zeiger hingezogen, wenn er sich nähert, und schnellt zurück, sobald er sich entfernt.

Füge bei [wo] einen „Magnetic Button“-Effekt hinzu (auch magnetic target oder magnetic hover genannt).
Wenn sich der Zeiger nähert, soll der Button ein Stück zu ihm hingezogen werden, seine Beschriftung noch etwas weiter, und wenn der Zeiger weggeht, soll er mit einem kleinen federnden Nachschwingen an seinen Platz zurückkehren.
Das umgebende Layout darf sich nicht verschieben; schalte die Anziehung 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.