Jimena

El diseño dependía mucho del movimiento. El scroll no era solo navegación, sino parte de cómo se entendía el contenido.

Las secciones, transiciones y cambios de color dependían de él. Si no funcionaba correctamente, la experiencia se rompía.

Al mismo tiempo, el sitio debía comunicar con claridad la información de producto y soportar contenido adicional como recetas, publicaciones y e-commerce.

El primer paso fue dividir el layout en piezas pequeñas. En lugar de tratar la página como una experiencia continua, cada sección se definió por su comportamiento:

• Cómo entra al viewport
• Cómo hace la transición
• Qué elementos permanecen estables

Esto permitió mapear la lógica del scroll antes de escribir código. Las animaciones no se agregaron al final: fueron parte de la estructura desde el comienzo.

Una parte importante del proceso fue probar y ajustar las interacciones para asegurar que no interfirieran con la legibilidad.

El sitio se construyó usando WordPress como CMS, con una capa front-end personalizada en HTML, CSS, JavaScript y PHP. Para las interacciones basadas en scroll:

• GSAP controla las animaciones
• ScrollMagic sincroniza las animaciones con la posición del scroll

El foco estuvo en mantener estable el rendimiento a través de:

• Animaciones basadas en transform
• Controlar cuándo se renderizan los elementos
• Evitar reflows innecesarios

Al mismo tiempo, la estructura debía mantenerse administrable a pesar de la complejidad de las interacciones.

El sitio final convierte el concepto original en una experiencia utilizable. Las personas pueden recorrer la plataforma como un flujo continuo, donde cada producto se siente distinto pero sigue formando parte de un sistema unificado.

El sitio combina un patrón de navegación no tradicional con información de producto estructurada y contenido integrado.

Como el movimiento era parte de la estructura, el trabajo front-end requirió decisiones sobre ritmo, legibilidad e interacción, no solo implementación.