Rotierendes Kreistext Siegel
Ein rundes Siegel mit Text im Kreis, der sich langsam um einen Pfeil dreht und beim Überfahren schneller wird.
Einstellungen
Code
<a class="uv-tcb" href="#" aria-label="Scrolle weiter und entdecke mehr ·"><svg class="rg" viewBox="0 0 120 120" aria-hidden="true"><defs><path id="uv-tcb-p" d="M60 60m-44 0a44 44 0 1 1 88 0a44 44 0 1 1-88 0"/></defs><text><textPath href="#uv-tcb-p" textLength="272" lengthAdjust="spacing">Scrolle weiter und entdecke mehr ·</textPath></text></svg><span class="ct"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M6 13l6 6 6-6"/></svg></span></a>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
Studios und Portfolios setzen gern ein rundes Siegel neben den Einstieg, um zum Scrollen einzuladen. Der Text folgt einem SVG Pfad am Rand und dreht sich langsam, während eine volle Scheibe in der Mitte einen Pfeil trägt. Beim Überfahren dreht es schneller und der Pfeil rutscht nach unten.
Der Text wird mit textLength gestreckt, damit jeder Satz den Kreis sauber schließt. Das ganze Siegel ist ein Link mit zugänglichem Namen, der Tastaturfokus zeigt einen Ring und reduzierte Bewegung stoppt die Drehung. Text, beide Farben und Tempo stellst du in den Reglern ein.