Gira la idea
Buchstabenhelix, die beim Scrollen dreht
Der Satz windet sich um eine 3D-Spirale, die sich beim Scrollen dreht und hebt; hintere Buchstaben verblassen, damit die Vorderseite lesbar bleibt.
Einstellungen
Code
<div class="uvq14-hlx"><div class="sc" tabindex="0" aria-label="Dreh die Idee"><div class="tr"><div class="st"><p class="sr">Dreh die Idee</p><div class="hx" aria-hidden="true" translate="no"><b class="pre">Dreh die Idee</b></div><i class="ax" aria-hidden="true"></i></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
Dieser Block wickelt einen kurzen Satz um eine Helix aus CSS-3D-Transforms. Scrollen in der Box dreht und hebt die Spirale, ein langsames Treiben hält sie lebendig, wenn niemand sie berührt, und jeder Buchstabe verblasst je nach Tiefe, damit die Vorderseite gut lesbar bleibt. Er eignet sich als Abschnittsauftakt, Festivalplakat oder verspieltes Markenmotto.
Ändere den Satz im Textfeld; er wiederholt sich, bis die Spirale voll ist. Die Hauptfarbe färbt Buchstaben und Hintergrundschein. Screenreader bekommen den Satz einmal als normalen Text, und bei reduzierter Bewegung stoppt das Treiben, nur der Scroll bewegt ihn.