Por qué el primero parece origami
En SVG cada parte (cabeza, orejas, ojos) es una capa plana. Si rotas todo el grupo como una sola pieza, se ve como cartón recortado que se inclina: no hay volumen. Por más lerp que le pongas, sigue siendo “papel”.
El truco: parallax interno
El segundo búho usa parallax: las capas se mueven a distinta velocidad. Las de primer plano (las pupilas) se desplazan más que la cabeza, que se inclina como una sola pieza (con sus penachos). Ese desfase entre capas engaña al ojo y simula una superficie curva con volumen.
pupilas += (dir * 7 - pupilas) * .12;
cabeza += (giro - cabeza) * .11;
El squash & stretch
El otro ingrediente es deformar un poquito la cara al moverse rápido
(scale ligeramente estirado en la dirección del movimiento). Es un
principio clásico de animación: da la sensación de peso y elasticidad.
Nivel 3 · vanilla al máximo
Junta todo lo anterior — lerp (suavidad), parallax de capas (volumen), squash (peso), parpadeo y respiración — en un solo personaje y obtienes el búho de la portada. Es HTML + SVG + JavaScript puro, sin una sola librería. Muévelo y hazle clic 👇
¿Y el paso siguiente? Deformar de verdad
Fíjate en el límite: con CSS/JS las capas se mueven y se escalan, pero la forma de cada pieza no cambia. Para deformar la malla del personaje —estirar la “piel”, curvar una ceja, doblar el cuerpo como gelatina— el trazado a mano ya no alcanza: ahí entra una librería como Rive, donde diseñas al personaje con huesos y mallas en un editor visual y lo reproduces con su runtime. Ese es, de verdad, el siguiente nivel.
En resumen
Para que se sienta vivo: lerp (suavidad) + parallax (volumen falso) + squash (peso). Y si quieres deformación orgánica de verdad, ahí entra una librería. El búho de la portada usa exactamente estas ideas.