Las buenas ideas siempre encuentran su camino
Satz auf einer Welle beim Scrollen
Zwei Sätze wandern in entgegengesetzte Richtungen über zwei gezeichnete Kurven; ihre Position hängt davon ab, wie weit du scrollst.
Einstellungen
Code
<div class="uvq14-wav"><div class="sc" tabindex="0" aria-label="Gute Ideen finden immer ihren Weg"><div class="tr"><div class="st"><p class="sr">Gute Ideen finden immer ihren Weg</p><svg viewBox="0 0 400 230" aria-hidden="true"><path id="uvq14-wav-a" class="g" d="M-30 92C40 22 110 162 200 92S330 22 430 92"/><path id="uvq14-wav-b" class="g" d="M-30 172C50 112 120 232 200 172S340 112 430 172"/><text class="t1"><textPath href="#uvq14-wav-a">Gute Ideen finden immer ihren Weg</textPath></text><text class="t2"><textPath href="#uvq14-wav-b">langsam · ohne Eile · Schritt für Schritt</textPath></text></svg><span class="pc" aria-hidden="true"><i></i></span></div></div></div><span class="hn" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M6 13l6 6 6-6"/></svg>Scrollen</span></div>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
Text auf einem Pfad wirkt wie von Hand gesetzt, und an den Scroll gekoppelt wird Lesen zu einer kleinen Reise. Dieser Block legt zwei Sätze mit textPath auf SVG-Kurven und verschiebt ihren Startpunkt mit dem Scrollfortschritt des eigenen Containers, ein dünner Balken zeigt, wie weit du bist. Er passt zu Manifesten, Über-uns-Seiten und ruhigen erzählenden Abschnitten.
Schreib den Hauptsatz ins Textfeld und den zweiten ins SVG. Die Hauptfarbe färbt den großen Satz und den Fortschrittsbalken, die Zweitfarbe die Zeile in Versalien. Bearbeite den Pfad für eine ruhigere oder wildere Welle.