Elástico
Federnde Buchstaben zum Ziehen
Zieh an einem Buchstaben, und die anderen folgen wie an Federn; beim Loslassen schwingen alle zitternd an ihren Platz zurück.
Einstellungen
Code
<div class="uvq14-spr"><h3 class="sr">Elastisch</h3><div class="st" aria-hidden="true" translate="no">Elastisch</div><div class="ft"><span class="hi" aria-hidden="true">Zieh an den Buchstaben</span><button type="button" class="kk" aria-describedby="uvq14-spr-h">Schütteln</button><span class="sr" id="uvq14-spr-h">Geht auch mit den Pfeiltasten</span></div></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
Jeder Buchstabe dieser Überschrift ist eine kleine Federsimulation: Greif einen beliebigen, die Nachbarn dehnen sich hinterher, umso schwächer, je weiter sie entfernt sind, und schnellen dann mit leichtem Überschwingen zurück. Ein paar Zeilen JavaScript steuern das nur über Transforms. Das bringt Spiel in Portfolio-Einstiege, Kindermarken und Produktseiten mit Spielzeugcharakter.
Ändere das Wort im Textfeld, die Buchstaben bauen sich selbst neu auf. Der Button schüttelt das ganze Wort, die Pfeiltasten schubsen es in die jeweilige Richtung, also klappt der Effekt auch ohne Maus. Bei reduzierter Bewegung federt kaum etwas nach.