{/* Sunrise/sunset sky — color shifts across the scene */}
{/* Warm/cool tint overlay during sunrise/sunset */}
{tintOpacity > 0 && (
)}
{/* Sun (positioned by arc) */}
);
}
function CommercialBuilding() {
// 3-story commercial building, 460×360 footprint.
// Rooftop top-down solar array, lit windows in regular grid, ground entrance.
const W = 460, H = 360;
const floors = 3;
const winCols = 8;
// Body sits on ground (top: 80 to leave room for rooftop solar above)
const bodyTop = 80;
const bodyH = 240; // 3 floors × 80
const floorH = bodyH / floors;
return (
{({ localTime, duration }) => {
const lt = localTime;
const entry = e.easeOutCubic(clamp(lt / 0.6, 0, 1));
const exit = lt > duration - 0.6 ? clamp((lt - (duration - 0.6)) / 0.6, 0, 1) : 0;
const op = entry * (1 - exit);
const phoneX = 1000, phoneY = 150;
const devX = 1500, devY = 410;
// Stages drive timing
const stages = [
{ t: 0.3, name: 'scan' },
{ t: 1.1, name: 'pair' },
{ t: 2.0, name: 'asset' },
{ t: 3.0, name: 'modbus' },
{ t: 4.0, name: 'connectivity' },
{ t: 4.9, name: 'done' },
];
let stage = 'scan';
for (const s of stages) if (lt >= s.t) stage = s.name;
const totalSec = 5 * 60;
const elapsedFrac = clamp((lt - 0.2) / 5.0, 0, 1);
const remaining = Math.max(0, Math.round(totalSec * (1 - elapsedFrac)));
const mm = Math.floor(remaining / 60), ss = remaining % 60;
const timer = `${mm}:${String(ss).padStart(2,'0')}`;
return (
Pair over Bluetooth using the app on your phone. Pick from 200+ inverter models.
Configure the comms port and join the network. No laptop, no cables.} color={X3.amber} opacity={entry} /> {/* 200+ inverters supported badge */}
{/* Brand logos strip */}
{/* Device */}
);
}}
);
}
function Phone({ x, y, stage, t }) {
const W = 320, H = 660;
return (
);
}
function PhoneScreen({ stage, t }) {
return (
);
}
function ScreenTitle({ small, big, accent }) {
return (
);
}
function ScreenScan({ t }) {
return (
<>
{/* Energy Saver mode — for 4G data conservation */}
);
}
function Toggle({ on, color }) {
return (
);
}
function ScreenDone({ t }) {
return (
);
}
function BluetoothLink({ from, to, t, active }) {
const dx = to.x - from.x, dy = to.y - from.y;
const NUM = 5;
const dots = [];
for (let i = 0; i < NUM; i++) {
const phase = ((t * 0.6) + i / NUM) % 1;
const x = from.x + dx * phase;
const y = from.y + dy * phase;
const op = (1 - Math.abs(phase - 0.5) * 2) * 0.8;
dots.push({ x, y, op });
}
return (
<>
{active && dots.map((d, i) => (
))}
);
}
// ───────────────────────────────────────────────────────────────────
// SCENE 3 — One X3EDGE-N → many inverters (Modbus daisy chain, up to 32)
// ───────────────────────────────────────────────────────────────────
function Scene3() {
return (
{({ localTime, duration }) => {
const lt = localTime;
const entry = e.easeOutCubic(clamp(lt / 0.6, 0, 1));
const exit = lt > duration - 0.6 ? clamp((lt - (duration - 0.6)) / 0.6, 0, 1) : 0;
const op = entry * (1 - exit);
// Layout: device left-center, daisy chain across right side
const devX = 430, devY = 360;
const devW = 240, devH = 240;
// Inverters arranged as 4x2 grid — pulled left to fill empty space
const cols = 4, rows = 2;
const invStartX = 970, invStartY = 320;
const invW = 130, invH = 200, gapX = 130, gapY = 80;
// Count up animation
const countT = clamp((lt - 0.4) / 1.4, 0, 1);
const count = Math.round(1 + countT * 31);
return (
Daisy-chain inverters, meters, trackers and BMS over RS-485 Modbus.
One box, one config.} color={X3.teal} opacity={entry} maxWidth={780} subMaxWidth={760} /> {/* Big counter — moved further down-left */}
{/* Asset legend — to the right of counter, horizontal */}
);
})
));
})()}
{/* "+24 more" indicator — centered below the grid */}
);
}}
);
}
function SmallInverter({ w = 130, h = 200, idx = 1, pulse = 0, asset }) {
const a = asset || { kind: 'inverter', label: 'INV', color: X3.amber, v1: 'P: 8.4 kW', v2: 'V: 480', v3: 'I: 17.5' };
// Asset-specific visual treatment
const renderTop = () => {
if (a.kind === 'inverter') {
// Tall inverter chassis with vents — lighter for clarity
return (
);
}
if (a.kind === 'tracker') {
// Solar panel on tilted post — brighter blue panel
return (
);
}
if (a.kind === 'bms') {
// Battery cell rows — brighter
return (
);
}
// ───────────────────────────────────────────────────────────────────
// SCENE 4 — Edge AI processing, MQTT/mTLS payload
// ───────────────────────────────────────────────────────────────────
function Scene4() {
return (
{({ localTime, duration }) => {
const lt = localTime;
const entry = e.easeOutCubic(clamp(lt / 0.6, 0, 1));
const exit = lt > duration - 0.6 ? clamp((lt - (duration - 0.6)) / 0.6, 0, 1) : 0;
const op = entry * (1 - exit);
const devX = 760, devY = 280;
const codeT = clamp((lt - 1.4) / 1.6, 0, 1);
return (
{/* AI badge floating near device */}
Lightweight on-device ML for anomaly, soiling and forecasting.
Every MQTT payload signed with mTLS.} color={X3.teal} opacity={entry} maxWidth={780} subMaxWidth={760} /> {/* Pipeline */}
);
}}
);
}
// ───────────────────────────────────────────────────────────────────
// SCENE 5 — WiFi primary + 4G backhaul (failover)
// ───────────────────────────────────────────────────────────────────
function Scene5() {
return (
{({ localTime, duration }) => {
const lt = localTime;
const entry = e.easeOutCubic(clamp(lt / 0.6, 0, 1));
const exit = lt > duration - 0.6 ? clamp((lt - (duration - 0.6)) / 0.6, 0, 1) : 0;
const op = entry * (1 - exit);
// WiFi failure happens around lt=3.5, recovers around lt=5.0
const wifiDown = lt > 3.5 && lt < 5.0;
const using4G = wifiDown;
// Brief offline window during failover handover
const offlineWindow = lt > 3.5 && lt < 3.85;
const deviceStatus = offlineWindow ? 'offline' : 'online';
const devX = 220, devY = 440;
const cloudX = 1240, cloudY = 480;
const wifiY = 600;
const fourGY = 780;
return (
MQTT travels over Wi-Fi by default. If the link drops, 4G LTE takes over.
Telemetry never stops.} color={X3.blue} opacity={entry} maxWidth={780} subMaxWidth={760} />
{/* WiFi path */}
);
}}
);
}
// Cloud infrastructure (multi-region)
function CloudInfra({ x, y, t }) {
return (
{/* MQTT broker tiles */}
);
}
// ───────────────────────────────────────────────────────────────────
// SCENE 6 — Distributed AI: edge + cloud (cost savings)
// ───────────────────────────────────────────────────────────────────
function Scene6() {
return (
{({ localTime, duration }) => {
const lt = localTime;
const entry = e.easeOutCubic(clamp(lt / 0.6, 0, 1));
const exit = lt > duration - 0.6 ? clamp((lt - (duration - 0.6)) / 0.6, 0, 1) : 0;
const op = entry * (1 - exit);
// Funnel layout — raw telemetry left, filter at center, sparse events right, cloud far right.
const inletX = 100, inletY = 440; // raw stream origin
const filterCX = 760, filterCY = 600; // center of edge device
const outletX = 1180, outletY = 600; // sparse stream start
const cloudCX = 1620, cloudCY = 600; // cloud target
// Animated particle streams (deterministic, time-based)
const rawCount = 60;
const evtCount = 6;
return (
Compute where it costs less.}
accent=""
sub={<>Inference runs at the edge. Raw telemetry stays local;
only events and aggregates reach the cloud, drastically lower cloud spend.} color={X3.teal} opacity={entry} maxWidth={1100} subMaxWidth={820} /> {/* SVG overlay for funnel + particle streams */} {/* LABELS along the flow */} {/* Stage 1: Raw telemetry — sits inside the funnel body, closer to the narrow end */}
{/* Stage 2: Edge device (filter) */}
);
}}
);
}
function AIAlertsFeed({ lt }) {
const allAlerts = [
{ sev: 'critical', icon: 'comm', site: 'Mumbai-08', msg: 'Communication loss · INV-14', detail: 'No telemetry for 4m 12s · auto-ticket opened', age: '2m ago' },
{ sev: 'warning', icon: 'soiling', site: 'Jaipur-02', msg: 'Soiling detected · Block C', detail: 'PR ↓ 7.4% vs cohort · cleaning recommended', age: '14m ago' },
{ sev: 'warning', icon: 'underperf',site: 'Pune-11', msg: 'String underperformance · MPPT-3', detail: 'Output 18% below modeled · check connectors', age: '38m ago' },
{ sev: 'info', icon: 'forecast', site: 'Chennai-04', msg: 'Generation forecast revised', detail: 'Cloud cover ↑ · expected −12% next 6h', age: '1h ago' },
{ sev: 'critical', icon: 'fault', site: 'Hyderabad-01', msg: 'Ground fault detected', detail: 'Riso below threshold · INV-07 isolated', age: '1h ago' },
];
// Stagger entry of alerts
return (
);
}
function CostBar({ label, value, color, height, sub, highlight }) {
return (
);
}
// ───────────────────────────────────────────────────────────────────
// SCENE 7 — SynergyOT: API or X3EDGE (MNRE compliant)
// ───────────────────────────────────────────────────────────────────
function Scene7() {
return (
{({ localTime, duration }) => {
const lt = localTime;
const entry = e.easeOutCubic(clamp(lt / 0.6, 0, 1));
const exit = lt > duration - 0.6 ? clamp((lt - (duration - 0.6)) / 0.6, 0, 1) : 0;
const op = entry * (1 - exit);
return (
);
}
// ───────────────────────────────────────────────────────────────────
// SCENE 8 — Beyond inverters: trackers, BMS, EV, meters
// ───────────────────────────────────────────────────────────────────
function Scene8() {
return (
{({ localTime, duration }) => {
const lt = localTime;
const entry = e.easeOutCubic(clamp(lt / 0.6, 0, 1));
const exit = lt > duration - 0.6 ? clamp((lt - (duration - 0.6)) / 0.6, 0, 1) : 0;
const op = entry * (1 - exit);
const devX = 880, devY = 320;
const assets = [
{ id: 0, name: 'Solar Inverters', icon: 'inverter', angle: -90, delay: 0.2, color: X3.amber },
{ id: 1, name: 'Solar Trackers', icon: 'tracker', angle: -45, delay: 0.4, color: X3.amber },
{ id: 2, name: 'Battery / BMS', icon: 'battery', angle: 0, delay: 0.6, color: X3.teal },
{ id: 3, name: 'EV Chargers', icon: 'ev', angle: 45, delay: 0.8, color: X3.teal },
{ id: 4, name: 'Energy Meters', icon: 'meter', angle: 90, delay: 1.0, color: X3.blue },
{ id: 5, name: 'Wind Turbines', icon: 'wind', angle: 135, delay: 1.2, color: X3.blue },
{ id: 6, name: 'Sensors', icon: 'sensor', angle: 180, delay: 1.4, color: X3.violet },
{ id: 7, name: 'Gensets', icon: 'genset', angle: -135, delay: 1.6, color: X3.violet },
];
const radius = 320;
return (
{/* Center: device */}
{/* Connection line */}
{/* Traveling packet */}
{/* Asset card */}
);
})}
);
}}
);
}
function AssetIcon({ kind, color }) {
const props = { width: 26, height: 26, fill: 'none', stroke: color, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
switch (kind) {
case 'inverter':
return ;
case 'tracker':
return ;
case 'battery':
return ;
case 'ev':
return ;
case 'meter':
return ;
case 'wind':
return ;
case 'sensor':
return ;
case 'genset':
return ;
default:
return ;
}
}
// ───────────────────────────────────────────────────────────────────
// SCENE 9 — Grow your portfolio: kW → multi-MW (CTA for EPCs / O&M)
// ───────────────────────────────────────────────────────────────────
function Scene9() {
return (
{({ localTime, duration }) => {
const lt = localTime;
const entry = e.easeOutCubic(clamp(lt / 0.7, 0, 1));
const exit = lt > duration - 0.7 ? clamp((lt - (duration - 0.7)) / 0.7, 0, 1) : 0;
const op = entry * (1 - exit);
// Stage progression: 0 = single rooftop, 1 = small commercial, 2 = utility scale
// 0..2.0s: stage 0 (kW)
// 2.0..5.0s: stage 1 (hundreds of kW)
// 5.0..end: stage 2 (multi-MW)
const stage = lt < 2.0 ? 0 : lt < 5.0 ? 1 : 2;
// Capacity ticker — eased exponential growth from 8 kW → 24 MW
const growthT = clamp(lt / 7.0, 0, 1);
const capacityKW = 8 * Math.pow(24000 / 8, growthT); // 8 → 24,000 kW
const capStr = capacityKW < 1000
? `${capacityKW.toFixed(1)} kW`
: `${(capacityKW / 1000).toFixed(2)} MW`;
// Tile counts grow as portfolio scales
const tilesShown = Math.min(96, Math.floor(growthT * 96) + 1);
const tiles = Array.from({ length: 96 }).map((_, i) => {
const col = i % 12;
const row = Math.floor(i / 12);
return { col, row, i };
});
return (
);
}
// ───────────────────────────────────────────────────────────────────
// Shared sub-elements
// ───────────────────────────────────────────────────────────────────
function BackgroundGrid() {
return (
);
}
function DeviceFrame({ x, y, w, h, glowIntensity = 0.6, status = 'online', showLed = true }) {
// Status colors: blue (BLE/pairing), green (online), red (offline)
const ledColors = {
ble: { c: '#3a8dff', glow: 'rgba(58,141,255,0.9)' },
online: { c: '#22dd6e', glow: 'rgba(34,221,110,0.9)' },
offline: { c: '#ff3b3b', glow: 'rgba(255,59,59,0.9)' },
};
const led = ledColors[status] || ledColors.online;
// LED position on the device image (relative): the "STATUS" indicator dot
// centroid sampled at (45.75%, 29.87%) of the 1080×1080 device image.
const ledX = x + w * 0.4575;
const ledY = y + h * 0.2987;
const ledSize = Math.max(6, w * 0.024);
// Pulse animation (driven by Date.now so it animates regardless of caller)
const pulse = 0.55 + 0.45 * Math.sin(Date.now() / 280);
return (
<>
{/* Status LED — pulsing colored dot, masking over the device's STATUS indicator */}
{showLed && }
{/* Outer halo bloom (more dramatic) */}
{showLed && }
);
}
function PathFlow({ from, via, to, color, label, t, packetOffset = 0, active = true, dim = false }) {
const path = `M ${from.x} ${from.y} C ${(from.x + via.x) / 2} ${from.y}, ${(from.x + via.x) / 2} ${via.y}, ${via.x} ${via.y} S ${(via.x + to.x) / 2} ${to.y}, ${to.x} ${to.y}`;
const NUM = 4;
const sample = (u) => {
if (u < 0.5) {
const s = u * 2;
const cx1 = (from.x + via.x) / 2, cy1 = from.y;
const cx2 = (from.x + via.x) / 2, cy2 = via.y;
const x = (1-s)**3 * from.x + 3*(1-s)**2*s*cx1 + 3*(1-s)*s**2*cx2 + s**3 * via.x;
const y = (1-s)**3 * from.y + 3*(1-s)**2*s*cy1 + 3*(1-s)*s**2*cy2 + s**3 * via.y;
return { x, y };
} else {
const s = (u - 0.5) * 2;
const cx1 = (via.x + to.x) / 2, cy1 = via.y;
const cx2 = (via.x + to.x) / 2, cy2 = to.y;
const x = (1-s)**3 * via.x + 3*(1-s)**2*s*cx1 + 3*(1-s)*s**2*cx2 + s**3 * to.x;
const y = (1-s)**3 * via.y + 3*(1-s)**2*s*cy1 + 3*(1-s)*s**2*cy2 + s**3 * to.y;
return { x, y };
}
};
const dimOp = dim ? 0.2 : 1;
return (
<>
{active && Array.from({ length: NUM }).map((_, i) => {
const u = ((t * 0.4 + packetOffset + i / NUM) % 1);
const p = sample(u);
const fadeIn = clamp(u / 0.05, 0, 1);
const fadeOut = u > 0.95 ? clamp((u - 0.95) / 0.05, 0, 1) : 0;
const opP = fadeIn * (1 - fadeOut);
return (
);
})}
);
}
Object.assign(window, { Scene1, Scene2, Scene3, Scene4, Scene5, Scene6, Scene7, Scene8, Scene9, MasterScene, STAGE_W, STAGE_H });
0.85
? 'radial-gradient(circle, #f0a878 0%, #b04830 55%, #4a1810 95%)'
: 'radial-gradient(circle, #fffce0 0%, #ffd76a 40%, #ff8a2a 90%)',
boxShadow: '0 0 160px 80px rgba(255,180,80,0.55), 0 0 60px 30px rgba(255,220,140,0.7)',
}}/>
{/* Volumetric sun glow — anchored to sun position */}
{/* Lens flare ghost orbs */}
{/* Distant mountain silhouettes — multiple layers for depth */}
{/* Ground haze */}
{({ localTime: lt2, duration: d2 }) => {
const titleT = e.easeOutCubic(clamp(lt2 / 0.7, 0, 1));
const fadeOut = lt2 > d2 - 0.5 ? (lt2 - (d2 - 0.5)) / 0.5 : 0;
const op2 = titleT * (1 - fadeOut);
return (
);
}}
);
}}
);
}
function House() {
// Realistic suburban home: gabled roof seen from front-3/4, with a tightly
// packed solar array on the sunlit right slope. Two rows of full-size panels
// with visible cell grid + busbars + sunset glint.
return (
{/* RESIDENTIAL: house with rooftop panels */}
{/* Cinematic vignette */}
{/* Title overlay */}
Residential · 8 kW
Commercial · 300 kW
Utility-scale · 2.4 MW
From rooftop
to utility-scale.
to utility-scale.
X3EDGE-N · The path from inverter to cloud
{/* SVG body + façade detail */}
{/* Window grid — rendered as div overlay so we can vary lit/dim states */}
{Array.from({ length: floors }).map((_, fi) => {
// skip center 2 windows on ground floor where the entrance sits
return Array.from({ length: winCols }).map((_, ci) => {
const isGroundCenter = fi === floors - 1 && (ci === 3 || ci === 4);
if (isGroundCenter) return null;
// Pseudo-random lit pattern, seeded by fi*winCols+ci
const seed = fi * 31 + ci * 7;
const lit = (seed % 5) !== 0; // ~80% lit
const warm = (seed % 3) === 0;
const winW = (W - 80) / winCols - 8;
const winH = floorH * 0.5;
const winX = 40 + ci * ((W - 80) / winCols) + 4;
const winY = bodyTop + fi * floorH + (floorH - winH) / 2;
return (
);
});
})}
{/* Flat-roof solar array — top-down perspective, sits above parapet */}
);
}
function Warehouse() {
return (
{Array.from({ length: 30 }).map((_, i) => (
))}
{/* Flat-roof solar array — top-down perspective */}
);
}
function SolarFarm() {
// Contained utility-scale farm: front-facing panel rows on a clean ground plot.
// Footprint is fixed (840×340) and all panels stay inside it.
const W = 840, H = 340;
const cols = 9;
const rows = 7;
const panels = [];
for (let r = 0; r < rows; r++) {
// Slight perspective: deeper rows are smaller and dimmer
const depth = r / (rows - 1);
const rowScale = 1 - depth * 0.32;
const rowOpacity = 1 - depth * 0.40;
const rowY = 40 + r * 40;
// Each row is centered, with shrinking width
const panelW = (W - 80) / cols * rowScale;
const panelH = 26 * rowScale;
const gap = 8 * rowScale;
const totalW = cols * panelW + (cols - 1) * gap;
const startX = (W - totalW) / 2 + (depth * 8); // tiny shift for parallax
for (let c = 0; c < cols; c++) {
const px = startX + c * (panelW + gap);
panels.push(
{Array.from({ length: 20 }).map((_, i) => (
))}
{/* Tracker post */}
{/* Front-facing tilted panel */}
);
}
}
return (
{/* Cell grid (front-facing) */}
{/* Sunset glint sweeping across each panel */}
{/* Ground plot — bounded sandy field, lightly tinted so sunset shows through */}
{/* Subtle perimeter fence line */}
{panels}
{/* Inverter cabinet at bottom-right corner of plot */}
);
}
// ───────────────────────────────────────────────────────────────────
// SCENE 2 — App-based BLE configuration (200+ inverters supported)
// ───────────────────────────────────────────────────────────────────
function Scene2() {
return (
Configure the comms port and join the network. No laptop, no cables.} color={X3.amber} opacity={entry} /> {/* 200+ inverters supported badge */}
200+
Inverters supported
Across every major brand
{['Growatt', 'Solis', 'GoodWe', 'SMA', 'Huawei', 'Sungrow', 'Fronius'].map((n, i) => (
{n}
))}
{/* Timer chip top-right */}
SETUP IN
{timer}
{/* Phone */}
BLE 5.0
9:41
•••• 100%
X3EDGE
· IO
v3.2.1
{stage === 'scan' && }
{stage === 'pair' && }
{stage === 'asset' && }
{stage === 'modbus' && }
{stage === 'connectivity' && }
{stage === 'done' && }
{small}
{big}{accent && {accent}}
{[0,1,2].map(i => {
const phase = ((t * 0.8) + i / 3) % 1;
return (
);
})}
{['X3EDGE-N · A4:21', 'X3EDGE-N · 9F:88'].map((name, i) => {
const reveal = clamp((t - 0.8 - i * 0.4) * 2, 0, 1);
const isHot = i === 0 && t > 1.6;
return (
);
})}
);
}
function ScreenPair({ t }) {
const progress = clamp(t / 1.8, 0, 1);
return (
<>
{name}
{isHot ? 'TAP TO PAIR' : '−42 dBm'}
{Math.round(progress * 100)}%
{progress > 0.2 ? '✓' : '·'} BLE link established
{progress > 0.5 ? '✓' : '·'} Exchange certificates
{progress > 0.85 ? '✓' : '·'} AES-256 channel ready
⌕
Search 200+ models…
{models.map((m, i) => {
const reveal = clamp((t - 0.15 - i * 0.08) * 3, 0, 1);
const isSel = i === selectedIdx && t > 0.8;
return (
{isSel && (
)}
);
})}
{/* "+ more" row */}
);
}
function ScreenModbus({ t }) {
const fields = [
{ k: 'Slave ID', v: '1' },
{ k: 'Baud Rate', v: '9600' },
{ k: 'Parity', v: 'None' },
{ k: 'Data Bits', v: '8' },
];
return (
<>
{m.brand}
{m.model}
+ 193 more models
{fields.map((f, i) => {
const reveal = clamp((t - 0.3 - i * 0.25) * 2.5, 0, 1);
return (
);
})}
{f.k}
{f.v}
TEST READ · 230.4 V · 36.6 A
);
}
function ScreenConnectivity({ t }) {
return (
<>
Wi-Fi · Primary
SITE-042-OPS · WPA3
4G LTE · Backhaul
Auto-failover · −74 dBm
Energy Saver
Throttle telemetry on 4G · 60s interval
Batch + compress · −85% data
Batch + compress · −85% data
Broker (mTLS)
mqtt.synergy.xeeed.io:8883
Device live
Configuration pushed
Publishing to broker
Time elapsed: 4m 12s
Publishing to broker
Time elapsed: 4m 12s
One box, one config.} color={X3.teal} opacity={entry} maxWidth={780} subMaxWidth={760} /> {/* Big counter — moved further down-left */}
{count}
mixed assets per device
INVERTERS
METERS
TRACKERS
BMS
RS-485 · Modbus
{/* Inverter grid */}
{(() => {
// Mixed asset types — distributed across the chain
const assetTypes = [
{ kind: 'inverter', label: 'INV', color: X3.amber, v1: 'P: 8.4 kW', v2: 'V: 230', v3: 'I: 36.6' },
{ kind: 'inverter', label: 'INV', color: X3.amber, v1: 'P: 7.9 kW', v2: 'V: 229', v3: 'I: 34.5' },
{ kind: 'meter', label: 'MTR', color: X3.teal, v1: 'kWh 14282', v2: 'PF 0.98', v3: 'Hz 50.0' },
{ kind: 'inverter', label: 'INV', color: X3.amber, v1: 'P: 8.1 kW', v2: 'V: 231', v3: 'I: 35.1' },
{ kind: 'tracker', label: 'TRK', color: X3.blue, v1: 'AZ: 142°', v2: 'EL: 38°', v3: 'STAT OK' },
{ kind: 'inverter', label: 'INV', color: X3.amber, v1: 'P: 8.0 kW', v2: 'V: 230', v3: 'I: 34.8' },
{ kind: 'bms', label: 'BMS', color: X3.violet, v1: 'SOC 78%', v2: 'V: 412', v3: '24°C' },
{ kind: 'meter', label: 'MTR', color: X3.teal, v1: 'kWh 8104', v2: 'PF 0.99', v3: 'Hz 50.0' },
];
return Array.from({ length: rows }).map((_, r) => (
Array.from({ length: cols }).map((_, c) => {
const idx = r * cols + c;
const asset = assetTypes[idx];
const ix = invStartX + c * gapX;
const iy = invStartY + r * (invH + gapY);
const introT = clamp((lt - 0.6 - idx * 0.08) * 3, 0, 1);
const pulsePhase = (lt + idx * 0.15) % 1.4;
const showPacket = pulsePhase < 0.3;
return (
1.5 ? 1 : 0),
transition: 'opacity 400ms',
}}>Up to 32 nodes per chain
{Array.from({length: 3}).map((_, i) => (
))}
);
}
if (a.kind === 'meter') {
// Round dial / digital meter face — brighter face
return (
{/* Cell grid */}
{Array.from({length: 8}).map((_, i) => (
))}
);
}
return null;
};
return (
{a.label}-{String(idx).padStart(2, '0')}
{renderTop()}
{a.v1}
{a.v2}
{a.v3}
EDGE AI · ON-DEVICE INFERENCE
Every MQTT payload signed with mTLS.} color={X3.teal} opacity={entry} maxWidth={780} subMaxWidth={760} /> {/* Pipeline */}
{['READ', 'NORMALIZE', 'EDGE AI', 'mTLS SIGN', 'PUBLISH'].map((step, i) => {
const stepT = clamp((lt - 0.6 - i * 0.22) / 0.4, 0, 1);
const active = stepT > 0;
const isAI = step === 'EDGE AI';
const isCrypto = step === 'mTLS SIGN';
const c = isAI ? X3.teal : isCrypto ? X3.status : X3.text;
return (
);
})}
{/* MQTT payload */}
{step}
{i < 4 && →
}
mTLS
Telemetry never stops.} color={X3.blue} opacity={entry} maxWidth={780} subMaxWidth={760} />
{wifiDown ? 'Wi-Fi DOWN' : 'Wi-Fi · primary'}
·
{using4G ? '4G ACTIVE · failover' : '4G · standby'}
·
mTLS · QoS 1
FAILED OVER TO 4G · TELEMETRY CONTINUING
)}
CLOUD
UPTIME 99.99%
{[
{ name: 'Broker · ap-south-1', kind: 'broker' },
{ name: 'Broker · eu-west-1', kind: 'broker' },
{ name: 'TimescaleDB · cluster', kind: 'db' },
{ name: 'AI Inference · GPU', kind: 'ai' },
].map((s, i) => {
const blink = (Math.floor(t * 2) + i) % 4 === 0;
return (
);
})}
{/* Data flow indicator */}
{s.kind}
{s.name}
INGEST · LAST 60s
{Math.round(12400 + Math.sin(t * 1.5) * 200).toLocaleString()}
msg
SOC 2 · ISO 27001 · GDPR · MQTT 5.0
only events and aggregates reach the cloud, drastically lower cloud spend.} color={X3.teal} opacity={entry} maxWidth={1100} subMaxWidth={820} /> {/* SVG overlay for funnel + particle streams */} {/* LABELS along the flow */} {/* Stage 1: Raw telemetry — sits inside the funnel body, closer to the narrow end */}
Raw telemetry · ~10k pts/min
100%
volts · amps · temps · strings
X3EDGE · Inference + filter
{m}
))}
{/* Stage 3: Events to cloud */}
Events · aggregates · alerts
10%
only what matters
Training · Analytics
{/* HERO outcome strip — bottom */}
10× lower cloud spend.
Select between minute-level data to cloud
or only edge AI-detected events
or only edge AI-detected events
{allAlerts.map((a, i) => {
const reveal = clamp((lt - 0.8 - i * 0.25) * 2.5, 0, 1);
const sevColor = a.sev === 'critical' ? '#ff5555' : a.sev === 'warning' ? X3.amber : X3.blue;
const sevBg = a.sev === 'critical' ? 'rgba(255,80,80,0.08)' : a.sev === 'warning' ? `${X3.amber}11` : `${X3.blue}11`;
return (
);
})}
);
}
function AlertIcon({ kind, color }) {
const size = 22;
const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round' };
const wrap = (children) => (
{a.msg}
· {a.site}
{a.detail}
{a.age}
{children}
);
if (kind === 'comm') return wrap(
);
if (kind === 'soiling') return wrap(
);
if (kind === 'underperf') return wrap(
);
if (kind === 'forecast') return wrap(
);
if (kind === 'fault') return wrap(
);
return wrap();
}
function RupeeStack({ label, count, color, sub, t, highlight }) {
// Render `count` stacked ₹ symbols growing in
const rows = [];
for (let i = 0; i < count; i++) {
const reveal = clamp((t * count - i) / 0.6, 0, 1);
rows.push(
₹
);
}
return (
{rows}
{label}
{sub}
{label}
{value}
{sub}
{/* Pulsing glow halo behind logo */}
{/* Radiating rays */}
Two paths in.
Pick whichever fits your fleet.
{/* Two cards: API path & X3EDGE path */}
Pick whichever fits your fleet.
{/* Card 1: API */}
{/* Card 2: X3EDGE Device */}
OPTION A · Already on a portal?
Connect via API.
Use your existing Growatt, Solis, GoodWe, SMA or Sungrow portal credentials. SynergyOT pulls telemetry from each vendor cloud.
{/* Code snippet */}
// vendor: growatt
POST /v1/sources/connect
{'{'} "api_key": "***" {'}'}
✓ 4 inverters discovered
{/* Animated MNRE shield — top-right corner */}
{/* Footnote — explains the asterisk on MNRE-Compliant* */}
{/* Pulsing halo */}
OPTION B · No portal?
Plug in the X3EDGE device.
For sites without vendor portals, or with mixed-brand fleets. The X3EDGE-N is MNRE-Compliant* for Indian deployments under the ALMM List-II framework.
{/* Bullet list */}
· Vendor agnostic · 200+ inverter models
· Eligible for PM Surya Ghar / KUSUM subsidies
· Edge AI on-device · works on selected legacy gear
* In compliance with upcoming MNRE Firmware guidelines for data loggers.
Not just
solar inverters.
solar inverters.
X3EDGE-N speaks Modbus, CAN, OCPP and IEC 61850, connecting trackers, BMS, EV chargers and meters to SynergyOT.
{/* Brand strip */}
MODBUS · CAN · OCPP · IEC 61850 · BACNET
{a.name}
{/* SynergyOT logo — large, prominent */}
{/* Live capacity counter */}
Powered by
X3EDGE-N
X3EDGE-N
From kW to multi-MW.
Built for EPCs and O&M teams. One affordable device,
one platform, one workflow that scales with every
project you win.
▸ FLEET CAPACITY · LIVE
{capStr}
↑ {(growthT * 100).toFixed(0)}% growth · {tilesShown} sites monitored
{[
{ label: 'Residential · 8 kW', active: stage === 0, color: X3.amber },
{ label: 'C&I · 800 kW', active: stage === 1, color: X3.teal },
{ label: 'Utility · 24 MW', active: stage === 2, color: X3.blue },
].map((s, i) => (
{/* Right side: growing site grid */}
{s.label}
))}
YOUR PORTFOLIO · ALL SITES, ONE PANE
{/* 12 × 8 grid of site tiles, lighting up over time */}
{tiles.map(({ i, col, row }) => {
const active = i < tilesShown;
const fadeIn = active ? clamp((lt - (i / 96) * 6.5) * 6, 0, 1) : 0;
// Different asset color per tile
const colors = [X3.amber, X3.amber, X3.teal, X3.blue, X3.amber, X3.violet];
const tc = colors[i % colors.length];
// Mini live indicator pulse
const pulsePhase = ((lt * 1.2 + i * 0.07) % 1);
const pulseOn = pulsePhase < 0.4;
return (
{active && (
<>
{/* Mini bar chart */}
);
})}
{[0, 1, 2, 3].map(b => {
const h = 30 + Math.abs(Math.sin(lt * 1.5 + i * 0.3 + b * 0.5)) * 70;
return (
);
})}
{/* Live LED */}
)}
Win the next project. Onboard it in minutes.
X3EDGE-N · SYNERGYOT · BUILT IN INDIA · MNRE COMPLIANT
xeeed.io →
{/* Status LED — pulsing colored dot, masking over the device's STATUS indicator */}
{showLed && }
{/* Outer halo bloom (more dramatic) */}
{showLed && }
);
}
function PathFlow({ from, via, to, color, label, t, packetOffset = 0, active = true, dim = false }) {
const path = `M ${from.x} ${from.y} C ${(from.x + via.x) / 2} ${from.y}, ${(from.x + via.x) / 2} ${via.y}, ${via.x} ${via.y} S ${(via.x + to.x) / 2} ${to.y}, ${to.x} ${to.y}`;
const NUM = 4;
const sample = (u) => {
if (u < 0.5) {
const s = u * 2;
const cx1 = (from.x + via.x) / 2, cy1 = from.y;
const cx2 = (from.x + via.x) / 2, cy2 = via.y;
const x = (1-s)**3 * from.x + 3*(1-s)**2*s*cx1 + 3*(1-s)*s**2*cx2 + s**3 * via.x;
const y = (1-s)**3 * from.y + 3*(1-s)**2*s*cy1 + 3*(1-s)*s**2*cy2 + s**3 * via.y;
return { x, y };
} else {
const s = (u - 0.5) * 2;
const cx1 = (via.x + to.x) / 2, cy1 = via.y;
const cx2 = (via.x + to.x) / 2, cy2 = to.y;
const x = (1-s)**3 * via.x + 3*(1-s)**2*s*cx1 + 3*(1-s)*s**2*cx2 + s**3 * to.x;
const y = (1-s)**3 * via.y + 3*(1-s)**2*s*cy1 + 3*(1-s)*s**2*cy2 + s**3 * to.y;
return { x, y };
}
};
const dimOp = dim ? 0.2 : 1;
return (
<>
{active && Array.from({ length: NUM }).map((_, i) => {
const u = ((t * 0.4 + packetOffset + i / NUM) % 1);
const p = sample(u);
const fadeIn = clamp(u / 0.05, 0, 1);
const fadeOut = u > 0.95 ? clamp((u - 0.95) / 0.05, 0, 1) : 0;
const opP = fadeIn * (1 - fadeOut);
return (
{label}
);
}
function Router({ x, y, kind, t, disabled, active }) {
const baseColor = kind === 'wifi' ? X3.blue : X3.violet;
const color = disabled ? '#666' : baseColor;
const label = kind === 'wifi' ? 'WI-FI AP' : '4G TOWER';
return (
{!disabled && }
{kind === 'wifi' ? (
) : (
)}
);
}
// ───────────────────────────────────────────────────────────────────
// Master scene
// ───────────────────────────────────────────────────────────────────
function MasterScene() {
const t = useTime();
React.useEffect(() => {
const root = document.querySelector('[data-screen-label]');
if (root) root.setAttribute('data-screen-label', `t=${Math.floor(t)}s`);
}, [Math.floor(t)]);
return (
<>
{label}