Skip to content

Case Study / Cybersecurity / AI / SaaS

CyberThreat Mesh / 20-screen product build

Autonomous Cloud Threat Surface & Attack Graph Engine

A 20-screen interactive security operations platform for visualizing cloud attack surfaces, threat paths, vulnerabilities, governance, and blast-radius analytics.

  • 20 Product routes. A complete security product surface spanning platform overview, attack graph, agents, analytics, governance, and administration.
  • 146px Minimum graph spacing. The deterministic graph layout guarantees readable node separation above the 140px specification.
  • 70+ Bounded animations. More than 70 Framer Motion calls stay within the documented 150ms interaction budget.
  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Framer Motion
  • Recharts
  • Lucide React
  • SVG

Overview

Client Overview

CyberThreat Mesh is designed for SOC analysts, threat-hunt leads, cloud security architects, and GRC auditors who need a clear operational view of identities, workloads, data stores, vulnerabilities, and attack paths. The product is a fully implemented interactive front-end system with simulated cybersecurity domain data, not a live security connector or AI runtime.

Services provided

  • Product UI Engineering
  • Interactive Data Visualization
  • Design System Architecture
  • Responsive Frontend Development

Challenge

Business Challenge

The situation before the engagement, in the client's terms.

A graph-heavy security product had to make dense cloud attack-surface data feel immediate, readable, and consistent across 20 distinct workflows without relying on live backend systems.

  • 01

    Cluttered graph canvases

    Naive graph layouts can overlap nodes, collide edges with labels, and force constant pan and zoom during security triage.

  • 02

    Theme-split visual language

    Risk colors, badges, and charts needed to remain legible and semantically consistent in both tactical dark mode and high-contrast light mode.

  • 03

    Complex dashboard architecture

    Twenty screens needed one reliable header, sidebar, scroll model, navigation system, and component vocabulary rather than isolated page-specific solutions.

  • 04

    Fast perceived performance

    The product needed instant local rendering, bounded motion, and genuinely interactive charts and filters without skeleton screens or blocking states.

Objectives

Engagement Objectives

What the build needed to achieve before implementation began.

  • Implement 20 fully populated product screens across four security operations categories

  • Build a reusable SVG attack graph with guaranteed minimum node spacing and interactive inspection

  • Ship a dual-theme design system with readable risk colors in light and dark modes

  • Make charts, filters, sliders, scrubbers, and graph exploration genuinely interactive against typed mock data

  • Keep every animation within the 150ms motion budget and avoid blocking skeleton states

  • Verify static rendering, type safety, lint cleanliness, and HTTP health across all routes

Solution Design

How We Solved It

The approach that addressed each challenge above.

CyberThreat Mesh uses typed deterministic data, a reusable graph engine, CSS design tokens, and a shared application shell to make a complex security product fast, inspectable, and consistent.

  • 01

    Guaranteed graph layout

    A seeded grid layout with controlled jitter guarantees at least 146px node separation while quadratic bezier paths keep edges away from labels.

  • 02

    Theme-aware risk tokens

    CSS variables and color-mix derived tokens keep critical, high, medium, and low risk states readable across both themes and chart surfaces.

  • 03

    One shared application shell

    AppLayout, navigation data, reusable cards, gauges, charts, terminals, drawers, and graph components amortize the cost of the 20-screen scope.

  • 04

    State-driven interactions

    Filters, sliders, scrubbers, graph selection, investigation extraction, compliance frameworks, and pricing controls derive views from a single typed dataset.

  • 05

    Bounded motion and static rendering

    All 70-plus animation calls stay within a 150ms motion budget, while Next.js statically prerenders the product routes for an instant first paint.

Capabilities

Key Features

What CyberThreat Mesh does in day-to-day use.

  • Reusable attack graph engine

    A deterministic SVG graph renders cloud assets, risk states, curved edges, zoom controls, filtering, and interactive node inspection across five product screens.

  • Dual-theme design system

    Class-based light and dark themes use CSS design tokens so risk colors, badges, borders, charts, and surfaces remain coherent across the product.

  • Security operations workspace

    Explore agent control, reasoning traces, vulnerabilities, centrality, temporal replay, investigation, compliance, RBAC, integrations, and audit logs.

  • Interactive graph analytics

    Filters, scrubbers, node selection, two-hop investigation, blast-radius overlays, and graph-derived metrics respond to the mock dataset in the browser.

  • Responsive application shell

    A sticky header, collapsible sidebar, isolated scroll viewport, mobile drawer, and shared UI kit keep 20 screens navigable and consistent.

  • Honest simulated domain layer

    Typed deterministic datasets power the product experience while the case study clearly distinguishes simulated agents, telemetry, and connectors from live infrastructure.

Technology Stack

Technology Stack

  • Next.js App Router
  • React
  • TypeScript
  • Tailwind CSS v4
  • Framer Motion
  • Recharts
  • Lucide React
  • next-themes
  • Attack Graph
  • Blast Radius Analytics
  • RBAC Governance
  • Audit Trails
  • Typed Mock Datasets
  • Graph Nodes and Edges
  • Vulnerability Feeds
  • Timeline Snapshots

Outcome

Results & Outcome

What changed for the business after launch.

  • 20

    Product routes

    A complete security product surface spanning platform overview, attack graph, agents, analytics, governance, and administration.

  • 146px

    Minimum graph spacing

    The deterministic graph layout guarantees readable node separation above the 140px specification.

  • 70+

    Bounded animations

    More than 70 Framer Motion calls stay within the documented 150ms interaction budget.

  • 20/20

    HTTP route checks

    Every product route was smoke-tested successfully over HTTP, with production build and lint verification documented in the case study.

Interface

A Closer Look

Screens from the delivered system.

  • Claude-powered Agentic Workflows automate complex multi-step tasks through autonomous AI execution.
  • Claude AI Safety & Governance brings responsible AI controls into enterprise AI deployment.
  • Anthropic Claude API enables developers to integrate Claude intelligence directly into applications.
  • Anthropic Console provides a workspace for building, testing and refining Claude-powered applications.
  • Claude Artifacts turn AI-generated ideas into interactive, usable work products.
  • Claude 3.5 Sonnet is built for strong reasoning, coding and multimodal AI capabilities.
  • Claude Code CLI brings Claude-powered development assistance directly into the terminal.
  • Claude Enterprise Workspaces bring secure AI collaboration and productivity into enterprise environments.
  • Claude Opus represents Anthropic's high-capability Claude model family for demanding AI workloads.
  • Claude Workspaces organize AI-powered projects, conversations and collaborative work.
  • Claude-powered Codebase Refactoring & Review helps developers analyze, improve and modernize complex codebases.
  • Claude Constitutional AI provides a foundation for safer, more aligned AI behavior.
  • Claude Function Calling & Tool Use enables AI agents to interact with external functions and systems.
  • Claude-informed Generative Engine Optimization helps content become more discoverable across AI-powered search experiences.
  • Claude's large context window enables deep reasoning across extensive documents, codebases and knowledge.
  • Claude-powered long-document summarization transforms large volumes of information into concise, useful insights.
  • Claude + Model Context Protocol (MCP) connects AI agents with tools, data and external systems.
  • Claude Multimodal & Vision Analysis extends AI reasoning beyond text into images and visual information.
  • Claude Prompt Caching improves AI application efficiency by reusing frequently accessed context.
  • Claude-powered Retrieval-Augmented Generation connects relevant knowledge with intelligent response generation.
  • Claude-powered RAG combines knowledge retrieval with intelligent generation for grounded AI responses.
  • Claude RAG grounds AI responses in retrieved knowledge for more contextual and reliable generation.
  • Claude AI workflow experience demonstrating practical enterprise AI capabilities.
  • Claude AI in action demonstrating practical generative AI and workflow capabilities.
  • Claude structured outputs make AI responses predictable, machine-readable and ready for downstream automation.
  • Claude System Prompt Engineering shapes reliable AI behavior through precise instructions and structured context.
  • Claude-powered Vibe Coding accelerates software development through natural-language AI collaboration.

Conclusion

The Result

The result is a navigable, theme-coherent security product surface with 20 statically rendered routes, a reusable graph engine, responsive dashboard architecture, interactive filters and analytics, and honest boundaries around what is simulated. Its typed contracts and reusable components leave a clean path toward replacing the mock data layer with live security systems later.

  • 20 Product routes: A complete security product surface spanning platform overview, attack graph, agents, analytics, governance, and administration.
  • 146px Minimum graph spacing: The deterministic graph layout guarantees readable node separation above the 140px specification.
  • 70+ Bounded animations: More than 70 Framer Motion calls stay within the documented 150ms interaction budget.

More work

Related Projects

Other systems built on similar foundations.

View all projects

  • AI / Automation / Multi-Agent

    NexusOps

    An enterprise agentic AI platform that orchestrates autonomous support, sales, escalation, and operations workflows with governance built in.

    • Anthropic Claude
    • React
    • Next.js
    • TypeScript
    • +8

    View Case Study

  • AI / Automation

    Vigilon

    Vigilon workforce operations command center for physical security agencies showing field telemetry, workforce dispatch, attendance verification, patrol compliance, and financial governance

    • React
    • TypeScript
    • Vite
    • Tailwind CSS
    • +3

    View Case Study

Next step

Want a System Like This?

Tell us what your business needs to automate and we'll map out a practical build.

Book a Free ConsultationContact Us

hello@thedevrox.comWe reply to every enquiry within one business day.