Diseñando y Desarrollando el Tema Slate para Zensical

Cómo aprovechar el renderizado de canvas, variables CSS y la API de View Transitions para elevar la estética de sitios de documentación estáticos.

Cuando decidí construir este sitio web, mi objetivo principal era crear un espacio digital que se sintiera premium, cohesivo y profundamente técnico. Quería un portafolio y blog personal que transmitiera la sensación de un panel de producto de software moderno en lugar de un sitio estático genérico.

Dado que Zensical es sumamente rápido pero utiliza por defecto diseños clásicos de documentación, diseñé un Tema Slate a medida. En este artículo, detallaré las técnicas clave de desarrollo front-end que utilicé para construir sus elementos más interactivos.

🧠 1. El Fondo Neuronal Interactivo

Un fondo oscuro estático puede sentirse aburrido o plano. Para darle vida sin afectar el rendimiento de carga, programé una red de partículas interactiva en un elemento <canvas> dentro de extra.js.

El script inicializa un conjunto de nodos, actualiza sus posiciones en un bucle de requestAnimationFrame y dibuja líneas conectoras entre aquellos nodos que están a una distancia cercana. Adicionalmente, el script rastrea las coordenadas del cursor para crear un efecto de gravedad interactivo que atrae las partículas al mouse.

Para evitar problemas de rendimiento (especialmente en dispositivos móviles), apliqué dos optimizaciones críticas:

1. Reducción de Densidad Dinámica: El número total de partículas disminuye automáticamente según el ancho de la pantalla.
2. Reciclaje de Nodos: Las partículas que salen de los límites de la pantalla son recicladas de inmediato en lugar de continuar consumiendo memoria fuera de ella.

🔄 2. Transición de Tema Circular (API de View Transitions)

La mayoría de los interruptores de modo oscuro cambian el color de fondo de manera instantánea, lo que puede resultar visualmente agresivo. Para lograr un efecto más fluido, utilicé la moderna API de View Transitions para generar una propagación circular.

Cuando el usuario hace clic en el interruptor de tema:

1. Se capturan las coordenadas del clic (clientX, clientY).
2. Se calcula el radio máximo necesario para cubrir la pantalla completa usando Math.hypot.
3. Se inicia la transición, aplicando una animación de recorte circular (clip-path) que se expande hacia afuera desde la posición del cursor.

// Cálculo de límites de expansión
const x = e.clientX;
const y = e.clientY;
const maxRadius = Math.hypot(
  Math.max(x, window.innerWidth - x),
  Math.max(y, window.innerHeight - y)
);

🎴 3. Efecto 3D y Reflejo en las Tarjetas

Para lograr que las tarjetas de proyectos y artículos se sintieran táctiles y receptivas al cursor, implementé un efecto de inclinación 3D usando variables CSS.

Cuando el mouse se desplaza sobre una tarjeta:

1. Se calculan las coordenadas relativas del cursor dentro de la tarjeta.
2. Los ángulos de rotación (--rx, --ry) y la posición del mouse (--mouse-x, --mouse-y) se inyectan como propiedades personalizadas de CSS en el elemento.
3. El CSS aplica una transformación 3D (rotateX y rotateY) y superpone un gradiente semitransparente que simula un reflejo de luz (brillo) siguiendo la trayectoria del mouse.

Esto proporciona un brillo y una respuesta tridimensional sofisticados que siguen al cursor sin necesidad de instalar pesadas librerías de WebGL externas.

🚀 Obtén la Plantilla

He limpiado este diseño de forma que puedas usarlo en tu propio sitio. Removí todo el texto personal y lo empaqueté como una plantilla bilingüe limpia y genérica para Zensical. Es completamente gratuita y de código abierto:

👉 Plantilla de Tema Zensical Slate