Le di una mascota a mi proyecto personal
Me encantan los kaomoji japoneses. Estas caritas aportan calidez a un mensaje.
La mayoría de los sitios web para encontrarlos se sienten anticuados. Tienen páginas saturadas y demasiados anuncios. Quería construir algo diferente. Quería una tienda digital que se sienta cálida y viva.
Así que creé a Nyamoji. Es una pequeña mascota que vive en la página. Sigue tu cursor, parpadea y respira.
No necesitas librerías pesadas para hacer esto. Solo necesitas SVG puro, un evento pointermove y algo de CSS.
Así es como hice que se sintiera viva:
• El movimiento de los ojos
Uso un único listener de pointermove. Calculo la dirección desde su cara hacia tu cursor. Luego, muevo ligeramente sus ojos en esa dirección.
Aprendí dos lecciones aquí. Primero, limito el movimiento vertical al 85 por ciento. Si sus ojos se mueven demasiado hacia arriba y hacia abajo, resulta inquietante. Segundo, añado una pequeña transición de CSS. Sin ella, sus ojos saltan como un robot. Con ella, se deslizan.
• El arreglo del parpadeo Al principio, todas las mascotas de mi página parpadeaban al mismo tiempo. Parecía un error. Lo solucioné añadiendo un retraso de animación aleatorio a cada mascota. Ahora cada una parpadea con su propio ritmo.
• El brillo en los ojos Añadí un diminuto punto blanco en cada ojo. Este pequeño detalle marca la diferencia entre un dibujo y un personaje. Hace que parezca que te está mirando.
• Respetar a los usuarios
El movimiento puede ser distractor. Utilizo la media query prefers-reduced-motion. Si un usuario desea menos movimiento, detengo todas las animaciones de inmediato.
• Evitar el desplazamiento del diseño (Layout Shift) Escribo la cara de la mascota directamente en el HTML. Si utilizo un marcador de posición vacío, la página salta cuando se carga el JavaScript. Escribirla en el HTML desde el principio mantiene la página estable.
Construir algo pequeño y personal hace que un proyecto destaque.
Puedes encontrarla en Kaomojikan.