Gravedad
Letters that fall with gravity
Press the button and the headline letters drop, bounce off the floor and lie scattered; another press puts them back.
Settings
Code
<div class="uvq14-grv"><div class="bx"><h3 class="sr">Gravity</h3><div class="ws" aria-hidden="true" translate="no">Gravity</div><i class="fl" aria-hidden="true"></i></div><button type="button" class="tg" aria-pressed="false"><span class="a">Drop the letters</span><span class="b">Pick up</span></button></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
A tiny physics loop gives every letter its own weight, spin and bounce, so the word collapses onto a wooden shelf in a slightly different way each time. Pressing again springs every letter back to its place with a staggered transition. It is a good surprise for 404 pages, playful launches, kids' content or a portfolio that wants a smile.
Write a short word in the text field and choose the two clay colors with the main and secondary colors. The real heading stays intact for screen readers, and with reduced motion the letters land at once without bouncing.