Avant
Un site gastronomique typique : un gabarit de constructeur lent, le menu en PDF et un module de réservation tiers au design de quelqu’un d’autre.
Site de restaurant gastronomique animé avec réservations
Cendre — un site de table gastronomique avec menu dégustation épinglé au défilement, illustrations d’assiettes générées, galerie plein écran et réservation en cinq étapes, en environ 33 Ko de code compressé, sans bibliothèque d’animation.
Démo en ligne
Testez la version fonctionnelle : formulaires, filtres et calculs tournent dans votre navigateur.
Secteur
Restauration et hôtellerie
Services
Développement web et logiciel
Statut
Réalisation vitrine · démo en ligne
Aperçu du projet
Cendre est une table de dégustation fictive de vingt-deux places, conçue comme vitrine pour les restaurants gastronomiques et les concepts de chef. Le site raconte l’histoire comme un repas : une ouverture calme, un manifeste qui s’illumine à la lecture, puis les neuf services un à un au fil du défilement — et se termine par une réservation qui gère expériences, services, accords et restrictions alimentaires.
Contexte
- Industry: Restauration / gastronomie
- Client size / environment: Table de dégustation de chef — build vitrine, marque fictive
- Primary stakeholders: Chef-propriétaire, service en salle, clients qui planifient une soirée spéciale
Défi
On attend d’un site gastronomique qu’il ressemble à la salle — cinématographique, lent, porté par l’image — mais beaucoup deviennent des pages lourdes de constructeur de site, avec un menu PDF et un module de réservation sans lien avec la marque. L’objectif : des animations de niveau primé (révélation du texte, parallaxe, menu horizontal épinglé, cartes empilées, bandeau défilant, menu plein écran) qui restent rapides, fonctionnent sur mobile, respectent la réduction des animations et passent une CSP stricte.
Livrables
Menu dégustation épinglé : les neuf services défilent à l’horizontale pendant que la section reste fixe, avec compteur en direct ; devient un carrousel tactile sur mobile
Neuf illustrations d’assiettes générées par le code (SVG) — aucune photo de stock pour le menu, rien à licencier
Animations sans bibliothèque : écran de chargement, révélation du texte mot à mot, manifeste éclairé au défilement, parallaxe, bandeau sensible à la vitesse, cartes empilées, braises animées, curseur personnalisé et boutons magnétiques
Accords et bar en onglets accessibles au clavier, avec un aperçu d’image qui suit le pointeur
Menu plein écran et galerie en visionneuse : flèches du clavier, glissement, piège de focus et retour du focus
Réservation en cinq étapes : expérience, convives et calendrier (jours fermés, fenêtre de 30 jours), services avec liste d’attente, coordonnées et restrictions, récapitulatif avec TPS + TVD du Manitoba et fichier .ics
Avant / après
Après
Une seule page rapide qui ressemble à la salle. Le menu se déploie service par service au défilement, et le client choisit expérience, heure, accords et restrictions en cinq étapes. Environ 33 Ko de HTML, CSS et JavaScript compressés, 11 requêtes au premier chargement et aucune requête tierce.
Preuves visuelles
Échéancier
Phase 1
Phase 1 : Concept, direction artistique, typographie et couleurs, choix des photos et système d’illustrations
Phase 2
Phase 2 : Système d’animation, menu dégustation épinglé, onglets, menu plein écran, galerie et visionneuse
Phase 3
Phase 3 : Logique de réservation, mobile et animations réduites, accessibilité, tests automatisés et captures
Résultat
Un site de restaurant avec la finition qu’on attend des studios primés, construit en HTML, CSS et JavaScript simples dont le restaurant est propriétaire. Les étapes de réservation sont prêtes à être reliées à un système de réservation, à un fournisseur de paiement pour l’empreinte de carte ou à un simple courriel vers l’accueil.
Technologies
HTML5, CSS Grid et positionnement sticky, JavaScript natif (IntersectionObserver, requestAnimationFrame, Canvas 2D, SVG généré), polices auto-hébergées, images WebP, tests navigateur automatisés Playwright.