Toutes les études de cas

Étude de cas, design et interaction

The Gilded Hour

La carte d'un bar à cocktails Art déco imaginaire : on choisit un cocktail, et il se verse couche par couche dans la coupe.

Cadre
Expérience, bar fictif
Mon rôle
Design et développement
Format
Carte interactive
Année
2026
Ouvrir le projet

Le contexte

The Gilded Hour est un bar clandestin imaginaire, ouvert « depuis 1926 » derrière une porte verte. Sa carte compte six cocktails, chacun avec sa petite histoire.

Le problème

Une carte de cocktails se lit comme une liste d'ingrédients. Je voulais qu'on voie la boisson se composer, pour comprendre ce qu'on commande.

Ce que j'ai fait

  1. Choisir un cocktail le verse dans une coupe dessinée en SVG : chaque ingrédient coule à son tour et forme une couche proportionnelle à sa dose. La surface ondule, puis la garniture tombe dans le verre.

  2. Le bouton « Stir » mélange les couches : leurs couleurs se fondent en une seule, calculée d'après la dose de chaque ingrédient.

  3. Tout le décor Art déco est fait en code : un soleil de 72 rayons généré en SVG, des titres dorés et des boutons taillés en CSS.

HTMLCSSJavaScriptSVG

Le résultat

6Cocktails, chacun versé couche par couche
72Rayons du soleil Art déco, générés en SVG
18 KoPoids de la page, sans les polices

Un projet similaire ?
Parlons-en.

Vous aimeriez un projet dans cet esprit ? Décrivez-le-moi en quelques lignes : je réponds sous 24 heures avec mes questions et une première estimation.