Étude de cas

2025

Mystères à la carte

Landing one-page immersive — narration visuelle, micro-FX cadrés et conversion vers la réservation

Product DesignFront-endUI/UXArchitectureQualitéNext.js 16React 19TypeScriptTailwind CSS v4Framer MotionReact Hook FormZod

Voir la démo Voir le code Me contacter

Resume

Contexte du projet

Mystères à la carte est une démo one-page pour un escape game culinaire. Le projet devait tenir un équilibre délicat : créer une ambiance forte, donner envie de réserver vite, et rester lisible malgré une mise en scène visuelle plus démonstrative.

•Direction artistique immersive mais techniquement cadrée.

•Parcours one-page clair du hero au formulaire.

•Base qualité plus poussée que sur beaucoup de démos visuelles.

•Très bon exemple de compromis entre effet, accessibilité et structure.

Vision

Intention produit

Créer une page qui intrigue d’abord, informe au bon moment, puis conduit vers l’action sans friction.

Objectifs

Installer une ambiance mémorable dès le hero.
Rendre les informations clés immédiatement scannables.
Guider vers la réservation sans casser l’immersion.
Encadrer les effets visuels pour préserver accessibilité et performance.

Defis

Accumuler des micro-FX sans produire de bruit visuel.
Conserver une vraie lisibilité sur un univers dark et texturé.
Gérer un formulaire riche sans backend réel.
Prouver la robustesse technique d’un projet très orienté direction artistique.

Solutions

Architecture feature-based claire entre app, shared, features et content.
Animations Framer Motion ciblées sur les zones à forte valeur perçue.
FX montés proprement via un orchestrateur dédié et opt-in.
Formulaire avec React Hook Form, Zod, honeypot et retours utilisateur explicites.

Impact

Points forts

Direction artistique immersive mais techniquement cadrée.

Parcours one-page clair du hero au formulaire.

Base qualité plus poussée que sur beaucoup de démos visuelles.

Très bon exemple de compromis entre effet, accessibilité et structure.

Decisions

Créer une architecture de référence documentée pour éviter la dérive “one-page désorganisée”.
Isoler les effets visuels dans shared/ui/fx.
Charger dynamiquement les parties plus lourdes comme la dataviz.
Inclure des headers de sécurité et des pages légales malgré le caractère démo.

Principes

Une seule page, un seul objectif principal : réserver.
Chaque section doit faire progresser la décision.
Les effets sont au service du récit, pas l’inverse.
Le parcours mobile doit rester prioritaire.

UX

Navigation ancrée et CTA visibles dans le parcours.
Formulaire avec états clairs et feedback immédiat.
Sections courtes et hiérarchisées pour accélérer la décision.
Prise en compte de prefers-reduced-motion.

UI

Univers visuel premium dark avec textures, glow et grain.
Hiérarchie forte entre récit, infos concrètes et CTA.
Micro-interactions ciblées plutôt que généralisées.
Composants FX séparés du rendu principal.

Suite

Brancher un vrai backend de réservation.
Mesurer davantage les Web Vitals en production.
Affiner encore les budgets de performance mobile.

Qualite

Testing & fiabilite

Le projet a été pensé comme une démo visuelle sérieuse : quality gates, tests, vérifications e2e et contrôle du poids de certains effets.

Tests unitaires Node sur la config et certaines règles de base.
Tests composants avec Vitest et Testing Library.
Tests e2e et scénario critique avec Playwright.
Mesure dédiée de la taille source/gzip des composants FX.

Technique

Architecture

Architecture App Router structurée par features, avec une couche shared claire et des effets visuels volontairement encadrés.

Points cles

Découpage app / features / shared / content / types.
FX optionnels et cloisonnés.
Sécurité HTTP configurée dans next.config.ts.
Couverture qualité inhabituelle pour une landing démo.

publicRoutes

/
/legal-notice
/privacy-policy
/terms

quality

TypeScript strict
ESLint
Prettier
Vitest
Playwright
Check all
FX size budget

Galerie

Captures & détails d'interface.

Une lecture visuelle du projet : écrans clés, rythme, hiérarchie, composants et choix de mise en page.

Envie d'un échange ? Je peux vous présenter ce projet comme en entretien : choix techniques, performance, accessibilité.

Voir la démo Voir le code

Contexte du projet

•Direction artistique immersive mais techniquement cadrée.

•Parcours one-page clair du hero au formulaire.

•Base qualité plus poussée que sur beaucoup de démos visuelles.

•Très bon exemple de compromis entre effet, accessibilité et structure.

Testing & fiabilite

Le projet a été pensé comme une démo visuelle sérieuse : quality gates, tests, vérifications e2e et contrôle du poids de certains effets.

Tests unitaires Node sur la config et certaines règles de base.
Tests composants avec Vitest et Testing Library.
Tests e2e et scénario critique avec Playwright.
Mesure dédiée de la taille source/gzip des composants FX.

Architecture

Architecture App Router structurée par features, avec une couche shared claire et des effets visuels volontairement encadrés.

Points cles

Découpage app / features / shared / content / types.
FX optionnels et cloisonnés.
Sécurité HTTP configurée dans next.config.ts.
Couverture qualité inhabituelle pour une landing démo.

publicRoutes

/
/legal-notice
/privacy-policy
/terms

quality

TypeScript strict
ESLint
Prettier
Vitest
Playwright
Check all
FX size budget