# UMAMI — provenance et périmètre UMAMI est une application de démonstration originale créée pour Albert Development. La référence visuelle est la première vidéo fournie par l'utilisateur, SHA-256 `3150ece8f5a0d9790d97501862789fc8f39a66312a05378b3580d314043795bc`, représentant un catalogue de restauration japonaise et une animation de traction. Filigrane visible : TikTok / `@techgurudotph`, sans attribution certaine de la conception initiale. ## Éléments réinterprétés - Hiérarchie de catalogue, catégories en pilules, cartes de plats et action de favori. - Rafraîchissement expressif : la traction montrée dans la référence est réinterprétée par le mouvement du bol, des feuilles et des cartes. Aucun élément du film n'est incorporé à la scène. - Refonte du 8 novembre 2026 : navigation flottante en verre, dock tactile mobile, surfaces céramiques, grande composition culinaire ivoire, chocolat et corail. Tous les textes sont en français. Le code HTML/CSS/JavaScript, les illustrations vectorielles de repli, les icônes et les données de cette adaptation sont originaux. Aucun pixel, extrait vidéo, modèle 3D, son ou code de la référence n'est distribué avec la démonstration. Les captures et la vidéo fournie sont conservées uniquement dans le dossier interne Neuil Software, avec leur filigrane. ## Illustrations culinaires originales Les six illustrations photoréalistes sont générées avec OpenAI imagegen pour cette démonstration ; elles ne sont pas des photographies de plats réellement commercialisés. Les recettes restent fictives. La provenance de génération et de préparation est détaillée dans `assets/provenance.json`. - `assets/ramen-signature-v2.webp` : bol céramique noire, miso, œuf mariné, pak-choï et shiitakés. - `assets/ramen-vegetal-v2.webp` : ramen du jardin. - `assets/makis-v2.webp` : makis au saumon et à l'avocat. - `assets/gyozas-v2.webp` : gyozas dorés. - `assets/edamame-v2.webp` : edamames, sel et citron vert. - `assets/matcha-v2.webp` : matcha au lait d'avoine. Les WebP sont locaux, transparents et réutilisés par un mapping unique dans le héros, le catalogue, les fiches produit et le panier. Si une image échoue à charger, une illustration SVG originale prend sa place. La vapeur et les feuilles sont réalisées en CSS. Les animations s'arrêtent avec la préférence système de réduction des mouvements. Les sources PNG sont archivées dans `output/app-redesign-v2/generated-food/` ; la sauvegarde de la version antérieure se trouve dans `output/app-redesign-v2/backups/umami/original/`. ## Mouvement natif V3 La scène culinaire est construite localement dans `assets/culinary-scene.js` avec Three.js. Le plat reste l’illustration photoréaliste générée pour cette démonstration, appliquée à un plan transparent ; ce n’est pas une reconstruction volumétrique des nouilles ou du bol. Le plateau ambré tourné, son rebord de verre, les baguettes vernies, les feuilles courbes avec nervure et les graines de sésame sont des géométries 3D originales, éclairées par un environnement de studio procédural. Aucun modèle 3D ou HDRI externe n’est chargé. La scène lévite, suit légèrement le pointeur et accepte un glissement horizontal. « Un tour de saveurs » déclenche une impulsion chorégraphiée réelle dans l’application. La scène suspend ses images hors champ ou dans un onglet masqué ; le mode de mouvement réduit conserve une composition statique. Une photo et les ornements CSS restent visibles sans WebGL ou en cas de perte du contexte. `assets/interface-motion.js` anime le reflet de navigation, l’indicateur actif glissant, la perspective des cartes et le changement de portion. Les commandes gardent leurs comportements, leur focus et leurs libellés accessibles. Three.js est copié depuis la dépendance locale du projet : `assets/vendor/three.module.js`, `assets/vendor/three.core.js`, licence MIT `assets/vendor/LICENSE`. Les modules ne font appel à aucun CDN. Les styles, la géométrie, les paramètres de mouvement et les matériaux sont originaux. Repères d’intégration : `#culinary-stage[data-scene-state="ready"]`, `data-scene-settled="true"`, `window.umamiSceneReady`, événement `umami:scene-ready`. Le mode de rendu est exposé par `window.umamiSceneStatus` (`ready` ou `fallback`). `#hero-refresh` déclenche l’impulsion ; les autres fonctions restent sous `#products`, `#catalogue`, `.side-nav` et les attributs `data-action` existants. ## Décor volumétrique V6 Quatre compositions sont accessibles par `button[data-culinary-view]` : `table`, `ingredients`, `platter` et `portion`. Elles déplacent réellement les géométries et la caméra relative de la composition. Aux objets V3 s’ajoutent une planche extrudée biseautée, une coupelle et sa sauce, des champignons avec pied et chapeau, des rondelles de carotte et de cébette et des anneaux de présentation séparables. Tous ces objets sont procéduraux et originaux. Le mode plateau écarte le plan photographique pour rendre le volume du décor visible ; les autres modes conservent l’illustration du ramen sur un plan, sans prétendre en reconstruire la nourriture en 3D. La fiche du ramen signature réemploie le même canvas dans `.detail-picture`, puis le restitue au héros à sa fermeture. La portion généreuse agrandit le plat et écarte les anneaux. Les autres fiches gardent leurs propres images. Les états sont lisibles avec `window.umami3D.getState()` ; `show(mode)` et `setPortion(1|2)` sont disponibles pour inspection. L’interface normale fonctionne avec les boutons, les radios de portion et les commandes de panier. Le rendu est plafonné à 40 images/s, suspendu hors champ et dans les onglets masqués. Le mouvement réduit applique immédiatement les compositions sans interpolation. Un seul renderer est créé. Le repli photographique est masqué lorsque WebGL est prêt, ce qui évite une superposition du même plat. Contrôle effectué à 1920×1080 et 390×844 : quatre compositions, fiche/portion/panier, retour du canvas, mouvement réduit, absence de débordement et console sans erreur. ## Parcours interactifs Recherche, filtres, favoris, fiches produit, deux tailles sur les plats concernés, panier avec quantités et simulation locale de commande. Ces fonctionnalités sont des choix de reconstruction. Le montage Applications V6 présente les filtres, favoris, fiche produit, choix de portion, panier et simulation de commande. Les favoris et le panier sont enregistrés localement lorsque le navigateur l'autorise. Un stockage absent ou corrompu ne bloque pas la démo. Aucun appel API, suivi, paiement, commande, compte utilisateur ou envoi de données. Prix, notes, adresse et produits sont fictifs. La confirmation indique explicitement qu'aucune commande n'a été transmise. ## Typographie et dépendances Police Inter déjà distribuée par le projet : `/fonts/soda/inter-latin.woff2`, licence SIL OFL sous `/fonts/soda/Inter-OFL.txt`. Repli système sans cette police. Three.js est désormais embarqué localement sous licence MIT pour la scène V3 ; aucune requête vers un fournisseur externe. Le mot-symbole UMAMI est l'identité fictive du concept. La marque officielle Albert Development est gérée par la page d'intégration ; le crédit présent ici est du texte. ## V9 — plateau glTF importé Sushi set, Innerscene, CC0 1.0. Source primaire : https://www.innerscene.com/tools/library/3d-parts/sushi-set-9f1a4021 . Géométrie et textures originales conservées ; éclairage, caméra, regroupement des 76 maillages et animation de décomposition propres à UMAMI. Aucun plan photo ne sert de modèle 3D dans cette scène. URL, taille et SHA256 : assets/models/provenance-v9.json. Le plateau de démonstration présente 4 makis et2 nigiris. ## V10 — Sushi Platter, scan photogrammétrique Modèle original AR Code, licence CC0, issu du catalogue officiel de scans : https://ar-code.com/blog/download-3d-scanning-photogrammetric-3d-models-in-glb-and-usdz Téléchargement officiel : https://ar-code.com/files/AR-Code-1695549728.glb Le GLB original est conservé sans modification : `assets/models/sushi-photogrammetry.glb` ; SHA-256 `cc04131b34bde0c0425d8b807da652295356fc4036d44f79a103e0e1193ee8eb`. Géométrie réelle de25 000 triangles, cartes couleur/normales/occlusion2048×2048 natives. Aucune texture générée ni agrandie en4K. Les caméras et l’éclairage sont réglés dans l’application ; le mouvement360° conserve l’assemblage réel du scan. Le visuel `assets/sushi-scan.webp` est rendu depuis ce même modèle pour les fiches et le panier. Ancien modèle stylisé archivé, non chargé.