GIVRÉ
Site vitrine premium
Une maison de haute parfumerie parisienne, présentée par un flacon de verre en 3D qui se givre puis se dissout en neige au fil de la lecture.
Fiche technique
- Type
- Site vitrine multipage
- Périmètre
- Direction artistique, 3D temps réel, intégration, SEO, performance
- Stack
- Vite · Three.js · GLSL · JavaScript ES modules
- Pages
- Accueil, Collections, Actualités, Galerie, Contact, 404, Mentions légales
01 — Contexte
Un site de marque de luxe doit donner envie avant d'informer. Le produit est un flacon : il fallait le faire exister à l'écran comme un objet, pas comme une photo.
02 — Défi
Une scène 3D riche (verre, givre, particules) pèse lourd. Elle ne devait ni ralentir le chargement, ni pénaliser le mobile, ni gêner la lecture du texte.
03 — Réponse
Un flacon modélisé en code et rendu par des shaders sur mesure. Three.js n'est téléchargé que sur les écrans qui peuvent l'afficher ; ailleurs le site reste une page éditoriale légère.
Ce qui a été construit
Un flacon de verre calculé en temps réel
Le flacon est une géométrie de révolution déformée en « squircle ». Son shader combine effet Fresnel, aberration chromatique et un éclairage d'environnement procédural. Après le chargement, une couche de givre à 4 octaves de bruit se dépose sur le verre et la caméra avance vers l'objet.
Le scroll dissout le flacon
Jusqu'à 9 000 particules sont tirées des sommets du flacon. À mesure qu'on lit la page, le verre s'efface et les particules montent en nuage de givre, avec une interpolation lente pour que le mouvement reste fluide.
Une atmosphère qui suit la lecture
Au milieu de la page, il ne reste qu'un nuage lumineux derrière le manifeste. La poussière de glace s'intensifie avec la progression : l'ambiance change sans jamais couvrir le texte.
Manifeste et chiffres animés
Le titre se découpe mot à mot en conservant les retours à la ligne éditoriaux. Les chiffres clés comptent jusqu'à leur valeur quand la section entre à l'écran.
Collections au survol
Chaque fragrance a sa carte : visuel, famille olfactive, usage. Un curseur sur mesure avec inertie réagit aux éléments cliquables.
Français et anglais sans rechargement
Le sélecteur FR / EN traduit toute la page à la volée, placeholders de formulaire compris.
Galerie filtrable
Filtres Atelier, Flacons, Boutique, Événements, sans rechargement.
Visionneuse accessible
La visionneuse se pilote au clavier, garde le focus à l'intérieur et le rend à la vignette d'origine à la fermeture.
Demande de consultation
Validation en direct des champs requis et du format e-mail, message d'erreur effacé dès que l'utilisateur corrige, confirmation animée.
Même une 404 soignée
« Il semblerait que vous vous soyez perdu dans le givre. » La page d'erreur garde le ton de la marque.
Sur mobile et sur les processeurs modestes, la scène 3D n'est jamais chargée : le site reste rapide et lisible.
Sous le capot
- Three.js isolé dans un chunk Vite à part (~123 Ko gzip), importé dynamiquement derrière une garde : jamais téléchargé sur mobile
- Shaders GLSL écrits à la main : verre Fresnel, aberration chromatique, IBL procédural, givre 4 octaves
- Rendu mis en pause quand l'onglet est masqué, respect de prefers-reduced-motion
- Polices variables auto-hébergées (Cormorant Garamond, Inter) : aucune requête vers Google
- Images WebP, préchargement animé sur le GPU, transitions entre pages, retour arrière géré (bfcache)
- Build multipage Vite avec 7 entrées HTML, sitemap et robots.txt
Un projet similaire à concevoir ?
Décrivez-nous votre contrainte technique. Nous vous répondons sous 48h avec une approche concrète.