# IT company website with an interactive 3D network walkthrough

Kestrel Networks — a managed IT site where a 3D store shows 78 open device paths drop to 11 after segmentation, an attack replayed on both networks, a NOC console preview and a six-question self-check.

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

Project overview

Kestrel Networks is a fictional managed IT and network security provider we built as a showcase for MSPs, IT consultants and security firms. Instead of a server-room photo, the home page is a 3D store from a 12-location retail chain: on the old network every device can reach every other, 78 red paths in total; switch to the new design and they fall to 11 allowed paths inside three firewall zones. Visitors scroll through five steps, click any device for its before and after, replay the same attack on both networks, then check their own store and book a review.

[Open the live Kestrel Networks demo](/demos/secure-store/index.html)

Client context

  - Industry: Technology / managed IT services

  - Client size / environment: Managed IT and network security provider — showcase build, fictional brand

  - Primary stakeholders: Owners and IT leads of store chains, clinics and offices

Challenge

Most MSP sites look the same: a stock photo of cables, “we keep your business secure” and three icon cards. Network work is invisible, so buyers cannot tell one provider from another. The goal was to make segmentation something a store owner understands in ten seconds, on a phone as well as a laptop, without plugins, video files or a CDN, and under the site's strict content security policy.

Scope delivered

  - 3D store built entirely in code with three.js: 12 devices, rack, cabling, and every device-to-device path drawn as a line, 78 before and 11 after

  - Scroll-driven five-step story with a Before/After switch, device cards, hover labels and drag to rotate

  - Attack replay: a compromised camera reaches both tills and the office PC on the old network; on the new one the firewall drops it at the zone edge

  - NOC console preview built in HTML (site status, latency, alert timeline) in place of stock imagery

  - Six-question self-check that scores the visitor's own store and leads to the booking form

  - Full company site: services, industries, process, per-site plans, team, contact form and a mobile menu

Before / after

  - Before: A typical MSP site: a server-room photo, three icon cards and generic security copy, with nothing a store owner can picture or compare.

  - After: A page where the network is the hero. Visitors see 78 open paths in a store like theirs, watch them fall to 11, and replay an attack on both networks before reading any sales copy. About 180 KB of gzipped HTML, CSS and JavaScript including three.js, no images and no external requests.

Mobile — 390px: the 3D store with its open-path counter, and the menu
Desktop — the home page with the store split into POS, camera and office zones

Visual proof placeholders

  - 57 automated browser checks under the production CSP — 3D start-up, device cards, all five steps, both attack replays, path counter, checklist, contact form (nothing is sent), mobile menu and reduced motion

  - 0 console or CSP errors; no horizontal overflow at 390px

  - About 180 KB gzipped for the page and all code, plus 75 KB of self-hosted fonts

  - Text fallback when WebGL is unavailable; reduced-motion visitors get the end states without animation

Delivery timeline

  - Phase 1: Concept, store layout and the “every path” visual that carries the story

  - Phase 2: 3D scene, materials and lighting, before/after transitions and the attack replay

  - Phase 3: Company pages, NOC console, self-check, mobile layout and automated QA

Outcome

An IT services site that shows the work instead of describing it. The same scene can be re-skinned for a clinic or an office, and the self-check and booking form are ready to connect to a CRM. Amen Security builds sites like this and runs the networks behind them.

Technology stack

three.js (WebGL, ambient occlusion on capable desktops), vanilla JavaScript modules bundled with esbuild, CSS Grid and sticky positioning, self-hosted IBM Plex fonts, Playwright automated browser QA.

Visual evidence

Old network — red lines between every pair of devices and tangled cabling
New network — 11 allowed paths, tidy cabling and firewall zones
Attack replay — the firewall stops a compromised camera at the POS zone
Services and a NOC console preview built in HTML, not a stock photo

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