The Atelier – Experiencia de Barbería Cinematográfica

May 20, 2025

• Lenis Smooth Scroll – Scroll suave configurado personalmente con easing exponencial para una sensación fluida y con peso
• Secciones con Scrub de Scroll – Múltiples secciones usan IntersectionObserver y cálculos de progreso impulsados por RAF para animar elementos basados en la posición del viewport
• Scroll Horizontal Fijado – La sección "Barbers" se fija al viewport y translada una pista horizontal basada en el progreso del scroll vertical
• Crossfade de Ritual – Tres marcos de fondo hacen crossfade con transformaciones de escala mientras el usuario hace scroll a través de los pasos del ritual
• Scrubbing de Testimonios – Cuatro testimonios rotan basados en la posición de scroll a través de la sección de testimonios

• Overlay de Grano de Película – Textura de ruido animada basada en SVG aplicada en todo el sitio con CSS mix-blend-mode
• Overlay de Viñeta – Gradiente radial oscureciendo los bordes del viewport para un look cinematográfico
• Cursor Personalizado – Cursor de doble elemento (punto + anillo) con mix-blend-mode difference, estados hover y etiquetas contextuales ("VIEW", "BOOK")
• Paleta de Latón y Tinta – Latón cálido (#B68A48) sobre tinta profunda (#0A0908) con texto marfil para una sensación editorial
• Máscaras de Revelado – Animaciones CSS clip-path disparadas por IntersectionObserver para entradas dramáticas de secciones

• Galería con Lightbox – Cuadrícula masonry de 28 imágenes poblada dinámicamente vía JavaScript, con categorías filtrables (Fades, Beards, Line work) y un lightbox completo con navegación por teclado
• Modal de Reserva – Modal deslizable hacia arriba con campos de formulario, selección de servicio, selección de barbero y selector de horario
• Services Flat-Lay – Imagen de herramientas fijada que hace zoom a diferentes puntos focales mientras cada fila de servicio entra al centro del viewport
• Contador Animado – Años de experiencia del barbero cuentan hacia arriba con una animación RAF escalonada cuando las tarjetas entran en vista

• Cormorant Garamond + Archivo – Tipo serif display para titulares, sans-serif limpia para cuerpo e interfaz
• Contador de Sección – Contador fijo en la parte superior derecha que se actualiza mientras cada sección principal entra al viewport
• Navegación Inferior Móvil – Navegación inferior estilo píldora con indicador animado para usuarios móviles
• Secuencia de Loader – Animación de carga con marca expandiendo hairline y revelación de wordmark antes de que el héroe se desvanezca

• Vanilla HTML5 – Estructura semántica con atributos de accesibilidad (etiquetas ARIA, roles)
• Vanilla CSS3 – Propiedades personalizadas para design tokens, animaciones clip-path, grids CSS y breakpoints responsivos
• Vanilla JavaScript (ES6+) – IIFE con patrón de módulo con dispatchers RAF, IntersectionObserver y delegación de eventos

• Lenis – Biblioteca de scroll suave con curva de easing personalizada
• CSS Animations & Transitions – Revelado de letras del héroe impulsado por keyframes, indicador de scroll, animación de grano
• requestAnimationFrame – Loop de animación impulsado por scroll personalizado para parallax, barras de progreso y efectos específicos de sección

• Custom Design Tokens – Variables CSS para colores, curvas de easing, escala tipográfica y espaciado
• Responsive Breakpoints – Mobile-first con navegación móvil dedicada y padding de sección ajustado
• prefers-reduced-motion – Respeta preferencias de movimiento del sistema donde aplica

• Optimización de Imágenes – Todos los assets convertidos a formato WebP, reduciendo el tamaño total de assets de ~14.6MB a ~3.5MB (76% de reducción)
• Lazy Loading – Imágenes de galería usan atributo nativo loading="lazy"
• Hints will-change – Aplicados a elementos con transformaciones pesadas para composición GPU
• Sin Overhead de Framework – Manipulación directa del DOM sin reconciliación de virtual DOM

• Patrón RAF Dispatcher – Un único listener de scroll event maneja múltiples callbacks de animación vía una función pump centralizada, previniendo cálculos de layout duplicados
• IntersectionObserver para Triggers – Usado para conteo de secciones, máscaras de revelado y estado de navegación móvil, evitando cálculos de posición de scroll donde sea posible
• Animaciones CSS-First – Revelado de letras del héroe, fade-in de tagline y secuencia de loader usan keyframes CSS con animation-play-state toggled por JS

• ARIA Labels – Diálogos modales, navegación y elementos interactivos apropiadamente etiquetados
• Navegación por Teclado – Lightbox soporta Escape, ArrowLeft y ArrowRight
• Manejo de Foco – Apertura/cierre de modal maneja bloqueo de scroll vía Lenis stop/start
• HTML Semántico – Elementos section con jerarquía de headings, figure/figcaption para imágenes

atelier/
├── index.html                    # Sitio de una sola página con todas las secciones
├── styles.css                    # Design tokens, layouts, animaciones
├── atelier.js                    # Coreografía de scroll e interacciones
├── script.js                     # Script de interacción alternativo
├── favicon.svg                   # Marca de la marca
└── assets/
    ├── landing_page/             # Imágenes de héroe, ritual, servicios, reserva
    ├── teams/                    # Fotos de retrato de barberos
    └── gallery/                  # Imágenes de trabajo de portfolio (28 total)

• Patrones de Animación Vanilla JS: Se construyó un sistema de animación escalable basado en RAF sin depender de GSAP o bibliotecas similares, ganando comprensión profunda de cálculos de progreso de scroll y presupuestos de rendimiento
• Diseño Web Editorial: Se aprendió a tratar un sitio comercial como una experiencia narrativa, usando ritmo, tipografía y espacio negativo para crear impacto emocional
• Gestión de Pipeline de Assets: Se estableció un workflow para convertir y optimizar assets de imagen (conversión WebP, reducción de tamaño) para despliegue de sitios estáticos
• UX Impulsada por Scroll: Se ganó experiencia diseñando interfaces donde la posición de scroll es el mecanismo de interacción primario, requiriendo atención cuidadosa a matemáticas de viewport y comportamiento de fallback
• Despliegue de Sitio Estático: Desplegado vía Dockploy como un contenedor nginx estático, entendiendo la importancia de index.html como punto de entrada para servidores web