Nocturne

Sobre Este Template

Nocturne es una plantilla de restaurante de ultra lujo para comedores de nivel Michelin. Seis páginas cubren la narrativa de inicio, el menú completo, la sala, el chef, las reservas y un 404 con diseño propio. La home sirve el menú degustación con el scroll: el stage hace pin y GSAP recorre con scrub un índice activo a través de ocho tiempos en macro a sangre completa, haciendo cross-fade entre ellos mientras el numeral romano dorado y el nombre en Bodoni se dibujan en pan de oro y la imagen deriva en parallax. Ese wipe es un componente propio — el texto se renderiza dos veces y una capa sólida de gilt se revela de izquierda a derecha animando una custom property --wipe con un borde luminoso, nunca un gradiente. La página de menú compone ocho tiempos, seis platos a la carta con marcas dietéticas y seis maridajes; las reservas incluyen selector de fecha, hora, comensales, sala y ocasión con tarjeta de resumen en vivo y formulario validado.

Firma

La home sirve el menú degustación con el scroll. En desktop el stage hace pin y GSAP recorre con scrub un índice activo a través de ocho macros de comida a sangre completa, con cross-fade entre tiempos mientras el numeral romano dorado y el nombre en Bodoni se dibujan en pan de oro — el texto se renderiza dos veces y una capa sólida de gilt se barre de izquierda a derecha animando una custom property --wipe con borde luminoso, así que se lee como pan de oro real y no como un gradiente. El pin está condicionado a (pointer: fine), 768px y ausencia de reduced motion, y la decisión se difiere hasta después de la hidratación para que el primer render sea idéntico al markup SSR; en móvil esos mismos ocho tiempos se convierten en un stack vertical limpio.

Características

• 6 páginas — Inicio, Menú, La Sala, El Chef, Reservas, 404
• Degustación con pin — GSAP recorre con scrub un índice activo a través de ocho tiempos a sangre completa, con cross-fade y un raíl lateral que marca el plato actual
• Wipe de pan de oro GoldReveal — el texto se renderiza dos veces y una capa sólida de gilt se revela animando una custom property --wipe con borde luminoso
• Hero cinematográfico — plato a sangre completa con parallax ligero en scrub y una viñeta de luz de vela que se profundiza hacia la degustación
• Página de menú — ocho tiempos con numerales romanos dorados, seis platos a la carta con marcas gf/ve/df y seis maridajes por tiempo
• Island de reservas — fecha, hora, número de comensales, preferencia de sala, ocasión y contacto con una tarjeta de resumen que se reconstruye al elegir
• Estados de validación por campo en el formulario de reservas (seguimiento de campos tocados, aria-invalid y foco al primer campo con error) y confirmación de éxito en ambos formularios — solo estado de UI, sin backend que conectar
• La Sala — galería editorial asimétrica de interiores con parallax GSAP por marco: imagen principal, par vertical y franja panorámica
• Acento de video de llama a sangre completa — loop autoplay muteado con poster de fallback y parallax solo en desktop
• Sección de eventos privados — tres paquetes (Cellar Room, Gallery, Full Exclusive) apilados junto a un marco vertical en una división deliberadamente asimétrica 0.85fr / 1.15fr, más formulario de consulta
• Página del chef — hero de retrato, pull quote de filosofía, procedencia de producto y cinco premios con sus años
• Cursor de punto dorado con anillo rezagado que se expande en tags contextuales (Reserve / View / Select / Home), posicionado con left/top para no chocar con el centrado CSS
• Los reveals de scroll dentro de las islands usan CSS nativo animation-timeline: view() — sin observer de JavaScript
• La degustación degrada a un stack vertical estático en touch y reduced motion — el pin está condicionado a (pointer: fine) y 768px, sin zona muerta en móvil
• Overlay de grano cálido de luz de vela, smooth scroll con Lenis y Astro View Transitions; SEO con JSON-LD de Restaurant, Open Graph, URLs canónicas y sitemap
• 28 imágenes optimizadas en el build (AVIF + WebP vía getImage) sobre un set de 35 fotos; TypeScript strict con noUncheckedIndexedAccess — cero any

Despliegue