2026corporateПРАЙД™ · Voronezh6 weeks

PRIDE — private security with a tactical HUD

A corporate site for an operating private security firm with 562 objects under protection and 397 staff across seven Russian regions. A tactical HUD visual language that signals category in five seconds — without the standard blue-gradient security clichés.

security
hover.tracked
Surface

What users see. Identity, motion, UI craft, copy.

Obsidian background (#06070A), tactical orange accent (#FF6A1A), cyber-cyan secondary. Chakra Petch for display, Inter Tight for body, JetBrains Mono for HUD markers. The hero builds atmosphere from a real ops-team photograph plus a Three.js layer with moving wireframe grid and 400 ambient particles, with a CSS dust layer floating up underneath.

Tactical HUDLive TelemetryThreat AnalyzerBento ServicesRadar MapEncrypted Form
scripta://case/pride-security/architecture
Substrate

What holds it up. Architecture, contracts, infra, latency.

Three.js is point-of-use only — holo-grid in the hero, holo-core in the threat analyzer, radar in the coverage map. All canvas layers are transparent with pointer-events off. Live telemetry: protected-object and staff counters drift around the target value by ±1 at random 1.8–6s intervals — gives the system a sense of working in real time without visual noise.

Three.js Point-of-useIO CountersLocal Risk CalcIO-once Animations
Story

A premium security firm — read in five seconds

PRIDE is a real ops organisation — 562 objects, 397 staff, seven regions. The brief: stop being positioned beneath the firm’s actual category by stock-photo blue-gradient sites and start signalling level on the first screen. We departed entirely from standard security-segment aesthetics and built the visual language from tactical HUD references — a stylistic register the audience already reads from games and modern operations cinema. It works on two layers: emotionally it reads as "serious", and functionally it structures the content through HUD markers, angle brackets, monospace technical captions, and live telemetry.

Three steps, local computation, real recommendation

A three-step risk analyser — object profile → risk vectors → geography. The selection returns a 0–10 score with traffic-light coding (cyan-LOW, amber-MEDIUM, orange-HIGH) and a concrete service recommendation with deployment time and team size. To the left of the form — a rotating wireframe icosahedron on Three.js, symbolising that nothing is sent to a server. Engagement device and trust device in one.

Gallery

Pieces of the product.

  • scan
    Hero · holo-grid + 400 particles01/06
  • grid
    Bento services · 12-column asymmetry02/06
  • rings
    Radar coverage map03/06
  • mono
    Threat analyzer · 3-step04/06
  • gradient
    Encrypted contact terminal05/06
  • mesh
    Live telemetry · drifting counters06/06
[ Results ]
562
objects under protection
397
staff
7
regions
13
sections built
[ Stack ]
Next.js 14TypeScriptThree.jsReact Three FiberFramer MotionTailwind CSS
Next case

OG Jewelers — digital flagship