Toutes les études de cas

Étude de cas, e-commerce

Lueur

La boutique en ligne d'un atelier de bougies fictif à Grasse. On souffle la flamme d'un clic, et chaque parfum recolore toute la page.

Cadre
Projet concept, boutique fictive
Mon rôle
Design et développement
Format
Boutique en ligne
Année
2026
Ouvrir le projet

Le contexte

Lueur est un atelier imaginaire de bougies coulées à la main à Grasse, avec six parfums composés avec un nez grassois. Sa boutique devait donner envie d'une bougie qu'on ne peut ni sentir ni voir brûler.

Le problème

Une bougie se vend par l'ambiance qu'elle crée : sa lumière, son parfum, le temps qu'elle dure. Une grille de photos produit ne transmet rien de tout ça.

Ce que j'ai fait

  1. J'ai construit une grande bougie en CSS au centre de la page, avec une flamme SVG qui vacille et des braises animées en canvas. Un clic sur la flamme la souffle : la fumée monte et la pièce s'assombrit.

  2. Quatre « humeurs » (Ambre chaud, Néroli, Rose cendrée, Tabac nuit) changent la couleur de la flamme et de toute la page, grâce à des variables CSS.

  3. Les six bougies de la collection sont dessinées en CSS, sans photo, et s'allument au survol. Le panier latéral indique ce qu'il reste avant la livraison offerte, dès 90 €.

HTMLCSSJavaScriptCanvasSVG

Le résultat

0Photo : les bougies sont en CSS, la flamme en SVG
4Humeurs qui recolorent toute la page
30 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.