Sonámbulo Estudio Creativo

Descripción del Proyecto

Sonámbulo Estudio Creativo se define como un “super grupo de creativos, publicitarios, mercadólogos y nerds de ideas” que se especializa en asegurar marcas desde su construcción hasta el consumidor final. El sitio web refleja esta filosofía a través de una experiencia digital innovadora e inmersiva.

Características Principales

🎨 Diseño y Experiencia Visual

• Identidad visual cohesiva con colores característicos (lima, azul, tinta)
• Tipografía personalizada Montserrat y Darker Grotesque
• Sistema de iconografía con asteriscos como elementos distintivos
• Navegación fluida con scroll suave y transiciones sin interrupciones

⚡ Animaciones Avanzadas

• Animaciones activadas por scroll con Framer Motion
• Efectos parallax y transformaciones 3D
• Animaciones de texto con revelado carácter por carácter
• Partículas interactivas y efectos de cursor personalizado

📱 Responsivo e Interactivo

• Diseño completamente responsivo para todos los dispositivos
• Detección inteligente táctil vs hover para optimizar interacciones
• Menú móvil animado con transiciones de transformación
• Gestos táctiles optimizados para móvil

Arquitectura Técnica

Frontend

• Next.js 14 con App Router y React Server Components
• TypeScript para seguridad de tipos
• Framer Motion para animaciones performantes
• Hooks personalizados para seguimiento de scroll y detección de dispositivos

Componentes Clave

• Secciones de scroll sticky con seguimiento de progreso
• Sistema de portafolio dinámico para casos de estudio
• Tarjetas de capacidades interactivas con expandir/colapsar
• Animaciones multicapa para efectos de profundidad

Optimizaciones

• Optimización de imágenes con Next.js Image y carga diferida
• Monitoreo de rendimiento con Core Web Vitals
• Optimización SEO con metadatos dinámicos
• Mejora progresiva para mejor accesibilidad

Secciones Principales

1. Hero y Acerca de

Implementación de un sistema innovador de scroll sticky donde el contenido se transforma mientras el usuario navega, revelando la propuesta de valor del estudio paso a paso.

2. Proceso y Metodología

Visualización interactiva del flujo de trabajo del estudio, desde la construcción de marca hasta el consumidor final, con tarjetas expandibles y animaciones hover.

3. Capacidades

Tres áreas principales de especialización:

• 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

4. Portafolio Dinámico

Sistema de casos de estudio con:

• Secciones hero personalizadas por cliente
• Carrusel de imágenes responsivo
• Tarjetas de insights con diferentes layouts
• Navegación fluida entre proyectos

Logros Técnicos

• ✅ Experiencia inmersiva con animaciones fluidas a 60fps
• ✅ Rendimiento optimizado con altos puntajes de Lighthouse
• ✅ Accesibilidad mejorada con navegación por teclado y lectores de pantalla
• ✅ Optimizado para SEO con metadatos dinámicos y datos estructurados
• ✅ Mobile-first con interacciones táctiles nativas

Impacto

El sitio web de Sonámbulo Estudio Creativo establece un nuevo estándar para sitios corporativos en la industria creativa, combinando narrativa visual, tecnología avanzada y experiencia de usuario excepcional para comunicar efectivamente la propuesta de valor única del estudio.