Sonámbulo Estudio Creativo

Project Overview

Sonámbulo Estudio Creativo defines itself as a “super group of creatives, advertisers, marketers and idea nerds” that specializes in securing brands from construction to final consumer. The website reflects this philosophy through an innovative and immersive digital experience.

Key Features

🎨 Design and Visual Experience

• Cohesive visual identity with characteristic colors (lime, blue, ink)
• Custom typography Montserrat and Darker Grotesque
• Iconography system with asterisks as distinctive elements
• Fluid navigation with smooth scrolling and seamless transitions

⚡ Advanced Animations

• Scroll-triggered animations with Framer Motion
• Parallax effects and 3D transformations
• Text animations with character-by-character reveal
• Interactive particles and custom cursor effects

📱 Responsive & Interactive

• Fully responsive design for all devices
• Smart touch vs hover detection to optimize interactions
• Animated mobile menu with morphing transitions
• Optimized touch gestures for mobile

Technical Architecture

Frontend

• Next.js 14 with App Router and React Server Components
• TypeScript for type safety
• Framer Motion for performant animations
• Custom hooks for scroll tracking and device detection

Key Components

• Sticky scroll sections with progress tracking
• Dynamic portfolio system for case studies
• Interactive capability cards with expand/collapse
• Multi-layer animations for depth effects

Optimizations

• Image optimization with Next.js Image and lazy loading
• Performance monitoring with Core Web Vitals
• SEO optimization with dynamic metadata
• Progressive enhancement for better accessibility

Main Sections

1. Hero & About

Implementation of an innovative sticky scroll system where content transforms as the user navigates, revealing the studio’s value proposition step by step.

2. Process and Methodology

Interactive visualization of the studio’s workflow, from brand construction to final consumer, with expandable cards and hover animations.

3. Capabilities

Three main areas of specialization:

• SNMBL Channel Development - Business Strategy and Trade Marketing
• SNMBL Data & Intelligence Center - Dashboards and web/mobile development
• SNMBL Ideas Lab - Creative Strategy and Brand Building

4. Dynamic Portfolio

Case study system with:

• Custom hero sections per client
• Responsive image carousel
• Insight cards with different layouts
• Fluid navigation between projects

Technical Achievements

• ✅ Immersive experience with fluid 60fps animations
• ✅ Optimized performance with high Lighthouse scores
• ✅ Enhanced accessibility with keyboard navigation and screen readers
• ✅ SEO optimized with dynamic metadata and structured data
• ✅ Mobile-first with native touch interactions

Impact

The Sonámbulo Estudio Creativo website sets a new standard for corporate sites in the creative industry, combining visual storytelling, advanced technology, and exceptional user experience to effectively communicate the studio’s unique value proposition.