Studio Chroma — Uñas como Arte Wearable

May 27, 2026

• Titular de héroe con split-text — "Nails, but louder." con revelados escalonados palabra por palabra usando GSAP SplitText
• Marquees cinéticos infinitos — Etiquetas editoriales auto-scrolling ("NEW / SS26 / ART") que invierten dirección en hover
• Stickers badges rotativos — Elementos SVG inline <textPath> girando continuamente para marcar ediciones estacionales

• Color blocking a nivel de sección — Cada pliegue del sitio está empapado en un pigmento héroe distinto: magenta, coral, lima, cobalto, lavanda o ciruela
• Lavados de color impulsados por scroll — GSAP ScrollTrigger coreografía transiciones suaves de color de fondo mientras el usuario se desplaza hacia abajo
• Inversión de alto contraste — Navegación, logo y tipografía se invierten automáticamente para mantener legibilidad sobre fondos saturados

• Rail de museo horizontal — Una galería de arrastre horizontal de 23 looks de uñas curados, organizados por chips de filtro: All, Chrome, Art, Color
• Integración de GSAP Draggable — Scroll suave basado en inercia con restricciones de boundary
• Visualización de lightbox — Modal de imagen a pantalla completa con navegación por teclado para inspeccionar trabajo de detalle

• Cursor de seguimiento orgánico — Una forma blob que sigue al mouse con física amortiguada en desktop
• Cambios de estado — El cursor cambia de color y escala al hacer hover sobre elementos interactivos (botones, ítems de galería, enlaces)
• Deshabilitado en dispositivos touch — Hace fallback al cursor nativo para móvil y tablet

• Retratos de equipo con bloques de color — Seis miembros del equipo fotografiados contra fondos de pigmento sólido (magenta, coral, lavanda, cobalto, ciruela, lima)
• Interior del estudio — Espacio tipo galería con una pared feature magenta y display de esmaltes arcoíris
• Bios editoriales — Copy breve y confiado que posiciona a los artistas como creadores, no proveedores de servicios

• Takeover de reserva multi-paso a pantalla completa — Selector de servicio, picker de fecha y hora, preferencia de artista y notas
• Modales sheet en móvil — Sheets con sensación de app nativa que se deslizan hacia arriba desde la tab bar
• Validación de formulario — Validación en tiempo real con estados de feedback visual

• Progressive web app instalable — Service worker, web manifest y fallback offline
• Bottom tab bar – Navegación nativa persistente (Studio, Gallery, Book, Contact) con indicador de highlight animado
• Color edge-to-edge — Las secciones sangran hasta los bordes del viewport con awareness de safe-area-inset
• Sheet modals — Patrón de bottom-sheet para reserva, contacto y menú en pantallas pequeñas

• Vanilla HTML5 — Estructura semántica con etiquetas ARIA y roles
• Vanilla CSS3 — Propiedades personalizadas para el sistema de design-token "Lacquer Pop", primitivas de layout modernas y transiciones de color impulsadas por scroll
• Vanilla JavaScript (ES modules) — Punto de entrada con patrón de módulo con detección de características y mejora progresiva

• GSAP + ScrollTrigger + SplitText — Animaciones de grado de producción impulsadas por scroll, revelados de texto y coreografía de sección
• GSAP Draggable — Scroll horizontal de galería basado en inercia
• Lenis — Scroll suave con easing personalizado para una sensación fluida y con peso
• Splitting.js — Animaciones de tipografía a nivel de carácter para marquee y efectos de héroe

• Paleta Lacquer Pop — Pigmentos saturados y deliberados: magenta, coral, lima, cobalto, lavanda y ciruela sobre crema y tinta
• Tipografía — Fraunces 144 opsz para titulares display, emparejado con una sans geométrica limpia para cuerpo de copy
• Responsive Breakpoints — Mobile-first con tratamientos dedicados de tablet y desktop
• prefers-reduced-motion — Respeta preferencias de movimiento del sistema con fallbacks de visibilidad instantánea

• Zero build step — Servicio directo de archivos sin overhead de bundler
• Entrega de imágenes WebP — Toda la fotografía y assets de galería en WebP con loading="lazy"
• Animaciones aceleradas por GPU — Hints will-change y transform3d en elementos con motion pesado
• Huella mínima de dependencias — Solo ecosistema GSAP y Lenis cargados desde CDN

• Service worker — Cachea assets estáticos para navegación offline
• Web app manifest — Instalable en home screens de iOS y Android
• Meta tags theme-aware — theme-color responde a prefers-color-scheme con variantes de crema y tinta

• ARIA labels — Navegación, galería, menú móvil y modal de reserva apropiadamente etiquetados
• Navegación por teclado — Lightbox de galería soporta Escape y flechas; formulario de reserva es completamente accesible por teclado
• Manejo de foco — Menú móvil y takeover de reserva atrapan foco apropiadamente
• Reduced motion — prefers-reduced-motion: reduce desactiva marquees, efectos de cursor y animaciones de scroll

studio-chroma/
├── index.html
├── manifest.webmanifest
├── service-worker.js
├── css/
│   ├── tokens.css          # Design tokens Lacquer Pop
│   ├── base.css            # Reset, tipografía, primitivas de layout
│   ├── components.css      # Botones, chips, cursor, modal, sheet, tab bar
│   ├── sections.css        # Estilos por sección y bloques de color
│   └── animations.css      # Keyframes y presets de motion
├── js/
│   ├── main.js             # Punto de entrada e inits de características
│   ├── lenis.js            # Scroll suave
│   ├── cursor.js           # Cursor blob personalizado
│   ├── animations.js       # Coreografía GSAP
│   ├── marquee.js          # Marquees cinéticos infinitos
│   ├── nav.js              # Nav sticky + tab bar móvil
│   ├── sheet.js            # Controlador de modal sheet
│   ├── gallery.js          # Galería de arrastre horizontal + lightbox
│   ├── booking.js          # Takeover de reserva a pantalla completa
│   └── pwa.js              # Registro de service worker
└── assets/
    ├── general/            # Héroe, servicios, estudio, equipo, mapa
    └── gallery/            # 23 looks de uñas curados

• Tono Editorial para Negocios de Servicios: Aprender a escribir copy que lee como una publicación de moda en lugar de un folleto de negocio local — una técnica que eleva el valor percibido significativamente
• Diseño Color-First: Construir una experiencia completa alrededor de una paleta saturada, tratando cada pigmento como un "capítulo" en lugar de un acento
• Vanilla JS a Escala: Gestionar estado de interacción complejo (cursor, galería, reserva, marquees, nav, sheets) sin framework usando un patrón de módulo disciplinado y detección de características
• Patrones PWA para Sitios de Contenido: Implementar instalabilidad, cacheo offline y patrones de interfaz de app nativa para un sitio de marketing estático
• UX de Galería: Diseñar un rail horizontal de museo de arrastre que se siente táctil en desktop y se traduce naturalmente a swipe en móvil

• Diseño Visual Editorial — Una estética saturada de crítico de arte con color blocking disciplinado
• Motion Design Avanzado — Tipografía cinética impulsada por GSAP, transiciones de color impulsadas por scroll y marquees infinitos
• Interacción Personalizada — Cursor blob, galería de arrastre horizontal y modales sheet
• Progressive Web App — Instalable, capaz offline, con UX móvil de app nativa
• Accesibilidad — Soporte de reduced-motion, navegación por teclado y HTML semántico