La plupart des sites de restaurants sont la même brochure à faire défiler : une photo d'accueil, un menu en PDF, un formulaire de contact. NOIRÉ n'est pas cela. Il est conçu comme un dîner dans le noir : chaque défilement dévoile une nouvelle scène, chaque plat se révèle service après service, et lorsque le visiteur arrive au bouton de réservation, il a déjà l'impression d'être installé à table.

Démo en ligne : https://noire-
dining.netlify.app/

Le modèle s'articule autour de cinq séquences signature. « Révélation du plat » transforme une seule assiette en une histoire cinématographique en cinq étapes : ingrédient → préparation → dressage → le plat → la première bouchée, pilotée par le défilement. « Quatorze places » est un motif interactif de placement où 14 repères s'animent et dévoilent un fragment de l'expérience gastronomique au survol ou au toucher. Le « Mode obscurité » est un parcours fixe, piloté par le défilement, à travers cinq scènes d'une soirée, de l'arrivée au dernier service, qui assombrit progressivement l'écran à mesure que la nuit tombe. Le « Menu dégustation interactif » guide les convives à travers une séquence complète de cinq services : mise en bouche, entrée, deuxième plat, plat principal, dessert, chacun avec son plat, ses ingrédients et son accord mets et vins. Et « L'anatomie du plat » ouvre chaque plat dans le même style séquentiel de menu étoilé : plat → ingrédients → composition → accord mets et vins.

Chacune de ces séquences est pilotée par de simples fichiers de données typés dans src/data/ : il n'y a ni CMS, ni base de données, ni backend à brancher. Renommer le restaurant, réécrire le menu, ajouter un nouveau plat, remplacer les photos et vidéos ou changer la palette de couleurs et les polices revient à modifier un objet TypeScript, sans toucher au code des composants. Les formulaires de contact et de réservation sont entièrement construits et validés côté client, prêts à être connectés à un vrai backend ou à un prestataire de réservation lors du lancement. Un Guide client complet détaille pas à pas la marque, le contenu, les images, la vidéo, la navigation, le SEO et le déploiement, de sorte que le modèle reste facile à utiliser même pour une personne non développeuse qui gère le site au quotidien.

Construit avec Next.js 16 (App Router) et TypeScript, Tailwind CSS v4, Framer Motion, GSAP/ScrollTrigger, le défilement fluide Lenis, React Hook Form + Zod et les icônes Lucide. Ce que vous recevez : le code source complet, toutes les routes (accueil, menu, détail d'un plat, expérience, histoire, journal + détail d'un article, réservations, contact), des mises en page responsives testées jusqu'à 320 px, des images servies via next/image (AVIF/WebP automatiques, chargement différé), des solutions de repli pour mouvement réduit dans chaque séquence animée, des métadonnées SEO avec cartes Open Graph/Twitter et données structurées JSON-LD de restaurant, un sitemap et un fichier robots générés automatiquement, ainsi qu'un Guide client rédigé couvrant l'installation, la personnalisation et le déploiement sur Netlify ou Vercel.