// primitives.jsx — Reusable visual elements for X3EDGE data flow animation // ── Color tokens (from device) ───────────────────────────────────── const X3 = { bg: '#0a0a0a', bg2: '#141414', panel: '#1a1a1a', border: 'rgba(255,255,255,0.08)', borderHi: 'rgba(255,255,255,0.18)', text: '#f5f5f0', textDim: 'rgba(245,245,240,0.55)', textMute: 'rgba(245,245,240,0.35)', orange: '#ff4d1a', // top of device frame amber: '#ff9d2a', // bottom of device frame teal: '#2dd4d4', // xeeed.io dot color status: '#22c55e', // green status LED blue: '#3b82f6', // wifi violet: '#a855f7', // 4g }; const monoFont = "'JetBrains Mono', ui-monospace, SFMono-Regular, monospace"; const sansFont = "'Inter', -apple-system, system-ui, sans-serif"; // ── Glow ring around device frame ────────────────────────────────── function FrameGlow({ x, y, w, h, intensity = 1 }) { return (
); } // ── Solar panel (CSS grid of cells) ──────────────────────────────── function SolarPanel({ x, y, w = 220, h = 130, tilt = -8, sunlight = 1 }) { const cols = 6, rows = 4; const cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { cells.push(
); } } return (
{cells}
{/* support */}
); } // ── Inverter box ─────────────────────────────────────────────────── function Inverter({ x, y, w = 170, h = 200, label = 'INVERTER', pulse = 0 }) { return (
{label}
{/* Display screen */}
P: 8.42 kW
V: 480.2 V
I: 17.5 A
η: 98.4%
{/* LEDs */}
{[X3.status, '#fbbf24', '#3b82f6'].map((c, i) => (
))}
{/* Modbus port */}
); } // ── Data packet (small floating chip) ────────────────────────────── function DataPacket({ x, y, label, value, color = X3.teal, scale = 1, opacity = 1 }) { return (
{label} {value}
); } // ── Connection wire (SVG path) ───────────────────────────────────── function Wire({ x1, y1, x2, y2, color = X3.borderHi, dashed = false, dashOffset = 0, glow = false }) { const dx = x2 - x1; const dy = y2 - y1; const cx1 = x1 + dx * 0.5; const cy1 = y1; const cx2 = x1 + dx * 0.5; const cy2 = y2; const path = `M ${x1} ${y1} C ${cx1} ${cy1}, ${cx2} ${cy2}, ${x2} ${y2}`; return ( {glow && ( )} ); } // ── Tiny label (annotation) ──────────────────────────────────────── function Annotation({ x, y, text, color = X3.textDim, size = 11, opacity = 1, align = 'left' }) { return (
{text}
); } // ── Heading text ─────────────────────────────────────────────────── function Heading({ x, y, text, size = 32, color = X3.text, opacity = 1, weight = 700, align = 'left', tracking = '-0.02em' }) { return (
{text}
); } // ── Pill badge ───────────────────────────────────────────────────── function Pill({ x, y, text, color = X3.teal, opacity = 1, dot = true }) { return (
{dot &&
} {text}
); } // ── Signal wave (concentric arcs) ────────────────────────────────── function SignalWave({ x, y, t, color = X3.blue, count = 3, maxR = 80, period = 1.5 }) { return ( {Array.from({ length: count }).map((_, i) => { const phase = ((t / period) + i / count) % 1; const r = 8 + phase * (maxR - 8); const op = (1 - phase) * 0.7; return ( ); })} ); } // ── Terminal-style code block ────────────────────────────────────── function CodeBlock({ x, y, w, h, lines, opacity = 1, scrollT = 0 }) { return (
{/* Header */}
MQTT.PAYLOAD
{lines.map((line, i) => { const reveal = scrollT > i * 0.08; return (
{line.text}
); })}
); } // ── Cloud / server stack ─────────────────────────────────────────── function CloudPlatform({ x, y, w = 360, h = 260, t = 0, dataPulse = 0 }) { return (
{/* Header */}
SynergyOT
LIVE
{/* KPI tiles */}
{/* Mini chart */} {/* Status row */}
● MQTT/CONNECTED · QoS 1 · BROKER OK
); } function Tile({ label, value, unit, t }) { // Tiny flicker on the last digit const flick = Math.floor(t * 8) % 10; const display = `${value}`; return (
{label}
{display}
{unit}
); } function MiniChart({ t }) { // Build a smooth bumping line + bars const W = 320, H = 70; const N = 32; const pts = []; for (let i = 0; i < N; i++) { const phase = i / N; const drift = Math.min(1, t / 2); const y = 0.55 + 0.18 * Math.sin(phase * 6 + t * 0.6) + 0.08 * Math.sin(phase * 13 + t * 1.2); const x = phase * W; const yy = (1 - y) * H * drift + (1 - drift) * H * 0.5; pts.push([x, yy]); } const path = pts.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(' '); const areaPath = path + ` L ${W} ${H} L 0 ${H} Z`; return (
{/* moving dot at end */}
); } // Export all globally Object.assign(window, { X3, monoFont, sansFont, FrameGlow, SolarPanel, Inverter, DataPacket, Wire, Annotation, Heading, Pill, SignalWave, CodeBlock, CloudPlatform, });