Sonámbulo Estudio Creativo

Resumen del Proyecto

Sonámbulo Estudio Creativo es un estudio creativo multidisciplinario que se autodefine como un “super grupo de creativos, publicitarios, mercadólogos y nerds de ideas.” Trabajan en branding, estrategia de ruta al mercado y productos digitales. El sitio web necesitaba reflejar esa energía: no un folleto corporativo estándar, sino una experiencia que comunica lo que el estudio hace a través de cómo el sitio mismo se comporta.

Arquitectura de Animación

El sitio está construido alrededor de interacciones accionadas por scroll. En lugar de transiciones decorativas, las animaciones cumplen un propósito estructural: controlan cómo se revela el contenido, cómo se conectan las secciones y cómo el usuario descubre las capacidades del estudio.

Sistema de Progreso de Scroll

Un hook personalizado rastrea la posición del scroll en el viewport y la mapea a valores de progreso de animación. Esto impulsa secciones sticky donde el contenido se transforma mientras el usuario hace scroll: el texto se transforma, las imágenes se deslizan y la propuesta de valor se despliega paso a paso sin requerir clicks ni navegación.

Estrategia de Rendimiento

Múltiples elementos animados corriendo concurrentemente pueden fácilmente perder frames. El sitio mantiene 60fps mediante:

• Transforms acelerados por GPU vía los componentes motion de Framer Motion
• Agrupación de animaciones para evitar layout thrashing
• Activación basada en Intersection Observer para que los elementos fuera de pantalla no consuman recursos
• Next.js Image con carga diferida para assets visuales pesados

Secciones Principales

Hero y Acerca de

Una sección de scroll sticky donde el posicionamiento del estudio se revela progresivamente. Mientras el usuario hace scroll, los bloques de texto se transforman y las imágenes transicionan, contando la historia desde “quiénes somos” hasta “en qué creemos” sin una sola navegación de página.

Capacidades

Tres áreas de especialización presentadas como tarjetas interactivas:

• SNMBL Channel Development - Estrategia de negocio y trade marketing
• SNMBL Data & Intelligence Center - Dashboards y desarrollo web/móvil
• SNMBL Ideas Lab - Estrategia creativa y construcción de marca

Cada tarjeta se expande al hacer hover (desktop) o tap (móvil) para revelar descripciones detalladas de servicios.

Portfolio Dinámico

Un sistema de casos de estudio con secciones hero por cliente, carruseles de imágenes responsivos, tarjetas de insights con layouts variados y navegación fluida entre proyectos.

Detalles Técnicos

Frontend

• Next.js 14 con App Router y React Server Components
• TypeScript para seguridad de tipos en todo el árbol de componentes
• Framer Motion como motor de animación, con hooks useScroll, useTransform y useInView
• Hooks personalizados para seguimiento de scroll, detección de dispositivos y observación de intersección

Capa de Interacción Responsiva

El sitio detecta el tipo de input (touch vs. pointer) y ajusta los patrones de interacción. En desktop, las tarjetas responden al hover con transformaciones de perspectiva 3D. En móvil, las mismas tarjetas usan tap-to-expand con manejo optimizado de gestos táctiles. Un solo codebase de componentes sirve ambas experiencias a través de hooks de interacción condicionales.

Sistema de Diseño

• Identidad visual cohesiva usando los colores de marca del estudio (lima, azul, tinta)
• Tipografía Montserrat y Darker Grotesque
• Iconografía basada en asteriscos como motivo visual recurrente
• SCSS con módulos a nivel de componente y variables compartidas

Impacto

El sitio reemplaza una versión anterior que no reflejaba las capacidades creativas del estudio. La nueva versión comunica el posicionamiento de Sonámbulo a través de movimiento e interacción en lugar de copy estático, estableciendo un estándar más alto para cómo las agencias creativas se presentan en línea.