Maison Perrier
Un hommage concept au lancement de Maison Perrier : on pousse la porte de la Maison et on la traverse pièce par pièce, du plein jour à la nuit, porté par une tension narrative. Direction artistique, développement et motion, de A à Z, en solo.
- Client
- Projet concept
- Rôle
- Direction artistique, développement & motion
- Année
- 2026
Le contexte
Projet personnel — concept non affilié à Maison Perrier, sans but commercial ni volonté de récupérer l'image de la marque. L'intention est démonstrative : sur le vrai site, les canettes — pourtant superbes — sont peu mises en valeur. Ici, je les place au cœur d'une expérience scrollée qui fait entrer dans la Maison, pièce par pièce, du jour à la nuit. Je me suis inspiré de la mécanique de scroll de Ciao Energy (le site de Squeezie), transposée en une vraie narration spatiale plutôt qu'un carrousel. Seuls les visuels des canettes et le logo Maison Perrier sont des éléments existants récupérés : toute la Maison — façade, jardins, hall, vidéo d'entrée — a été recréée à l'IA, une réplique crédible et jamais une image réelle de la campagne. Objectif : montrer mon niveau en direction artistique, en motion et en développement.
Le défi
Transposer une mécanique de scroll (le produit et sa couleur qui changent à mesure qu'on descend) en une vraie narration spatiale — entrer dans une maison et la parcourir — plutôt qu'un simple carrousel de canettes. Le tout au niveau Awwwards, cinématographique et fluide à 60fps.
La réponse
Cinq pièces plein écran pinnées au scroll (portail, jardin Forever, salon Magnetic, terrasse Chic, nuit Energize), chacune inondée de sa couleur signature. Les transitions se font en bulles Perrier dessinées au Canvas, sur des timelines scrubbées en GSAP + Lenis. Tous les visuels ont été régénérés à l'IA (Google Flow, Gemini) et la vidéo d'entrée réalisée avec Figma Weave — seuls les canettes et le logo existants ont été récupérés.
Le process
Références & narration
Point de départ : la mécanique de scroll de Ciao Energy (le site de Squeezie), que je transpose en narration spatiale. J'écris le parcours : cinq pièces, une progression du jour vers la nuit et une tension qui monte à chaque scène.
Direction artistique
Une couleur signature par pièce (Forever, Magnetic, Chic, Energize) qui inonde toute l'UI, et un découpage précis des plans avant production.
Génération des visuels (IA)
La Maison et ses jardins, le hall : tout est recréé à l'IA (Google Flow, Gemini), et la vidéo d'entrée réalisée avec Figma Weave. Je ne récupère que les canettes et le logo, existants — le reste est dirigé et créé par mes soins.
Dev & motion
Intégration en Next.js : sections pinnées, timelines scrubbées au scroll (GSAP + ScrollTrigger + Lenis), bulles d'effervescence au Canvas pour les transitions, le tout à 60fps.
Direction artistique & choix
Entrer dans la Maison, pas la survoler
Le parti pris fort : transformer un site de marque en lieu qu'on traverse. On pousse la porte, on avance de pièce en pièce, du jour à la nuit. Une narration spatiale plutôt qu'un carrousel de produits.
Une couleur par pièce
Chaque pièce a sa couleur signature qui inonde toute l'interface. C'est ce qui donne le sentiment de vraiment changer d'ambiance à chaque scène, et qui rythme la descente.
Des visuels dirigés et générés par IA
Seuls les canettes et le logo Maison Perrier sont récupérés (éléments existants). Toute la Maison — façade, jardins, hall, vidéo d'entrée — est recréée à l'IA : une réplique crédible, jamais une image réelle de la campagne. Je pilote l'outil comme un directeur artistique pilote un studio : intention, cadrage, cohérence.
Concevoir, animer ET coder
Direction artistique, motion et développement par la même personne. Les animations sont pensées dès la DA et rejouées fidèlement au code, à 60fps, sans perte entre l'idée et le rendu.
Ce que j'ai livré
- Concept narratif & découpage en 5 pièces
- Direction artistique (jour → nuit, une couleur par pièce)
- Génération des visuels par IA (Google Flow, Gemini)
- Vidéo d'entrée réalisée avec Figma Weave
- Développement Next.js + Lenis + GSAP ScrollTrigger
- Transitions à bulles (Canvas) & timelines scrubbées 60fps
- Mise en ligne de la démo
Le site en images
Résultats
Un projet similaire en tête ?
Projet suivant
YoungChild