Étude de cas : un branding et un site à forte motion pour une startup IA
Quand une startup IA vend la vitesse, son site ne peut pas paraître lent — et il ne peut pas ressembler à tous les autres. Utsubo s'est associé à Vectr, une plateforme de staffing de précision pilotée par l'IA pour les infrastructures critiques (nucléaire, turbines à gaz, data centers, semi-conducteurs), afin de traduire une identité de marque stratégique en un site marketing rapide et cinématographique. Nous avons pris en charge le design et le développement de bout en bout : un hero 3D temps réel en Three.js WebGPU, des transitions de page fluides façon application, et un pipeline de production qui réduit le poids 3D de 80 à 95 %. Le site a été lancé le 21 mai 2026 et a remporté le FWA of the Day le 2 juin 2026.
Pour qui ? Fondateurs et responsables de marque de startups IA qui commandent un branding premium, un nouveau site marketing, ou une expérience à forte motion construite sur Three.js / WebGPU.
Points clés
- Vectr est une plateforme B2B de staffing IA pour les secteurs à fort enjeu ; la marque devait paraître sérieuse comme une entreprise établie et visiblement à la pointe à la fois.
- Le système de marque repose sur une seule tension visuelle — direction (une flèche) et ignition (une étincelle) — déployée en une histoire de produit interactive.
- La page d'accueil est un parcours guidé : une ligne continue suit le chemin du client, de l'appel urgent jusqu'au déploiement sur site, transformant un flux opérationnel invisible en récit visuel.
- La pièce maîtresse est un hero 3D temps réel en Three.js WebGPU avec repli WebGL, rendu hors du thread principal dans un Web Worker via OffscreenCanvas pour garder le défilement et les transitions fluides.
- Un pipeline d'assets sur mesure (Blender → GLB, redimensionnement des textures, WebP, instanciation, compression Draco) a réduit le poids 3D d'environ 80 à 95 %.
- Résultat : Lighthouse 94 Performance / 98 Accessibilité / 100 Bonnes pratiques / 100 SEO, et le FWA of the Day.
1. Le défi
Les pannes critiques n'attendent pas. Quand une centrale, un site ou un projet d'infrastructure manque de personnel, le coût est immédiat : équipes à l'arrêt, calendriers retardés, dépassements de budget et risque opérationnel.
Le produit de Vectr reformule le staffing comme un problème de logistique et d'intelligence. Plutôt que de s'appuyer sur des réseaux manuels, des chaînes d'e-mails ou des bases de données obsolètes, l'entreprise utilise l'IA et le machine learning pour identifier, vérifier et mobiliser des équipes qualifiées plus vite.
Le site devait communiquer ce changement clairement. Il ne pouvait pas ressembler à un site de staffing générique. Il devait paraître assez sérieux pour des acheteurs industriels à fort enjeu, tout en portant l'énergie d'une startup IA qui défie les méthodes héritées.
Le défi central : rendre la vitesse, la précision et la confiance tangibles. Pour les fondateurs qui se demandent s'il faut refondre ou relancer un SaaS IA, c'est la question centrale : la marque et la réalisation doivent prouver le produit avant qu'on ne lise une seule fonctionnalité.
2. Le système de marque
L'identité de marque part d'une tension visuelle simple : direction et ignition.
La flèche donne au système sa clarté, sa trajectoire et son mouvement vers l'avant. L'étincelle ajoute l'activation, l'énergie et l'intention. Ensemble, elles forment un signe qui paraît opérationnel plutôt que décoratif — un système conçu pour avancer.
Cette logique a façonné l'expérience numérique. L'univers de Vectr n'est ni doux, ni vague, ni trop léché. Il est structuré, direct et construit autour de l'action.
Le système visuel équilibre la retenue et les moments d'intensité. Des arrière-plans profonds et silencieux créent un ton industriel sérieux, tandis que l'accent bleu électrique donne à l'interface une touche plus technique et plus startup. Le résultat est une marque capable de parler de fiabilité de niveau nucléaire sans perdre le sentiment que Vectr construit quelque chose de nouveau.
La typographie suit la même logique : fonctionnelle, géométrique et très lisible, avec une assurance mécanique adaptée au sujet.
3. Raconter le parcours du staffing
La page d'accueil a été conçue comme un parcours guidé à travers le processus de mobilisation de Vectr.
Plutôt que de présenter la plateforme comme une liste statique de fonctionnalités, la landing page visualise le parcours du client, du besoin urgent jusqu'à l'arrivée sur site. Une ligne continue traverse une séquence de scènes, reliant chaque étape opérationnelle : activation, présélection, sélection, mise en correspondance et déploiement.
Cette ligne est devenue le dispositif narratif. Elle représente le chemin entre l'appel d'un client et l'arrivée de la bonne personne au bon endroit. L'utilisateur suit le processus visuellement, parcourant la logique du service de Vectr avant même que le texte ne l'explique en détail.
C'était d'autant plus important que Vectr opère dans des secteurs sensibles et à fort enjeu. Le staffing ne se résume pas à la disponibilité. Chaque candidat doit être filtré, vérifié, contrôlé au regard des exigences de conformité, mis en correspondance avec le calendrier et préparé pour l'arrivée.
Le site transforme ce flux opérationnel invisible en une histoire claire et visuelle — la même approche que nous adoptons pour les sites de storytelling immersif, où la structure et le mouvement portent du sens, et pas seulement de la décoration.
4. Une expérience continue, façon application
Le site devait paraître rapide, premium et continu.
Nous avons construit la navigation autour de transitions fluides façon application plutôt que de changements de page brutaux. Quand l'utilisateur passe d'une section à l'autre, la page suivante entre comme une surface visuelle superposée, donnant le sentiment que l'expérience avance plutôt qu'elle ne redémarre.
Ce système de transition soutient directement l'idée de marque. Le site est toujours en mouvement, avec intention : pas de coupures brutales, pas de rythme cassé, pas de sensation d'attente.
L'objectif n'était pas l'animation décorative. C'était la vitesse perçue. Chaque interaction devait faire ressentir Vectr comme une entreprise bâtie autour de la vélocité opérationnelle.
5. Le hero 3D temps réel
La pièce maîtresse du site est une scène hero 3D temps réel construite en Three.js WebGPU, avec repli WebGL pour une compatibilité plus large.
Le hero n'est pas qu'un simple accroche visuelle. Il porte le même message que la marque : Vectr est une entreprise techniquement avancée qui résout un vieux problème opérationnel. L'interface devait le prouver avant que l'utilisateur ne lise un seul bloc de fonctionnalités.
Pour protéger les performances, la scène est rendue hors du thread principal dans un Web Worker via un OffscreenCanvas. Cela éloigne le travail de rendu le plus lourd de l'interface, ce qui permet au défilement, aux transitions de page et aux interactions de rester fluides pendant que la scène 3D tourne.
Le pipeline de production a représenté une grande partie du travail. Les scènes ont été créées dans Blender, exportées en GLB, puis optimisées via un processus d'assets sur mesure : redimensionnement des textures, conversion WebP, instanciation et compression Draco.
Cela a réduit le poids 3D d'environ 80 à 95 %, permettant au site d'offrir une expérience visuelle riche sans sacrifier la vitesse de chargement. (Pour le contexte technique de ce mode de rendu, voir notre guide de migration WebGPU et Three.js.)
6. Direction technique
La contrainte technique centrale était simple : le rendre ambitieux sans le rendre lourd. Cela signifiait équilibrer qualité visuelle, temps de chargement, compatibilité navigateur et fluidité des interactions sur tous les appareils.
Décisions clés :
- Astro et Vite pour une base front-end rapide et moderne.
- Three.js WebGPU avec repli WebGL.
- Détection des capacités GPU avant le chargement des modes de rendu avancés.
- Rendu 3D hors thread principal avec OffscreenCanvas.
- Livraison GLB optimisée avec textures compressées et géométrie Draco.
- Plusieurs variantes d'assets 3D pour les contextes desktop et mobile.
- Transitions de page Taxi.js pour une navigation plus fluide et premium.
- Défilement fluide Lenis sur desktop, comportement de défilement natif préservé sur mobile.
- Un design system SCSS piloté par tokens pour une cohérence d'espacement, de typographie, de couleurs et de motion.
- Persistance LocalStorage de la progression des formulaires.
- Implémentation SEO et données structurées pour la découvrabilité.
- Approche privacy-first sans analytics, cookies ni traceurs tiers par défaut.
7. Fonctionnalités produit
Au-delà de l'expérience marketing, le site fonctionne comme une plateforme d'acquisition pour les deux côtés de la marketplace de Vectr.
Pour les candidats, le parcours Postuler utilise une modale en cinq étapes avec validation, téléversement de CV et persistance LocalStorage. Si un candidat ferme l'onglet avant de terminer, sa progression est conservée pour reprendre sans tout recommencer.
Pour les clients, le formulaire Demander une équipe crée un chemin direct pour initier une demande de staffing. L'interaction est volontairement simple, car le contexte est urgent : les pannes critiques n'attendent pas.
L'architecture de contenu est aussi prête pour la localisation. L'anglais a été lancé en premier, mais les textes du site sont centralisés pour que les langues futures relèvent d'une tâche de contenu et non d'une refonte structurelle.
8. Performance, SEO et confidentialité
La performance a été traitée comme une part de l'expérience de marque. Une entreprise qui vend la vitesse ne peut pas avoir un site lent.
La page d'accueil a atteint 94 Performance, 98 Accessibilité, 100 Bonnes pratiques et 100 SEO sous Lighthouse.
Le site inclut aussi des données structurées, le support des sitemaps, des métadonnées sociales et des résumés d'entreprise lisibles par l'IA via llm.txt et llm_full.txt.
La confidentialité a été traitée comme une exigence produit dès le premier jour. Le site évite par défaut les analytics, cookies et traceurs publicitaires. Le stockage navigateur n'est utilisé que là où il améliore l'expérience, comme la sauvegarde locale de la progression d'un formulaire avant envoi.
9. Résultat
Vectr a été lancé comme une plateforme B2B rapide et visuellement distinctive pour une startup IA de staffing opérant dans des environnements industriels à fort enjeu. Le projet a remporté le FWA of the Day le 2 juin 2026.
Du système de marque au parcours de la page d'accueil, du hero 3D aux transitions de page, l'expérience renforce une idée centrale : Vectr transforme le staffing critique en un processus d'ingénierie, accéléré.
Le site final tient deux registres à la fois : sérieux comme une entreprise établie pour les acheteurs du nucléaire, des semi-conducteurs, du gaz et des data centers ; visiblement à la frontière pour une entreprise dont l'avantage vient de l'intelligence, de l'automatisation et de la vitesse.
Crédits — Branding : Michele Angeloro. Design et développement : Utsubo. Client : Vectr, Inc. Site en ligne : vectrfl.com.
10. À propos d'Utsubo
Utsubo est un studio créatif interactif, fondé en 2021. Nous travaillons avec des startups et des marques sur des expériences qui vivent entre le navigateur et l'espace physique :
- Systèmes de marque et identité visuelle pour des produits techniques
- Sites marketing premium à forte motion
- Expériences temps réel Web3D et WebGPU
- Installations interactives
Nos projets ont été récompensés par des prix internationaux dont Awwwards, FWA et The Webby Awards. Si vous comparez des studios, notre comparatif des meilleures agences Three.js peut vous aider.
11. Discutons
Vous construisez le branding d'une startup IA ou un site marketing à forte motion ? Nous travaillons avec des équipes sur des systèmes de marque, des sites marketing interactifs et des expériences 3D immersives sur le web.
Si vous explorez un partenariat, parlons de votre projet :
- Ce que vous construisez et les contraintes avec lesquelles vous composez
- Quelle approche technique a du sens pour vos objectifs (et si la 3D est même le bon choix)
- Si nous sommes le bon partenaire pour vous aider à exécuter
Vous préférez l'e-mail ? Écrivez-nous : contact@utsubo.co
12. Foire aux questions (FAQ)
Q. Combien coûte un projet comme Vectr, et combien de temps prend-il ?
Cela dépend du périmètre — système de marque, site marketing, 3D sur mesure et nombre de pages font tous bouger le chiffre. Le moyen le plus rapide d'obtenir une estimation réelle est un court échange sur vos objectifs et votre calendrier.
Q. Gérez-vous le branding, le site, ou les deux ?
Les deux. Sur Vectr, le système de marque a été dirigé par Michele Angeloro et Utsubo a pris en charge le design et le développement du site de bout en bout. Nous pouvons partir d'une marque existante ou construire l'identité et le site ensemble.
Q. Un hero 3D lourd va-t-il nuire à mes Core Web Vitals ?
Pas s'il est correctement conçu. La scène 3D de Vectr est rendue hors du thread principal via OffscreenCanvas, utilise la détection GPU et un repli WebGL, et livre des assets compressés en Draco — et la page d'accueil a tout de même obtenu 94 en Performance Lighthouse.
Q. La 3D fonctionne-t-elle sur mobile et sur les anciens navigateurs ?
Oui. Le site détecte les capacités GPU avant de charger les modes de rendu avancés, bascule de WebGPU vers WebGL si nécessaire, et sert des variantes d'assets 3D distinctes pour le desktop et le mobile.
Q. Pouvez-vous partir de notre marque existante, ou créer de zéro ?
Les deux. Le contenu et le design system sont pilotés par tokens et modulaires, ce qui nous permet d'étendre une identité existante ou d'en développer une nouvelle. L'objectif : une marque et une réalisation qui prouvent le produit.
Q. Construisez-vous des sites multilingues ?
Oui. Vectr a été lancé en anglais avec une architecture prête pour la localisation : les textes sont centralisés, donc ajouter une langue est une tâche de contenu, pas une refonte structurelle. Nous collaborons en anglais, japonais et français.
Technology-First Creative Studio
