El reto Diseñar e implementar un theme que comunicara la identidad visual de una agencia creativa — sin page builders, con performance de primera clase y una experiencia de navegación que se sintiera diferente a cualquier sitio WordPress estándar.
Transiciones SPA con Barba.js Las páginas transicionan sin recarga usando Barba.js. La implementación resuelve un problema técnico específico: antes de cachear un container, GSAP limpia todos los estilos inline con cleanContainer(), asegurando que el botón "atrás" del navegador devuelva los elementos en estado visible. ScrollTriggers se destruyen en leave y se reinician después de un doble requestAnimationFrame en afterEnter.
Animaciones con GSAP Hero con reveal de líneas de texto via clip mask. Contadores animados activados por scroll. Hover del portafolio con overlay GSAP. Cursor personalizado con dos velocidades: el dot sigue al mouse instantáneamente (0.08s), el ring lo hace con inercia (0.55s). Frog trail — huellas de sapo SVG del logo de MACO que aparecen mientras el usuario hace scroll, como easter egg de marca.
Dark/Light mode sin flash Un script inline con priority 0 lee localStorage antes de que cargue el primer CSS. Elimina completamente el FOUC (flash of unstyled content) de tema incorrecto que afecta a casi todos los implementaciones de dark mode.
Performance y accesibilidad Critical CSS inlining, non-critical CSS diferido, preconnect + preload para fuentes críticas, fetchpriority="high" en el hero. Soporte completo de prefers-reduced-motion. Schema.org para LocalBusiness, Articles y FAQ.