La mayoría de las webs de restaurantes son el mismo folleto desplazable: una foto principal, una carta en PDF, un formulario de contacto. NOIRÉ no es eso. Está construida como una experiencia gastronómica en la oscuridad: cada desplazamiento despliega una escena nueva, cada plato se revela pase a pase, y cuando el visitante llega al botón de reserva ya se siente sentado a la mesa.

Demo en vivo: https://noire-
dining.netlify.app/

La plantilla se centra en cinco secuencias distintivas. «Revelación del plato» convierte un solo plato en una historia cinematográfica de cinco etapas: ingrediente → preparación → emplatado → el plato → el primer bocado, controlada con el desplazamiento. «Catorce asientos» es un motivo interactivo de asientos en el que 14 marcadores se animan y revelan una parte de la experiencia gastronómica al pasar el cursor o tocar. El «Modo oscuridad» es un recorrido fijo, guiado por el desplazamiento, a través de cinco escenas de una velada, desde la llegada hasta el último plato, que oscurece progresivamente la pantalla a medida que avanza la noche. El «Menú degustación interactivo» guía a los comensales por una secuencia completa de cinco pases: aperitivo, primero, segundo, principal y postre, cada uno con su plato, ingredientes y maridaje de vino. Y la «Anatomía del plato» abre cada plato individual con el mismo estilo secuencial de carta Michelin: plato → ingredientes → composición → maridaje.

Todas estas secuencias se controlan con archivos de datos tipados y sencillos en src/data/: no hay CMS, ni base de datos, ni backend que conectar. Cambiar el nombre del restaurante, reescribir la carta, añadir un plato nuevo, sustituir fotos y vídeos o modificar la paleta de colores y las fuentes es cuestión de editar un objeto de TypeScript, sin tocar el código de los componentes. Los formularios de contacto y reserva están totalmente construidos y validados en el cliente, listos para conectarse a un backend real o a un proveedor de reservas cuando lances la web. Una Guía del cliente completa explica paso a paso la marca, el contenido, las imágenes, el vídeo, la navegación, el SEO y el despliegue, por lo que resulta cómoda de usar incluso para alguien que no sea desarrollador y mantenga la web en el día a día.

Creada con Next.js 16 (App Router) y TypeScript, Tailwind CSS v4, Framer Motion, GSAP/ScrollTrigger, desplazamiento suave con Lenis, React Hook Form + Zod e iconos de Lucide. Qué obtienes: el código fuente completo, todas las rutas (inicio, carta, detalle del plato, experiencia, historia, diario + detalle del artículo, reservas, contacto), diseños adaptables probados hasta 320 px, imágenes servidas con next/image (AVIF/WebP automáticos, carga diferida), alternativas de movimiento reducido para cada secuencia animada, metadatos SEO con tarjetas Open Graph/Twitter y datos estructurados JSON-LD de restaurante, un sitemap y un archivo robots generados automáticamente, y una Guía del cliente escrita que cubre la instalación, la personalización y el despliegue en Netlify o Vercel.