Reforma de cocina: cómo armamos el nuevo sitio
Un recorrido por la apariencia, la mascota y el movimiento detrás del nuevo catsoupmedia.com — qué conservamos, agregamos y dejamos fuera del menú.
El sitio anterior era una sola landing page que cumplió su función durante cerca de un año. Cargaba rápido, decía más o menos lo que hacíamos y enviaba a la gente a un formulario de contacto. También era un folleto plano que se hacía pasar por un estudio.
Esta es la vuelta al nuevo — qué cambió, qué agregamos y las decisiones que volveríamos a tomar.
La cocina
Tres anclas sostienen todo el sitio: crema cálido para el cuerpo, azul marino para los titulares y morado para el territorio de la mascota. Todo lo demás es un especiero — una pizca de azafrán en un CTA, una astilla de turquesa para las señales, verde chartreuse si un botón necesita despertar.
Una nota sobre la elección del crema: va a contracorriente para 2026. El cambio oficial de paleta de Pinterest para 2026 se lee como un “hazte a un lado, amarillo mantequilla” hacia el caqui, el wasabi, el ciruela noir y el jade. El Color del Año de Pantone para 2026 es el blanco frío “Cloud Dancer”. Así que nuestro crema cálido no es que estemos persiguiendo el año — es nuestra forma de decir esta es la cocina que conservamos. Los años de tendencia pasan; el lienzo de una marca debería sobrevivirlos.
Las dos grandes reglas que seguimos:
- Nunca más de dos morados en pantalla a la vez. El morado de marca para las superficies, uno más brillante para los acentos. El más profundo solo aparece en las sombras y en el fondo de los servicios.
- El titular es Urbanist, el cuerpo es Titillium Web, lo micro es JetBrains Mono. Tres familias ya es una de más, pero cada una carga con un trabajo distinto y no pudimos fusionarlas.
La mascota
El gato siempre iba a estar ahí. La pregunta era cuánto espacio darle.
Sitio anterior: un logo plano en la esquina. Sitio nuevo: una cabeza de gato en 3D renderizada con React Three Fiber, fijada junto a la lista de servicios mientras haces scroll por ella, y una capa de mascota flotante que se cuelga del borde del viewport durante todo el recorrido hacia abajo.
La decisión no fue estética. Hay evidencia medible de que un personaje de marca recurrente supera a los anuncios genéricos — no por un pelo, sino por un margen significativo.
El análisis de System1 sobre anuncios de seguros encontró que las campañas con un “fluent device” — su término para un personaje de marca consistente — tienen 37% más probabilidades de ganar participación de mercado, 27% más probabilidades de conseguir clientes y 30% más probabilidades de aumentar las ganancias. Ipsos coloca a los personajes en “más de 6× más efectivos” para la recordación de marca. Una investigación específica de B2B de junio de 2025 llama a las mascotas “un arma secreta que probablemente estás ignorando”. Nosotros no la estábamos ignorando.
La mascota dejó de ser un logo y empezó a ser un personaje. Ese es el cambio alrededor del cual está construido todo el sitio.
La cabeza 3D corre a partir de un único GLB comprimido con Draco (unos 180 KB) con una luz puntual suave. Solo se monta cuando la sección de servicios entra en el viewport — no tiene sentido cargar three.js en la página de inicio si el usuario nunca pasa del hero con el scroll.
Algunas cosas pequeñas que probamos y conservamos:
- La mascota parpadea. Una vez cada 4–7 segundos, de forma aleatoria. No cuesta nada, vende al personaje.
- Mira el cursor en escritorio. Un presupuesto de rotación mínimo — cinco grados en cada dirección. Más que eso y cruza hacia lo perturbador.
- Se queda quieta con
prefers-reduced-motion. Sin excepciones.
El movimiento
La animación de intro es GSAP, no Lottie. Probamos Lottie primero — es la herramienta correcta para piezas autónomas, pero nuestra intro se superpone con el texto del hero y reacciona a la carga de la fuente. GSAP nos permite escalonar las letras del titular, desvanecer el antetítulo y despachar un evento personalizado cuando termina para que el resto de la página pueda tomar el control.
GSAP en sí se convirtió en una decisión distinta en 2025: la adquisición de Webflow se cerró y todo el kit de herramientas de GSAP — incluido cada antiguo plugin del Club — pasó a ser 100% gratis el 30 de abril de 2025. El viejo argumento de “no podemos pagar SplitText” desapareció; se estima que 12 millones de sitios ya lo usan, y sigue siendo el estándar detrás de la mayoría del trabajo de estudio premiado.
Una bandera en window.name recuerda que la intro se reprodujo, así que solo la ves una vez por pestaña. Recargas, y aterrizas directamente en el estado posterior a la intro.
El carrusel de trabajos corre sobre WebGL — un shader personalizado que maneja las transiciones de imagen enmascaradas entre casos de estudio. Es la única pieza de la página de inicio que usa client:load en lugar de client:visible; el resto de las islas se montan de forma diferida.
Lo que recortamos
La primera versión del diseño tenía:
- Una sección de proceso fijada al scroll con cinco pasos animados, cada uno trayendo una ilustración distinta.
- Un ticker de testimonios en vivo en la página de inicio.
- Un widget de “estado del estudio” que mostraba qué proyectos estaban en la cocina esa semana.
Los tres se eliminaron. La sección de proceso la recortamos de cinco pasos a cuatro porque el quinto era “seguimos iterando” — cierto, pero no es un paso. El ticker de testimonios lo quitamos porque la página de inicio ya tiene el Marquee y una cinta de texto en movimiento es más que suficiente. El widget de estado se veía lindo en Figma y se leía como ruido una vez publicado.
Lo que queda está más cerca del hueso. Hero, marquee, servicios, proceso, trabajo, paquetes, FAQ, blog, contacto, footer. Cada sección se gana su propio scroll.
Móvil
El móvil tuvo su propia pasada — el nav de escritorio se convierte en un cajón hamburguesa impulsado por GSAP, la sección de servicios fijada al scroll se desactiva en pantallas pequeñas (el gato 3D pegajoso se estaba quedando atascado), y el titular del hero se ajusta con fuerza para que “BIG APPETITES” siga siendo lo más fuerte en pantalla.
Rendimiento
La página móvil mediana de la web en 2024 pesa 2,311 KB, y solo cerca de la mitad de las páginas (~48%) aprueban las tres Core Web Vitals. Esa es la vara contra la que competimos — la mitad de la web no la pasa.
Elegimos Astro a propósito. State of JS 2025 coloca a Astro como líder de satisfacción para sitios de contenido por un margen de 39 puntos sobre Next.js, y la razón arquitectónica es simple: Astro envía 0 KB de JavaScript por defecto, mientras que aplicaciones comparables de Next.js envían de 90 a 130 KB de runtime del framework antes de que tu código se ejecute. Para un sitio de marketing que no necesita React en cada página, eso es rendimiento gratis.
Cloudflare adquirió al equipo de Astro el 16 de enero de 2026. Apostar por ese caballo unos meses antes rindió frutos — ahora el framework está respaldado por la misma empresa que lo aloja.
Todo el sitio, sección por sección
Un recorrido rápido — desliza por las piezas en un solo lugar:
Lo que sigue
Algunas cosas a las que sabemos que volveremos:
- Reducir aún más el peso de la página de inicio. El portafolio en WebGL es la isla individual más grande; queremos enviar un fallback más ligero para conexiones lentas.
- Más publicaciones. Esta es la primera de una pequeña tanda. Las próximas profundizan en piezas específicas — el shader, la intro, el rig de la mascota.
- Un segundo formato de caso de estudio. La plantilla actual
/work/[slug]funciona bien para grandes lanzamientos; necesitamos una más corta para proyectos de opinión rápida.
Si algo del sitio te llama la atención y quieres saber cómo está armado, el formulario de contacto es la forma más rápida de obtener una respuesta más larga de la que tiene espacio esta publicación.
— The Designer Cat
