Sonámbulo Estudio Creativo

Project Overview

Sonámbulo Estudio Creativo is a multidisciplinary creative studio that calls itself a “super group of creatives, advertisers, marketers and idea nerds.” They work across branding, route-to-market strategy, and digital products. The website needed to reflect that energy: not a standard corporate brochure, but an experience that communicates what the studio does through how the site itself behaves.

Animation Architecture

The site is built around scroll-driven interactions. Rather than decorative transitions, animations serve a structural purpose: they control how content reveals, how sections connect, and how the user discovers the studio’s capabilities.

Scroll Progress System

A custom hook tracks viewport scroll position and maps it to animation progress values. This drives sticky sections where content transforms as the user scrolls: text morphs, images slide in, and the value proposition unfolds step by step without requiring clicks or navigation.

Performance Strategy

Multiple animated elements running concurrently can easily drop frames. The site maintains 60fps through:

• GPU-accelerated transforms via Framer Motion’s motion components
• Animation batching to avoid layout thrashing
• Intersection Observer-based activation so off-screen elements don’t consume resources
• Next.js Image with lazy loading for heavy visual assets

Key Sections

Hero and About

A sticky scroll section where the studio’s positioning reveals progressively. As the user scrolls, text blocks transform and images transition, telling the story from “who we are” to “what we believe” without a single page navigation.

Capabilities

Three areas of specialization presented as interactive cards:

• 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

Each card expands on hover (desktop) or tap (mobile) to reveal detailed service descriptions.

Dynamic Portfolio

A case study system with per-client hero sections, responsive image carousels, insight cards with varied layouts, and fluid navigation between projects.

Technical Details

Frontend

• Next.js 14 with App Router and React Server Components
• TypeScript for type safety across the component tree
• Framer Motion as the animation engine, with useScroll, useTransform, and useInView hooks
• Custom hooks for scroll tracking, device detection, and intersection observation

Responsive Interaction Layer

The site detects input type (touch vs. pointer) and adjusts interaction patterns accordingly. On desktop, cards respond to hover with 3D perspective transforms. On mobile, the same cards use tap-to-expand with optimized touch gesture handling. A single component codebase serves both experiences through conditional interaction hooks.

Design System

• Cohesive visual identity using the studio’s brand colors (lime, blue, ink)
• Montserrat and Darker Grotesque typography
• Asterisk-based iconography as a recurring visual motif
• SCSS with component-scoped modules and shared variables

Impact

The site replaces a previous version that didn’t reflect the studio’s creative capabilities. The new version communicates Sonámbulo’s positioning through motion and interaction rather than static copy, setting a higher bar for how creative agencies present themselves online.