Cursor Spotlight

Ein weiches radiales Licht folgt dem Zeiger über die Kartenoberfläche und lässt den Hintergrund darunter durchscheinen.

Füge bei [wo] einen „Card Spotlight“-Effekt hinzu (auch spotlight hover, pointer glow, mouse-following glow oder radial gradient hover genannt).
Ein weicher, schwacher radialer Schein soll dem Zeiger über die Kartenoberfläche folgen, beim Hineinfahren einblenden und beim Verlassen ausblenden.
Halte den Schein hinter dem Karteninhalt, damit der Text lesbar bleibt, und lass die Karte auf Touch-Geräten einfach unbeleuchtet.

Eine Maskenform wischt über die Fläche oder folgt dem Zeiger und legt den Inhalt darunter frei.

Füge bei [wo] einen „SVG Mask Reveal“-Hover-Effekt hinzu (auch clip-path reveal oder spotlight mask genannt).
Solange der Zeiger darüber ist, soll eine kreisförmige Maske aus der Mitte wachsen und den Inhalt darunter freilegen und sich beim Verlassen wieder schließen: weich und recht schnell.
Halte beide Ebenen exakt gleich groß, damit sich nichts verschiebt, und zeig dieselbe Enthüllung bei Tastaturfokus und Antippen.

Wenn der Zeiger über eine Karte fährt, wird unter einer Maskenkante oder einem Spotlight verborgener Text sichtbar.

Füge bei [wo] einen „Text Reveal Card“-Effekt hinzu (auch spotlight text reveal genannt).
Wenn der Zeiger über die Karte fährt, soll ihm eine senkrechte Kante dicht folgen und auf einer Seite verborgenen Text freilegen: weich und direkt, ohne Verzögerung.
Auf Touch-Geräten, wo es keinen Zeiger gibt, soll Ziehen oder Tippen den verborgenen Text zeigen; mach den verborgenen Text außerdem für Screenreader zugänglich.

Ein weicher Lichtkegel oder Lichtfleck schwenkt an seinen Platz und beleuchtet einen Teil des Hintergrunds.

Füge bei [wo] einen „Spotlight“-Effekt hinzu (auch spotlight sweep oder light cone genannt).
Beim Laden der Seite soll ein weicher Lichtkegel schräg aus der Ecke hereinschwenken und sich über die Überschrift legen, wobei er beim Ankommen heller wird: langsam und fließend.
Spiele ihn nur einmal ab und zeige das Licht bei reduzierter Bewegung (prefers-reduced-motion) gleich an seinem Platz.

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.