CreaWrap
- Année
- 2026
- Rôle
- Refonte · 3D temps réel · Back-office
- Stack
- Next.js 16, TypeScript, Tailwind 4, React Three Fiber, Three.js, Framer Motion, Lenis, Drizzle ORM, Turso, Better-Auth, Vercel Blob
- Liens
- Voir le siteDépôt privé
Proposition de nouveau site pour CreaWrap, atelier genevois de covering, de vitres teintées et de dé-chromage, pensée pour mettre en valeur son savoir-faire. Direction « Noir carrosserie » : des noirs superposés éclairés comme un studio, un reflet qui balaie les titres, le dégradé bleu → rouge du logo, et un thème clair pour tout le site. Configurateur 3D (React Three Fiber) : voiture ou moto en studio noir ou blanc, 21 teintes plus une teinte sur mesure, six finitions (mat, satiné, brillant, chrome, caméléon irisé, carbone), teinte des vitres et Black Pack ; le choix pré-remplit la demande de devis WhatsApp. Avant / après à faire glisser sur de vraies réalisations. Espace atelier : un seul compte, tentatives limitées, ajout de photos depuis l'iPhone (HEIC converti dans le navigateur), noms, catégories, ordre propre à chaque page, remplacement et suppression ; les pages statiques se régénèrent à chaque modification.
Le contexte
CreaWrap est un atelier genevois de covering, de vitres teintées et de dé-chromage. L'objectif : un site à la hauteur de son savoir-faire, dans un univers sombre et élégant, où chaque client peut se projeter avant même de venir à l'atelier.
Mon rôle
Seul : direction artistique, intégration 3D, espace de gestion et mise en ligne, en proposition pour l'atelier.
Défis techniques
- 01
Essayer avant de poser
Un configurateur 3D permet de tester teintes et finitions (mat, satiné, chrome, caméléon irisé, carbone) sur une voiture ou une moto. Les modèles sont compressés, le rendu se met en pause hors écran et une photo prend le relais sans WebGL.
- 02
Des photos d'iPhone acceptées partout
L'atelier photographie ses réalisations au téléphone : les photos sont décodées et réduites dans le navigateur, et un convertisseur HEIC n'est chargé que lorsque le navigateur ne sait pas les lire.
- 03
Une galerie qui reste à jour
Les pages restent statiques et rapides, et sont régénérées à chaque modification ; chaque page a son propre ordre de photos, choisi par l'atelier.
Extrait de code
async function decode(file: File) { try { return await loadImage(file) } catch { if (!(await isHeicFile(file))) throw new Error("Format illisible : envoyez une photo JPEG, PNG, WebP ou HEIC.") } try { const { heicTo } = await import("heic-to") return await loadImage(await heicTo({ blob: file, type: "image/jpeg", quality: 0.92 })) } catch { throw new Error("Photo HEIC illisible : sur iPhone, envoyez-la depuis l'iPhone ou exportez-la en JPEG.") }}Résultat
Une proposition complète en ligne, prête à devenir le site officiel, avec un espace atelier sécurisé où l'équipe ajoute, renomme, classe et remplace ses photos en toute autonomie.
