Cómo crear la animación HeroFace: Guía paso a paso

En el desarrollo de interfaces modernas… la interactividad y la identidad visual son fundamentales. Uno de los elementos más distintivos de esta web es la animación del rostro en la sección Hero, a la que llamamos HeroFace.

En este post, te explicaremos paso a paso cómo funciona esta animación, desde el diseño del SVG hasta los efectos de perspectiva con JavaScript, y te proporcionaremos un Playground para que experimentes por ti mismo.

1. El Playground Interactivo (Ahora con “Horneado” de SVG)

Antes de entrar en detalles técnicos, ¡pruébalo tú mismo! Ajusta los colores, la velocidad y observa cómo cambia la animación en tiempo real.

Novedad: Ahora puedes subir tu propio SVG para “Dovalizarlo” automáticamente, copiar el código horneado (con todos los colores y estilos inyectados) o descargar el código completo en un solo archivo HTML para usarlo donde quieras.

2. La Anatomía del SVG: El “Horneado”

Un problema común al exportar SVGs es que dependen de estilos externos o variables CSS del sitio original. Para solucionar esto, utilizamos un proceso de “horneado”:

1. Estilos Inline: Inyectamos un bloque <style> dentro del propio SVG con las @keyframes.
2. Resolución de Variables: El JavaScript lee los colores actuales y los aplica como atributos stroke reales en cada path.
3. Caminos Reutilizables: Definimos los trazados en <defs> y los invocamos con <use>, lo que nos permite tener una capa de trazo base y otra capa para el punto animado (el “neutrón”) usando el mismo dibujo.

<defs>
  <!-- El trazado original -->
  <path id="pp-1" d="m 137.106,126..." />
</defs>

<!-- Capa de dibujo (base) -->
<use href="#pp-1" class="line-base" />
<!-- Capa de punto animado (el brillo que recorre el trazo) -->
<use href="#pp-1" class="line-dot" />

3. El Secreto del Trazado: stroke-dasharray

Para crear el efecto de “dibujado”, utilizamos el truco clásico de las propiedades stroke-dasharray y stroke-dashoffset.

• stroke-dasharray: Si establecemos este valor igual a la longitud total del camino (getTotalLength()), creamos un guion que ocupa todo el trazo.
• stroke-dashoffset: Al animar este desplazamiento desde la longitud total hasta 0 (o viceversa), el camino parece aparecer o desaparecer mágicamente siguiendo su forma.

@keyframes faceDrawLoop {
  0% { stroke-dashoffset: var(--length); opacity: 0; }
  15% { opacity: 0.5; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: calc(var(--length) * -1); opacity: 0; }
}

4. Perspectiva 3D con JavaScript

Para que el rostro no sea estático y responda al usuario, aplicamos una rotación basada en la posición del ratón. Calculamos el centro del contenedor y comparamos la posición del cursor para obtener un ángulo de rotación:

container.onmousemove = (e) => {
  const rect = container.getBoundingClientRect();
  // Calculamos el porcentaje de desplazamiento (-0.5 a 0.5)
  const x = ((e.clientX - rect.left) / rect.width - 0.5) * 30;
  const y = ((e.clientY - rect.top) / rect.height - 0.5) * -30;
  
  // Aplicamos la transformación
  svg.style.transform = `rotateX(${y}deg) rotateY(${x}deg)`;
};

5. ¡Lévatelo a tu Proyecto!

El Playground no es solo para jugar. Hemos diseñado la herramienta para que sea útil:

• Descargar HTML: Te entrega un solo archivo con todo (HTML, CSS y el script de perspectiva) listo para abrir en el navegador.
• Subir Propio SVG: ¿Tienes un logo o icono? Súbelo y el Playground le aplicará el estilo HeroFace automáticamente.
• SVG Optimizado: Si solo quieres el gráfico, el botón SVG te da el código limpio y autónomo.

Espero que esta guía te inspire a crear interfaces más dinámicas. ¡Cualquier duda, nos vemos en el chat!