Seis maneras de que las letras pesen, boten, huyan o se derritan. Sin librerías.
01Gravedad con rebote — las letras caen, botan y asientan
GRAVEDAD
Cada letra integra velocidad y gravedad en cada frame; al tocar su línea base rebota perdiendo energía (restitución 0.55) con un pequeño giro por impacto. Entran escalonadas.
02Inercia — agarra una letra, lánzala, y vuelve sola a su sitio
LÁNZAME
Arrastre con velocidad medida al soltar; vuelo libre con gravedad y rebotes contra el suelo y las paredes de la sección; a los dos segundos, un muelle amortiguado la devuelve a su hueco.
03Repulsión magnética — el cursor aparta las letras; un muelle las devuelve
NO ME TOQUES
Cada letra huye del cursor dentro de un radio de 120px, proporcional a la cercanía; un muelle-amortiguador (la pieza básica de casi toda física de interfaz) la trae de vuelta.
04Flotación — boyas en agua, CSS puro
A LA DERIVA
Onda senoidal con desfase por letra: dos keyframes en alternancia y delay negativo escalonado. Cero JavaScript.
05Péndulo — colgadas de una barra, CSS puro
COLGADAS
Origen de giro por encima del ojo de la letra y balanceo alterno desfasado. Para un péndulo amortiguado de verdad (amplitud decreciente tras un golpe), se pasa a JS.
06Gelatina — squash y stretch al pulsar
BLANDITO
Mantén pulsada una letra y suelta: se aplasta rápido (0.09s) y recupera con muelle elástico (0.9s). El principio de squash & stretch de la animación clásica, en dos reglas CSS.
07Tracking — el espaciado como materia elástica
RESPIRA
PASA POR ENCIMA
Arriba, letter-spacing en bucle lento (inhala, exhala). Abajo, expansión al hover con vuelta de muelle. Ojo técnico: animar letter-spacing recalcula el layout en cada frame — perfecto para titulares, prohibido en párrafos; la versión de alto rendimiento mueve cada letra con translate desde el centro.