projets

Contexte

Un objet design se vend mal sur une seule photo. La lampe TENSIL, modélisée dans un projet Blender précédent, méritait une vraie page produit : la voir sous tous les angles, changer de coloris en direct, puis l’acheter.

J’ai donc conçu une boutique mono-produit, dans une direction artistique inspirée des éditeurs de luminaires. TENSIL est une marque fictive : aucun produit n’est vendu, aucun paiement n’est demandé.

Rôle

Projet réalisé en duo humain + IA :

• —moi : sujet, périmètre (un produit, quatre coloris, une vue 3D à 360°), direction artistique, validation de chaque étape ;
• —Claude (Claude Code) : code du site, scripts Blender d’export et de rendu, tests et documentation.

Outils

• —Site : Astro, TypeScript, CSS sans framework, polices auto-hébergées.
• —3D web : three.js (glTF, Meshopt, matériaux PBR), chargée seulement à la demande.
• —Assets : Blender scripté et glTF-Transform pour un GLB de 199 Ko à laque recolorable.
• —Tests : Vitest, Playwright et axe pour l’accessibilité.
• —Hébergement : Vercel, offre gratuite.

Résultat

Un parcours d’achat complet, en ligne sur tensil-store.vercel.app, pour 0 € de coût.

• —Parcours : coloris, panier, commande simulée et confirmation, avec erreurs et états vides gérés.
• —3D : vue à 360° en quatre coloris, à la souris, au toucher et au clavier ; la photo reste affichée si WebGL est absent.
• —Performance : Lighthouse mobile 99 / 100 / 100 / 100 sur la page produit, page initiale de 161 Kio hors 3D.
• —Accessibilité : 0 violation axe détectée, navigation clavier testée.
• —Qualité : 26 tests de bout en bout, sur desktop et mobile.