Une refonte immersive et ultra-performante pour sublimer l'artisanat du ramonage.
ApexToiture
Comprendre le défi
L'ancien site web ne reflétait pas la qualité de leurs prestations et manquait cruellement d'attrait visuel. Le référencement naturel (SEO) local était insuffisant. L'expérience de la prise de devis sur mobile pénalisait fortement la conversion.
Le Client
Apex Toiture est une entreprise experte en ramonage et travaux de toiture située dans l'Oise. De véritables artisans passionnés par la qualité de leur travail et la sécurité de leurs clients.
Objectifs
Honorer leur savoir-faire unique à travers une plateforme digitale premium, moderne et rassurante, tout en facilitant drastiquement la prise de contact.
Problème
L'ancien site web ne reflétait pas la qualité de leurs prestations et manquait cruellement d'attrait visuel. Le référencement naturel (SEO) local était insuffisant. L'expérience de la prise de devis sur mobile pénalisait fortement la conversion.
Contraintes
Proposer une scène 3D riche sans sacrifier la batterie ni la fluidité des téléphones de milieu de gamme. Synchroniser la 3D avec le scroll fluide sans conflit.
Notre Solution
Conception from scratch d'une architecture Feature-First séparant nettement l'interface utilisateur DOM et une mise en scène 3D immersive (R3F), servie par un backend Node.js MVC robuste.
Capacités Déployées
Front-end
3D & Motion
State Management
Back-end
Découvrez les modules spécifiques
Poursuivez la lecture ci-dessous pour l'exploration détaillée des fonctionnalités asymétriques et de l'architecture spécifique au projet.
"Le système de particules de suie utilise un buffer d'instancing permettant d'afficher 3000 éléments à 60 FPS sur mobile."
Formulaire Intelligent
Refonte totale du processus B2B avec des champs flottants asynchrones. L'objectif était d'optimiser le taux de réponse sans paraître impersonnel.
Orchestration R3F Extreme
Synchronisation de la 3D avec le scroll sans Layout Thrashing. Le système de particules utilise InstancedMesh et des shaders GLSL. La boucle de rendu R3F (useFrame) communique avec GSAP via des MutableRefs et Zustand pour bloquer le framerate à 60fps.
// Scroll Sync Bypass React State
const scrollState = useScrollStore(); // Zustand ephemeral store
const materialRef = useRef();
useFrame((state, delta) => {
// Read directly from native loop
const scroll = scrollState.get();
materialRef.current.uTime += delta * scroll.velocity;
camera.position.z = THREE.MathUtils.lerp(camera.position.z, scroll.target, 0.1);
});Hardware-Aware SEO & Overlay
Nous avons isolé la scène WebGL en arrière-plan d'une surcouche sémantique HTML5 (React Router v7 Loaders). Pour les mobiles, un clamp dynamique du DPR et la compression Draco préservent les FPS tout en gardant des balises JSON-LD intactes pour le ranking.
// Eager Fetching & GPU Scaling
export async function loader({ request }) {
// Resolve data outside DOM instantiation
return await fetchLocalData(request);
}
<Canvas performance={{ min: 0.5 }} dpr={[1, Math.min(window.devicePixelRatio, 1.5)]}>
<Suspense fallback={null}>
<DracoCompressedModel url="/assets/roof.glb" />
</Suspense>
</Canvas>Impact & Résultats
"Le résultat a dépassé toutes nos attentes ! Nos clients sont bluffés par le design et surtout, on n'a jamais reçu autant de demandes de devis depuis nos téléphones. Un travail d'orfèvre.
CCharly
Gérant d'Apex Toiture
En Images
Aperçu visuel de la plateforme et de l'interface.
Prêt à lancer le vôtre ?
Élevez votre présence digitale avec une plateforme ultra-performante taillée sur mesure.
