INTERACTIVE SHOWCASE

The art of
the possible.

18 React components across 8 frameworks — Three.js, D3, Framer Motion, GSAP, ECharts, Motion One — all inside Astro.

Frameworks

0

installed

React Components

0

all phases

Vanilla Islands

0

from WordPress

Astro Components

0

production ready

THREE.JS / REACT THREE FIBER

Interactive 3D digital twin.

Click the glowing hotspots on the rotating pump to reveal live telemetry. Procedural geometry, floating animation, point lights.

D3.JS + FRAMER MOTION

Platform explanation.

Data flow visualization, animated module tabs, and expandable architecture layers.

Data Flow Sankey — DDCE Loop

Module Tabs

Data Streams

StreamDesigner

Visual canvas for connecting 150+ OT/IT sources into real-time data pipelines. Drag-and-drop integration with historians, SCADA, MES, ERP, and IoT sensors.

Key Features

150+ pre-built connectors

Real-time & batch processing

Visual drag-and-drop canvas

Edge & cloud deployment

Architecture Diagram — Click to Expand

XMPRO PLATFORM ARCHITECTURECLICK TO EXPAND

LAYER 01Intelligence Infrastructure▾

LAYER 02Operational Tools▾

LAYER 03AI Modules▾

DATA FLOWS BIDIRECTIONALLY BETWEEN LAYERS

FRAMER MOTION + D3

Agent intelligence.

HAS progression explorer, draggable agent topology, and animated decision traces.

HAS Explorer — Click Levels

READ-ONLY

Monitoring

Agents observe data streams and surface alerts. Humans make all decisions and take all actions.

Agent

Human

Agent Role

Observe & Alert

Human Role

Decide & Act

Target Outcome

5-10%

Example Capabilities

Real-time dashboards

Threshold alerting

Data visualization

Agent Topology — Drag Nodes

Decision Trace

Decision TraceAUDIT TRAIL

14:32:01

Anomaly Detected

Vibration spike on Pump P-301 bearing assembly

Anomaly Agent

14:32:03

Root Cause Analysis

Bearing wear from lubrication degradation

Diagnostic Agent

14:32:05

Action Proposed

Schedule bearing replacement, reduce speed to 80%

PdM Agent

14:32:08

Approved

Operator approved. WO-4821 created.

Supervisor

Decision TraceAUDIT TRAIL

09:15:22

Efficiency Drop

Compressor C-205 dropped 3.2% below optimal

Process Agent

09:15:24

Analysis

Inlet temperature deviation from ambient conditions

Optimization Agent

09:15:26

Auto-Adjustment

Setpoint adjusted within bounded parameters

Control Agent (HAS-03)

09:15:30

Verified

Efficiency restored to 97.1%. Logged.

Governance Agent

REACT + ECHARTS + FRAMER MOTION

Value demonstration.

ROI calculator, before/after comparison, and industry performance benchmarks.

ROI Calculator

Business Value CalculatorVerified — Global potash mining company

Industry

Use Case

Your Operation

Number of Assets

Avg Asset Value

Downtime Cost/hr

Downtime hrs/yr

Expected Improvements

Downtime Reduction

%of unplanned downtime avoided

Efficiency Improvement

%annual savings as % of asset value

Projected Annual Value — Four Levers

Availability

$150.0M

Run more often

Performance

$675K

Produce more when running

Quality

$450K

Improve yield & reduce waste

Cost

$375K

Reduce operational costs

Total Annual Value

$151.5M

3-year projected: $424.2M

$3.0M per asset per year

Typical outcome for qualified use cases: 10x+ return

Results may vary. Projections are based on industry benchmarks and verified customer outcomes for qualified use cases. Actual results depend on operational context, data availability, and implementation scope.

Before / After XMPro

OPERATIONAL IMPACT

Equipment OEE

72%

Unplanned Downtime

200 hrs/yr

Mean Time to Repair

8.4 hrs

Operator Response

45 min avg

Decision Accuracy

68%

Compliance Score

82%

Industry Benchmarks — Select Industry

ECHARTS + REACT

Operational proof.

Live-updating dashboard and equipment heatmap with simulated real-time data.

Live Dashboard — Updates Every 3s

Equipment Health Heatmap

GSAP + FRAMER MOTION + MOTION ONE

Foundation utilities.

CountUp — Animated Stats

$30M+

Validated Value

150+

Connectors

15+

Days Autonomous

99.7%

Governance

MotionCard — Spring Hover

Predictive MaintenanceHAS-03

Monitors equipment health. Predicts failures 72hrs ahead.

Process OptimizationHAS-02

Tunes setpoints for throughput, energy, and quality.

Compliance MonitorHAS-01

Tracks regulatory requirements in real-time.

StaggerChildren

StreamDesigner

Connect 150+ OT/IT sources in a visual canvas.

AppDesigner

Build operational apps with no code.

MAGS

Multi-agent generative systems for autonomous ops.

ScrollReveal Animations

fadeLeft — Slides in from the left

fadeRight — Slides in from the right

blurIn — Deblurs into focus

scaleIn — Scales up from 92%

COMPLETE INVENTORY

18 React components. 8 frameworks. Zero page bloat.

Hero

ParticleField
DigitalTwinHero
AnimatedKPIStrip
ScrollReveal

Platform

DataFlowSankey
ArchitectureDiagram
ModuleTabs

Intelligence

HASExplorer
AgentTopology
DecisionTrace

Value + Ops

ROICalculator
BeforeAfterDashboard
IndustryBenchmarks
LiveDashboard
SensorHeatmap
MotionCard · CountUp