Veil
Une amie en école devait livrer la maquette Figma complète d'une marque de parfumerie inventée pour son exercice : charte, moodboard, design. Je l'ai aidée en prenant le relais sur le code. C'est le projet école où j'ai intégré la charte la plus éloignée de mes habitudes : typos serif fines, ambiance lente, animations délicates.
Le contexte
Une amie en école devait livrer un exercice complet de marque inventée : charte, moodboard, maquette Figma. Elle a fait tout le design pour Veil, une maison de parfumerie fictive ("Plus qu'un parfum. Une empreinte."). Je suis intervenu sur le code, à partir de sa maquette. Marque inventée, exercice scolaire, mais l'intégration est bien réelle.
Le défi : intégrer un style très éloigné de mes habitudes
Une parfumerie haut de gamme, ça ne se code pas comme une landing tech. Il faut accepter la lenteur, les blancs généreux, les fontes serif délicates (Arboreto, Italianno), les transitions douces. J'avais l'habitude des sites plus directs. Ici l'enjeu c'était la fidélité au Figma. Chaque espacement, chaque transition de 250ms, chaque overlay devait servir le sentiment global, pas la performance perçue.
Les détails techniques
Sept sections : hero vidéo, citation centrée, collection, scroller horizontal d'ambiances, best seller, grille de familles olfactives au hover, et une timeline interactive pour "Le Geste" qui détaille les 4 étapes de fabrication (composition → macération → mise en flacon → révélation). Chaque dot de la timeline change l'image de fond et le texte du panneau central avec un crossfade. Animations reveal au scroll via IntersectionObserver, footer en accordéon sous 768px. Pas déployé : c'était un exercice fictif, je n'ai gardé que le code et les captures.