Miami

Case 02 / 05 — Cybersecurity

ORTHO

Threat Intelligence“Every packet, accounted for.”

Style
Futuristic Precision
Industry
Cybersecurity
Year
2026
Role
Concept, design, motion, code
Live
ortho-security.pages.dev ↗
ORTHO — screen recordingortho-security.pages.dev

(01) The idea

The idea

A security platform with the calm of an instrument panel.

Security products usually shout. ORTHO speaks in precise numbers. The hero is a dot globe drawn on canvas from Natural Earth data, with live network arcs, travelling packets and a reticle that locks onto contained threats — and you can spin it with a finger.

ORTHO: dot globe with live arcs
01 — Dot globe with live arcs
ORTHO: five-stage detection pipeline
02 — Five-stage detection pipeline
ORTHO: product modules
03 — Product modules
ORTHO: sign-off
04 — Sign-off

Mobile-first — checked at 360, 390, 768 and 1280px

(02) Key scenes

Five scenes, one world.

  1. 01

    Living globe

    A Canvas 2D dot globe with network arcs and moving packets. Drag to spin it.

  2. 02

    Decoding headlines

    Headings resolve glyph by glyph, like a terminal catching up.

  3. 03

    Pipeline wipes

    Five detection stages swap with hard clip-path wipes as you scroll.

  4. 04

    3D coverage map

    A tilted map with beams of light rising over each alert.

  5. 05

    Sideways modules

    Product modules travel horizontally through a pinned track.

  • Canvas 2D
  • GSAP 3.15
  • ScrollTrigger
  • Lenis
  • CSS 3D
  • Archivo + IBM Plex Mono
  • Cloudflare Pages

(03) See it move

Visit the
live site ↗

ortho-security.pages.dev · fictional brand, real code

Next world — 03 / 05 · Brutalist-Futuristic SLAB