Elástico
Springy draggable letters
Drag one letter and the others follow as if joined by springs; let go and they all wobble back into place.
Settings
Code
<div class="uvq14-spr"><h3 class="sr">Elastic</h3><div class="st" aria-hidden="true" translate="no">Elastic</div><div class="ft"><span class="hi" aria-hidden="true">Drag the letters</span><button type="button" class="kk" aria-describedby="uvq14-spr-h">Shake</button><span class="sr" id="uvq14-spr-h">Also works with the arrow keys</span></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Text & scroll
See all Text & scrollWhere to use it
Each letter of this headline is a small spring simulation: grab any of them and the neighbors stretch after it with less force the further away they are, then bounce home with a little overshoot. A few lines of JavaScript drive it with transforms only. It brings play to portfolio intros, kids' brands and toy-like product pages.
Change the word in the text field and the letters rebuild on their own. The button shakes the whole word, and the arrow keys push it in that direction, so the effect also works without a mouse. With reduced motion the springs barely bounce.