Elástico
Letras elásticas con muelle
Arrastra una letra y las demás la siguen como si estuvieran unidas por muelles; al soltar, todas vuelven a su sitio temblando.
Ajustes
Código
<div class="uvq14-spr"><h3 class="sr">Elástico</h3><div class="st" aria-hidden="true" translate="no">Elástico</div><div class="ft"><span class="hi" aria-hidden="true">Arrastra las letras</span><button type="button" class="kk" aria-describedby="uvq14-spr-h">Sacudir</button><span class="sr" id="uvq14-spr-h">También con las flechas del teclado</span></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Texto y scroll
Ver todos: Texto y scrollDónde usarlo
Cada letra de este titular es una pequeña simulación de muelle: agarra cualquiera y las vecinas se estiran detrás con menos fuerza cuanto más lejos están, y luego vuelven a casa pasándose un poco. Lo mueven unas pocas líneas de JavaScript usando solo transformaciones. Aporta juego a portadas de portfolio, marcas infantiles y páginas de producto con aire de juguete.
Cambia la palabra en el campo de texto y las letras se rehacen solas. El botón sacude la palabra entera y las flechas la empujan en esa dirección, así que el efecto también funciona sin ratón. Con movimiento reducido los muelles apenas rebotan.