Nocturne

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.

Qué incluye

• 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

La 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.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/Nocturne/. 6 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.