Überschrift mit variabler Strichstärke am Cursor
Buchstaben nahe am Zeiger werden fetter, heben sich leicht und nehmen die Akzentfarbe an, wie ein Magnet für Schrift.
Einstellungen
Code
<h3 class="uv-twc" aria-label="Design mit Absicht"><span class="ws" translate="no" aria-hidden="true">Design mit Absicht</span></h3>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Text & Scroll
Alle ansehen: Text & ScrollWofür du ihn nutzen kannst
Eine große Überschrift in leichter Strichstärke reagiert Buchstabe für Buchstabe auf den Zeiger. Jedes Zeichen misst den Abstand zum Cursor, wechselt fließend von 300 auf 900, hebt sich etwas und färbt sich in der Akzentfarbe, sodass eine weiche Welle fetter Schrift der Hand folgt.
Screenreader erhalten den ganzen Satz über aria-label, während die einzelnen Buchstaben verborgen bleiben. Ein Regler bestimmt die Reichweite des Effekts in Pixeln, und der Text baut sich bei jeder Änderung neu auf, damit er mit jeder Überschrift funktioniert.