Five Senses
Un coffee bar de la Grand-Place de Mons mis en scène comme un film : vidéo, textures et carte à feuilleter.
- Client
- Five Senses
- Secteur
- Coffee bar & brunch
- Lieu
- Mons
- Année
- 2026
- Ce qu'on a fait
- Site webDirection artistiqueMotion design
Le contexte
Le point de départ
Five Senses est un coffee bar et brunch installé sur la Grand-Place de Mons depuis 2021, avec une identité déjà forte : le terracotta, le wordmark empilé et l'enseigne « More than a coffee bar ». L'enjeu : traduire cette ambiance chaleureuse en une landing aussi généreuse que la carte, qui tienne aussi bien sur téléphone que sur grand écran.
Notre approche
Ce qu'on a construit
Digital Storm a choisi une direction cinématique et immersive, construite à partir de la vraie identité du lieu. Le hero s'ouvre sur une vidéo qui fait écho à l'enseigne de la façade, avec le titre « More than a coffee bar. » posé au-dessus des verres. La page enchaîne ensuite un ticker incliné, un manifeste avec des photos glissées dans le titre, une galerie horizontale épinglée et une scène des cinq sens. Grain terracotta, grands numéros en contour, boutons magnétiques et chapitres numérotés donnent le rythme, le tout en HTML, CSS et JavaScript avec GSAP et ScrollTrigger.
En mouvement
Le site,
défilé en vrai.
Enregistré tel quel, sur ordinateur et sur téléphone.
Moments forts
Ce qu'on
retient.
Hero « More than a coffee bar. »
Une vidéo plein écran, déclinée en portrait sur mobile, fait écho à l'enseigne de la façade, tandis que le titre se révèle ligne par ligne au-dessus des verres.
Galerie horizontale épinglée
Au scroll, onze cartes défilent latéralement avec un compteur 01/11 et un mot fantôme « GALERIE » en parallaxe. Sur mobile, la galerie passe en swipe natif.
La carte en éventail
Les trois pages de la carte s'ouvrent en éventail 3D, puis se feuillettent comme un vrai livret dans une fenêtre dédiée.
Les cinq sens
Une image sticky en forme d'arche change d'accent couleur à chaque sens (terracotta, matcha, doré, açaí), avec une barre de progression.
Livrables
Ce qu'on
a livré.
Palette & typo
- Landing page one-page responsive
- Hero vidéo plein écran, en version paysage pour le desktop et portrait pour le mobile
- Galerie horizontale épinglée de 11 visuels avec compteur
- Carte présentée en éventail 3D, puis feuilletable en flipbook
- Section « cinq sens » avec image en arche et accent couleur par sens
- Bloc accès : horaires façon ticket de caisse et carte intégrée
- Mise en ligne et optimisation mobile (vidéo, chargement, zones tactiles)
Sur téléphone
Pensé pour
le pouce.
La majorité des visiteurs arrivent sur mobile. Chaque section est dessinée pour eux d'abord.
Votre projet