RJS Laticínios

CONTEXTO

Los productores de lácteos artesanales venden de boca en boca y por WhatsApp, sin una vitrina propia que muestre los productos con profesionalismo.

QUÉ SE HIZO

Vitrina con catálogo de productos y pedido cerrado directo en WhatsApp. Es una base simple y rápida para que el productor venda online sin depender solo de las redes sociales.

CATÁLOGO · PEDIDO EN WHATSAPP

SOLUCIONES

• SCSS Modules, no Tailwind

  Paleta y tipografía centralizadas en _tokens.scss. Cambiar el color de la marca es una línea, no un grep en el JSX.

• Mascota SVG interactiva y liviana

  Panda en SVG puro que sigue el cursor con throttling por requestAnimationFrame y se adormece tras 8s quieto.

• Lenis + GSAP ScrollTrigger sincronizados

  Un único loop de animación (el raf de Lenis alimenta el ticker de GSAP) evita jank entre scroll suave y parallax.

• Selector de tema con 7 paletas

  data-flavor en el <html> cambia CSS custom properties, persiste en localStorage y evita flash antes de la hidratación.

DETALLE TÉCNICO

• 01La stack se aparta del combo estándar Next + Tailwind a propósito: SCSS Modules con un archivo _tokens.scss central (paleta, tipografía, eas…+

  La stack se aparta del combo estándar Next + Tailwind a propósito: SCSS Modules con un archivo _tokens.scss central (paleta, tipografía, easings, breakpoints como variables Sass) y mixins compartidos. En una marca con identidad visual tan fuerte, con azul como color madre en proporción 60-30-10 y amarillo, verde y naranja solo como acento puntual, nunca fondo plano, las utility classes de Tailwind tienden a esparcir decisiones de diseño en className por todo el JSX. Con SCSS Modules cada sección carga su propio .module.scss con alcance local, y la paleta vive en un único lugar: cambiar el tono del azul de la marca es una línea en _tokens.scss, no un grep por bg-blue-500 en decenas de archivos.

• 02La mascota Pandito no es una imagen. Es un componente SVG (Panda.tsx) dibujado en código, con gradientes radiales para dar volumen al pelaje…+

  La mascota Pandito no es una imagen. Es un componente SVG (Panda.tsx) dibujado en código, con gradientes radiales para dar volumen al pelaje blanco y negro, rubor en las mejillas y un sistema de props (look, item, sleepy) que redibuja los ojos y la cabeza en tiempo real. El componente InteractivePanda captura mousemove en la página entera, pero limita la lectura con requestAnimationFrame y solo dispara setState cuando el delta de posición supera un umbral. Eso evita re-render en cada píxel de movimiento del mouse, lo que importa mucho para el INP. Después de 8s sin movimiento el panda se adormece (cierra los ojos, respira más lento, aparece un Zzz animado), y un IntersectionObserver pausa todo ese procesamiento cuando la sección sale del viewport, para no gastar CPU en una mascota que nadie está viendo.

• 03El scroll suave es Lenis sincronizado con GSAP ScrollTrigger: el raf de Lenis alimenta el ticker de GSAP (gsap.ticker.add) en vez de correr …+

  El scroll suave es Lenis sincronizado con GSAP ScrollTrigger: el raf de Lenis alimenta el ticker de GSAP (gsap.ticker.add) en vez de correr dos loops de animación en paralelo, lo que evita jank cuando parallax y smooth-scroll compiten por el mismo frame. El fondo del Hero es una escena de granja entera en SVG puro (cielo con gradiente, sol, nubes, colinas en capas, granero y silo), sin ninguna imagen raster, y se mueve con scrollTrigger.scrub con leve yPercent y scale, dando profundidad sin pesar en la carga. Es interesante notar que el parallax del propio panda usa MotionValue de Framer Motion en vez de GSAP, y el código documenta explícitamente por qué: animar y con animate y con un MotionValue de style en el mismo div genera conflicto y traba el elemento en opacity:0. Por eso la entrada (fade y scale) y el parallax de mouse quedan en wrappers motion.div separados.

• 04Un detalle que pasa desapercibido: el sitio tiene un selector de "Sabor" en la navbar que cambia la paleta entera (7 opciones: leche, chocol…+

  Un detalle que pasa desapercibido: el sitio tiene un selector de "Sabor" en la navbar que cambia la paleta entera (7 opciones: leche, chocolate, fresa, uva, banana, coco y ensalada de frutas) vía data-flavor en el <html>, con cada variante sobrescribiendo las CSS custom properties en globals.scss. La elección persiste en localStorage y se aplica antes de la hidratación por un script inline en el <head> del layout.tsx, lo que evita el flash de la paleta por defecto antes de reaplicar el color guardado. Cambiar de sabor dispara una ola de tinta (FlavorPicker) que nace del propio botón y cubre la pantalla con el color nuevo antes de desaparecer. Es puramente decorativo, pero refuerza la identidad lúdica de la marca sin costar rendimiento, ya que es todo CSS y SVG, sin imágenes.

PANTALLAS

RESULTADO

Vitrina con catálogo de productos y pedido cerrado directo en WhatsApp. Es una base simple y rápida para que el productor venda online sin depender solo de las redes sociales.

QUIERO ALGO PARECIDO ↗ABRIR SITIO ↗