Maison Lumière – Maquillaje Artístico Luminoso

May 26, 2026

• Héroe inmersivo de tres paneles — Paneles de Nupcial, Editorial y Red Carpet con fotografía de pantalla completa, scrims oscuros y revelados de etiqueta impulsados por hover
• Tira de titular compartida — Una capa tipográfica centrada que unifica el tríptico con una animación de revelado de palabra split-text en carga
• Indicador de scroll-down — Línea animada con etiqueta "Scroll", fade-out en el primer scroll
• Fallback móvil — Imagen única de pantalla completa con gradient scrim para dispositivos táctiles y entornos sin js

• Overlay de Grano de Película — Textura de ruido animada filtrada por SVG aplicada en todo el sitio para una sensación editorial de impresión
• Barra de Progreso de Scroll — Indicador delgado en el borde superior que rastrea la posición de scroll de la página
• Botones Magnéticos — Botones CTA primarios que siguen sutilmente el cursor dentro de un radio usando transforms amortiguados
• Paleta de Porcelana y Tinta — Neutros cálidos (#F8F2EC porcelana, #2B2320 tinta) con acentos blush (#D8A7A0) y dorado (#BFA15E)
• SVG Floral Decorativo — Ilustración botánica con parallax a la deriva en la sección de declaración

• Servicios de Scroll Horizontal — Seis tarjetas de servicio (Nupcial, Editorial, Red Carpet, Ocasiones Especiales, Grupos, Lecciones) en una fila scrollable con revelados de texto a imagen en hover
• Cuadrícula Teaser de Portfolio — Cuadrícula masonry asimétrica en la página de inicio que enlaza al portfolio completo
• Galería de Portfolio Completo — Página de portfolio dedicada con filtrado por categoría (Todo, Nupcial, Editorial, Red Carpet, Ocasión, Retrato, BTS) y revelados escalonados de imágenes
• Integración de Lightbox — Visualización de imagen a pantalla completa con navegación por teclado

• Viaje de Cuatro Pasos — Consulta, Prueba, El Día y El Recuerdo — presentados con pasos numerados y animaciones de fade-in disparadas por scroll
• Imagen de Proceso Atmosférica — Fotografía de vanity con luz cálida y deriva parallax

• Contadores Animados — Banda de estadísticas (12 años, 600+ eventos, 40 ciudades, rating 5.0) con animaciones de count-up disparadas por scroll
• Slider de Testimonios — Citas de clientes rotativas con navegación prev/siguiente y retratos de avatar
• Teaser de Journal — Tarjetas de blog estilo editorial con tags de categoría, fechas y vistas previas de extracto

• Página de Reserva Dedicada — Selector de servicio con tarjetas visuales, selector de fecha y hora, campo de ubicación y textarea de notas
• Formulario de Contacto — Nombre, correo, teléfono y mensaje con validación y estado de éxito
• FAQ Accordion — Respuestas expandibles a preguntas comunes de reserva

• Header Inteligente — Transparente sobre héroe oscuro, sólido al hacer scroll, con variantes de wordmark y monograma
• Menú Hamburger — Overlay de pantalla completa con revelados escalonados de enlaces
• Mobile Tab Bar — Navegación inferior persistente con indicador de highlight animado (Inicio, Trabajo, Reservar, Contacto)
• Skip Link — Bypass de accesibilidad-first al contenido principal

• Vanilla HTML5 — Estructura semántica con etiquetas ARIA, roles y skip-link de accesibilidad
• Vanilla CSS3 — Propiedades personalizadas para tokens de diseño, animaciones clip-path, grids CSS y breakpoints responsivos
• Vanilla JavaScript (ES6+) — IIFE con patrón de módulo con delegación de eventos y animaciones impulsadas por RAF

• GSAP + ScrollTrigger — Animaciones de grado de producción impulsadas por scroll: revelados de sección, parallax, animaciones de palabras split-text, grids escalonados y triggers de contadores de banda de promesa
• Lenis — Biblioteca de scroll suave con easing personalizado para una sensación fluida y con peso
• CSS Animations & Transitions — Interacciones de héroe impulsadas por keyframes, estados hover de botones y transiciones de menú móvil

• Custom Design Tokens — Variables CSS para una paleta cálida de marca de belleza (porcelana, ivory, champagne, blush, gold, espresso)
• Responsive Breakpoints — Mobile-first con layouts dedicados de tablet y desktop
• Sistema de Tipografía — Fraunces (display), Cormorant Garamond (acento), Mulish (cuerpo) cargadas desde Google Fonts
• prefers-reduced-motion — Respeta preferencias de movimiento del sistema con fallbacks de visibilidad instantánea

• Optimización de Imágenes — Toda la fotografía entregada en formato WebP con loading="lazy" y decoding="async"
• Fetch Priority — Imágenes del héroe tríptico marcadas con fetchpriority="high" para el LCP más rápido
• Animaciones Aceleradas por GPU — Hints will-change en elementos con transformaciones pesadas
• Sin Overhead de Framework — Manipulación directa del DOM sin reconciliación de virtual DOM

• Defaults de GSAP ScrollTrigger — Puntos de trigger consistentes (top 82%) y toggle actions a través de todos los efectos impulsados por scroll
• Split-Text Word Reveal — Helper splitWords() personalizado que envuelve cada palabra en spans para animaciones escalonadas de opacity/translateY
• RAF-Based Magnetic Buttons — Seguidor de cursor personalizado amortiguado usando requestAnimationFrame e interpolación lineal
• Capas de Parallax — Atributos data-parallax impulsan offsets de GSAP yPercent vinculados al progreso de scroll

• ARIA Labels — Navegación, menú móvil, sliders y elementos interactivos apropiadamente etiquetados
• Navegación por Teclado — Lightbox soporta tecla Escape; formulario de reserva es completamente accesible por teclado
• Manejo de Foco — Menú móvil y modal de reserva manejan trapping de foco
• HTML Semántico — Elementos section con jerarquía de headings, tags article para tarjetas y posts de journal
• Reduced Motion — prefers-reduced-motion: reduce revela instantáneamente todo el contenido animado

maison_lumiere/
├── index.html                    # Página de inicio con todas las secciones
├── portfolio.html                # Galería de portfolio completa con filtrado
├── booking.html                  # Formulario de reserva + contacto + FAQ
├── 404.html                      # Página de error con marca
├── sw.js                         # Service worker para PWA
├── manifest.webmanifest          # Manifest de PWA
├── assets/
│   ├── css/
│   │   ├── tokens.css            # Design tokens + CSS reset
│   │   ├── base.css              # Layout, tipografía, utilidades
│   │   ├── components.css        # Componentes de interfaz reutilizables
│   │   └── pages.css             # Estilos específicos por página
│   ├── js/
│   │   ├── animations.js         # Revelados de GSAP ScrollTrigger y escenas
│   │   ├── nav.js                # Header, menú móvil, tab bar
│   │   ├── lenis-init.js         # Inicialización de smooth scroll
│   │   ├── gallery.js            # Filtrado de portfolio y lightbox
│   │   └── booking.js            # Validación de formulario e interacciones
│   └── images/                   # Assets de fotografía WebP
└── favicon.svg                   # Marca de la marca

• Diseño de Belleza Editorial: Se aprendió a crear un lenguaje visual adecuado para marcas de belleza de lujo — tipografía contenida, paletas neutras cálidas y espacio en blanco generoso que deja respirar a la fotografía
• Patrones de GSAP ScrollTrigger: Se construyeron primitivas de animación reutilizables (data-reveal, data-split, data-parallax) que escalan a través de un sitio estático de múltiples páginas
• Arquitectura Estática Multi-Página: Se gestionaron componentes compartidos (header, footer, nav) a través de tres archivos HTML con CSS y JS consistentes, entendiendo las compensaciones de sitios estáticos versus SPAs
• Rendimiento para Sitios Visualmente Pesados: Se optimizó una experiencia rica en fotografía a través de conversión WebP, lazy loading e hints de fetch-priority para mantener LCP rápido a pesar de assets grandes
• Fundamentos de PWA: Se implementaron un service worker y web manifest para instalabilidad, entendiendo los requisitos base para sitios estáticos listos para offline

• Diseño Visual Editorial — Una estética cálida y contenida digna de una artista de maquillaje de alta gama
• Animación Impulsada por Scroll — GSAP + ScrollTrigger para coreografía de revelado sofisticada
• Optimización de Rendimiento — Imágenes WebP, lazy loading y overhead mínimo de JavaScript
• Accesibilidad — Soporte de reduced-motion, navegación por teclado y HTML semántico
• Arquitectura Estática Multi-Página — Limpia separación de concerns a través de páginas de inicio, portfolio y reserva