Registro del concepto
Fecha del registro: 20 de mayo de 2026. La tecnología y las capturas describen el prototipo según quedó documentado en esta fecha. Cualquier observación de rendimiento corresponde al mismo registro puntual. No se implica que exista una implementación actual para un cliente.
La Volta es un refinado sitio web de una sola página para un restaurante italiano ubicado dentro de una histórica bóveda de piedra en Madrid. El lenguaje de diseño se apoya fuertemente en la tipografía editorial, el movimiento contenido y los tonos cálidos terrosos, creando una experiencia que se siente más cercana a hojear una revista de alta cocina que a navegar un sitio de restaurante típico.
Construido sin frameworks, el sitio usa HTML, CSS y JavaScript vanilla orquestados por GSAP y Lenis smooth scrolling. Cada sección está diseñada para hacer que el visitante disminuya la velocidad: los titulares con texto dividido se revelan línea por línea, los contadores de estadísticas avanzan al hacer scroll y un héroe cinematográfico ancla la marca antes de que se mueva el primer píxel.
Demo en Vivo: https://lavolta.apalaugonzalez.com/
Características Principales
- Héroe de pantalla completa con fotografía de interior de bóveda de piedra y overlay de gradiente en capas para legibilidad de texto
- El elemento picture responsivo sirve un crop 9:16 en móvil y 16:9 en desktop
- Eyebrow, título y botones CTA se escalan en carga con sutil opacity + translateY
- Indicador de scroll-hint con movimiento vertical en bucle
- Skip-link semántico para accesibilidad
Animaciones de Texto Dividido
- Cada titular principal usa una técnica de revelado por líneas divididas: cada línea está enmascarada en su propio contenedor overflow-hidden, y el texto interior se desliza hacia arriba desde abajo al entrar en el viewport
- Impulsado por GSAP ScrollTrigger con progreso scrubbed
- Crea un ritmo de lectura tipo revista
Sección de Historia con Estadísticas Animadas
- Layout editorial de dos columnas: texto narrativo junto a un retrato del chef
- Fila de estadísticas cuenta hacia arriba desde cero al entrar en el viewport (20 años, 12 regiones, 3 generaciones)
- Overlay de textura de grano añade profundidad táctil sin impactar la legibilidad
Menú Dinámico con Pestañas (La Carta)
- Categorías de menú renderizadas como botones de pestaña accesibles (role="tablist")
- El cambio de pestaña hace crossfade de paneles de contenido con transiciones de opacity de GSAP
- Las tarjetas de plato incluyen precios, descripciones e indicadores dietéticos
- Barra de progreso en la parte inferior de la sección de menú rastrea la profundidad de scroll a través de la categoría activa
- Totalmente responsivo; las pestañas se vuelven scrollable horizontalmente en viewports estrechos
Sección de Vinos y Bebidas
- Fondo de grano oscuro invierte la paleta para contraste
- Lista de vinos curada con región, añada y notas de maridaje
- Pull-quote destacado de espresso con comillas decorativas
- Tarjetas de bebidas con fotografía editorial y notas de cata
- Formulario de reserva completo con validación en tiempo real del lado del cliente
- Campos: nombre, correo, teléfono, selector de fecha, selector de hora, cantidad de comensales, ocasión
- Inputs estilizados personalizados que coinciden con la paleta cálida, sin chrome de navegador por defecto
- Interacción de bottom-sheet en móvil: un handle despliega el formulario hacia arriba en dispositivos táctiles
- Toast de notificación de éxito al enviar
- Mensajería de error accesible con aria-live="polite"
- Botón hamburger alterna un menú overlay de pantalla completa con revelado escalonado de enlaces
- Botón de cierre y dismiss por click en backdrop
- Manejo de foco para usuarios de teclado y screen-reader
- Atributos aria-expanded y aria-controls para accesibilidad
- Paleta: Umber Profundo (#1E0D06), Crema (#FAF3E4), Piedra Cálida (#C4B7A6), Oliva Apagada (#8A7E6B)
- Tipografía: Cormorant Garamond (display / cuerpo), Cormorant SC (small caps labels), Jost (UI / navegación)
- Espaciado: Ritmo vertical generoso; secciones respiran con padding de 10vh+
- Textura: Overlay sutil de grano de película en secciones selectas para evocar papel envejecido y piedra
- Sin border radius en tarjetas; bordes afilados editoriales refuerzan el entorno histórico
Aspectos Técnicos Destacados
- Vanilla HTML / CSS / JS, cero overhead de framework para máximo control y rendimiento
- GSAP + ScrollTrigger, todas las animaciones impulsadas por scroll son scrubbed o disparadas por intersección de viewport
- Lenis smooth scroll, scroll con inercia que se integra limpiamente con ScrollTrigger vía lenis.on('scroll', ScrollTrigger.update)
- IntersectionObserver, contadores de estadísticas y animaciones de revelado usan observers nativos como triggers ligeros
- Responsive picture element, arte de héroe dirigido con <source media> para crop móvil vs. wide shot desktop
- Validación de formulario, regex personalizado y API de constraint-validation; sin biblioteca externa
- prefers-reduced-motion respetado: desactiva animaciones scrubbed de scroll y overlay de grano para usuarios que lo necesitan
- Toda la imaginería entregada como WebP con loading="lazy" y decoding="async" fuera del héroe
La Volta demuestra cómo una marca de restaurante puede trascender el look de template invirtiendo en diseño editorial, movimiento contenido y jerarquía tipográfica. El sitio funciona como pieza de portfolio para marcas de hospitalidad de lujo, hoteles, cenas privadas, wine bars y experiencias culinarias boutique, donde la atmósfera es el producto.
Ver Proyecto
