Text Highlighter (Textmarker)

Ein Zeigerpfeil zeichnet einen Markierungsrahmen um ein Wort, sobald der Text ins Bild scrollt.

Füge bei [wo] einen „Pointer Highlight“-Effekt hinzu.
Wenn der Text ins Bild scrollt, soll sich ein Rahmen von links nach rechts um das Schlüsselwort zeichnen, während ein kleiner Zeigerpfeil an seiner Ecke entlangfährt, weich und gleichmäßig, als würde jemand das Wort von Hand markieren.
Zeichne ihn nur beim ersten Erscheinen, ohne den Text zu verschieben, und zeige den fertigen Rahmen bei reduzierter Bewegung (prefers-reduced-motion) sofort an.

Beim Hovern wächst unter einem Link eine Unterstreichung von einer Seite oder aus der Mitte heraus.

Füge bei [wo] einen „Underline Draw“-Hover-Effekt hinzu (auch animated underline oder hover underline animation genannt).
Wenn der Zeiger über dem Link ist, soll unter dem Text eine Unterstreichung sanft von links nach rechts wachsen und beim Verlassen wieder schrumpfen: schnell und dezent.
Verhindere, dass die Unterstreichung das umgebende Layout verschiebt, und zeige denselben Effekt beim Tastaturfokus.

Eine Linie gleitet von der Unter- oder Oberkante an ihren Platz und unter- oder überstreicht das Element.

Füge bei [wo] einen „Underline Reveal“-Hover-Effekt hinzu (auch overline reveal oder reveal genannt).
Eine Linie über die volle Breite soll von knapp unterhalb der Unterkante nach oben an ihren Platz gleiten, solange der Zeiger über dem Element ist, und beim Verlassen wieder nach unten aus dem Blick gleiten: schnell und weich.
Schneide die Linie an der Kante ab, damit sie durch Gleiten erscheint statt durch Einblenden oder Wachsen, und zeige denselben Effekt beim Tastaturfokus.

Ein Wort in Umrissschrift wird von einem Verlauf gefüllt oder beleuchtet, der dem Zeiger folgt oder darüber streicht.

Füge bei [wo] einen „Text Hover Effect“ hinzu (auch text fill on hover oder gradient outline text hover genannt).
Das Wort soll zunächst nur als Umriss erscheinen; solange der Zeiger darüber ist, soll sich eine volle Füllung sanft von links nach rechts hineinschieben und beim Verlassen wieder zurückziehen.
Halte das Umrisswort vor dem Füllen gut lesbar und zeige denselben Effekt beim Tastaturfokus.

Der Text folgt einem gekrümmten Pfad und wandert beim Scrollen daran entlang.

Füge bei [wo] einen „Text Path Scroll“-Effekt hinzu (auch text path curve scroll animation genannt).
Der Text soll auf einer geschwungenen Linie sitzen und beim Scrollen daran entlanggleiten: vorwärts beim Herunterscrollen, zurück beim Hochscrollen.
Kopple die Bewegung ohne Verzögerung direkt an die Scrollposition und halte den Text für Screenreader als normalen Text lesbar.

Ein Wort wird in viele gestapelte Kopien vervielfältigt, die sich beim Scrollen verschieben.

Füge bei [wo] einen „Text Repetition“-Effekt hinzu (auch repeated text scroll genannt).
Ein Wort soll in einen Stapel blasserer Umrisskopien vervielfältigt werden, die sich beim Scrollen hinter ihm auffächern und beim Hochscrollen wieder zusammenfalten.
Kopple das Auffächern direkt an die Scrollposition und verstecke die zusätzlichen Kopien vor Screenreadern, damit das Wort nur einmal vorgelesen wird.