La idea
El texto normal es un bloque: no puedes animar letras sueltas. La solución es
envolver cada letra en su propio <span>. Así cada una es un
elemento independiente que puede moverse por su cuenta.
[...palabra].forEach((letra, i) => {
const s = document.createElement('span');
s.textContent = letra;
s.style.transitionDelay = (i * 35) + 'ms';
contenedor.appendChild(s);
});
El detalle mágico: el stagger
Ese transitionDelay = i * 35ms es lo que hace que las letras salten
en cascada en vez de todas a la vez. La primera sin retraso, la segunda a
35ms, la tercera a 70ms… ese pequeño desfase es lo que se ve elegante.
El CSS
Las letras suben con translateY al hacer hover. La altura es la variable del slider (-12px).
.revela span{
display:inline-block;
transition:transform .3s ease, color .3s;
}
.revela:hover span{
transform:translateY(var(--salto, -12px));
color:#17a2b8;
}
Listo ✨
Con este patrón (partir en spans + delay escalonado) puedes hacer que el texto aparezca, rote, cambie de color u ondule. Es el ABC de las animaciones tipográficas.