# Site d’entreprise TI avec visite réseau 3D interactive

Kestrel Networks — un site de services TI gérés où un magasin en 3D montre 78 chemins ouverts entre appareils réduits à 11 après segmentation, une attaque rejouée sur les deux réseaux, un aperçu de console NOC et un autodiagnostic en six questions.

> technology · 2026-11-07T16:54:26.844Z

Project overview

Kestrel Networks est un fournisseur fictif de TI gérées et de sécurité réseau que nous avons créé comme vitrine pour les MSP, consultants TI et firmes de sécurité. Au lieu d’une photo de salle de serveurs, la page d’accueil est un magasin en 3D d’une chaîne de 12 succursales : sur l’ancien réseau, chaque appareil peut joindre tous les autres, soit 78 chemins rouges; avec la nouvelle conception, il ne reste que 11 chemins autorisés dans trois zones pare-feu. Le visiteur parcourt cinq étapes, clique sur n’importe quel appareil pour voir l’avant et l’après, rejoue la même attaque sur les deux réseaux, puis évalue son propre magasin et réserve une analyse.

[Ouvrir la démo Kestrel Networks](/demos/secure-store/index.html)

Client context

  - Industry: Technologie / services TI gérés

  - Client size / environment: Fournisseur de TI gérées et de sécurité réseau — projet vitrine, marque fictive

  - Primary stakeholders: Propriétaires et responsables TI de chaînes de magasins, de cliniques et de bureaux

Challenge

La plupart des sites de MSP se ressemblent : une photo de câbles, « nous protégeons votre entreprise » et trois cartes à icônes. Le travail réseau est invisible, donc l’acheteur ne peut pas comparer les fournisseurs. L’objectif : rendre la segmentation compréhensible en dix secondes pour un propriétaire de magasin, sur téléphone comme sur ordinateur, sans extension, vidéo ni CDN, et sous la politique de sécurité du contenu stricte du site.

Scope delivered

  - Magasin 3D entièrement codé avec three.js : 12 appareils, baie, câblage, et chaque chemin entre appareils tracé comme une ligne, 78 avant et 11 après

  - Récit en cinq étapes au défilement, avec bascule Avant/Après, fiches d’appareil, étiquettes au survol et rotation au glisser

  - Attaque rejouée : une caméra compromise atteint les deux caisses et le poste du bureau sur l’ancien réseau; sur le nouveau, le pare-feu la bloque à la limite de zone

  - Aperçu de console NOC en HTML (état des sites, latence, chronologie d’alerte) au lieu d’images de banque

  - Autodiagnostic en six questions qui évalue le magasin du visiteur et mène au formulaire de réservation

  - Site complet : services, secteurs, démarche, forfaits par site, équipe, formulaire de contact et menu mobile

Before / after

  - Avant: Un site de MSP typique : photo de salle de serveurs, trois cartes à icônes et texte générique sur la sécurité, sans rien qu’un propriétaire de magasin puisse se représenter ou comparer.

  - Après: Une page où le réseau est la vedette. Le visiteur voit 78 chemins ouverts dans un magasin comme le sien, les voit passer à 11 et rejoue une attaque sur les deux réseaux avant de lire le moindre argument de vente. Environ 180 Ko compressés de HTML, CSS et JavaScript incluant three.js, sans image ni requête externe.

Mobile — 390 px : le magasin 3D avec son compteur de chemins ouverts, et le menu
Ordinateur — la page d’accueil avec le magasin divisé en zones caisses, caméras et bureau

Visual proof placeholders

  - 57 vérifications automatisées dans le navigateur sous la CSP de production — démarrage 3D, fiches d’appareil, les cinq étapes, les deux attaques rejouées, compteur de chemins, autodiagnostic, formulaire (rien n’est envoyé), menu mobile et mouvement réduit

  - 0 erreur de console ou de CSP; aucun débordement horizontal à 390 px

  - Environ 180 Ko compressés pour la page et tout le code, plus 75 Ko de polices auto-hébergées

  - Version texte si WebGL n’est pas disponible; avec le mouvement réduit, les états finaux s’affichent sans animation

Delivery timeline

  - Phase 1 : concept, plan du magasin et visuel « tous les chemins » qui porte le récit

  - Phase 2 : scène 3D, matériaux et éclairage, transitions avant/après et attaque rejouée

  - Phase 3 : pages de l’entreprise, console NOC, autodiagnostic, mise en page mobile et tests automatisés

Outcome

Un site de services TI qui montre le travail au lieu de le décrire. La même scène peut être adaptée à une clinique ou à un bureau, et l’autodiagnostic et le formulaire sont prêts à être reliés à un CRM. Amen Security conçoit ce genre de site et gère les réseaux derrière.

Technology stack

three.js (WebGL, occlusion ambiante sur les ordinateurs performants), modules JavaScript natifs regroupés avec esbuild, CSS Grid et positionnement sticky, polices IBM Plex auto-hébergées, tests automatisés Playwright.

Visual evidence

Ancien réseau — lignes rouges entre chaque paire d’appareils et câblage emmêlé
Nouveau réseau — 11 chemins autorisés, câblage ordonné et zones pare-feu
Attaque rejouée — le pare-feu arrête une caméra compromise à la zone des caisses
Services et aperçu de console NOC en HTML, pas une photo de banque

---
Source page: https://amensecurity.ca/fr/projects/it-company-website-3d-network-demo
Markdown version for AI agents · Amen Security
Email: info@amensecurity.ca
Phone: +1 (204) 514-3536