{ "id": "mui_pulse_graph", "name": "Pulse Graph", "width": 1200, "height": 640, "cornerRadius": 0, "fit": "Layout", "backgroundColor": "#07090e", "opacity": 1, "x": -600, "y": -320, "responsive": { "enabled": true, "mode": "constraint", "width": { "type": "fixed" }, "height": { "type": "fixed" }, "maintainAspectRatio": false, "scaleObjects": false, "breakpoints": [ { "id": "bp_mobile", "name": "Mobile", "minWidth": 0, "maxWidth": 599 }, { "id": "bp_tablet", "name": "Tablet", "minWidth": 600, "maxWidth": 1023 }, { "id": "bp_desktop", "name": "Desktop", "minWidth": 1024 } ] }, "layoutProps": { "mode": "linear", "direction": "vertical", "gap": 0, "padding": { "top": 0, "right": 0, "bottom": 0, "left": 0 }, "alignItems": "stretch", "layoutSizingHorizontal": "fixed", "layoutSizingVertical": "fixed" }, "seo": { "title": "Pulse Graph — Exode Motion UI", "description": "A live vector telemetry and throughput graph with animated bezier wave curves, vertical cursor scanning, floating metric tooltip, and click-to-inject data spikes." }, "stateMachine": { "inputs": [ { "id": "in_title", "name": "title", "value": { "type": "Text", "value": "Live Telemetry & Throughput", "defaultValue": "Live Telemetry & Throughput" } }, { "id": "in_unit", "name": "unit", "value": { "type": "Text", "value": "req/s", "defaultValue": "req/s" } }, { "id": "in_peakVal", "name": "peakVal", "value": { "type": "Number", "value": 9840, "defaultValue": 9840 } }, { "id": "in_speed", "name": "speed", "value": { "type": "Number", "value": 1, "defaultValue": 1 } }, { "id": "in_accent", "name": "accent", "value": { "type": "Text", "value": "#00f2fe", "defaultValue": "#00f2fe" } }, { "id": "in_accent2", "name": "accent2", "value": { "type": "Text", "value": "#4facfe", "defaultValue": "#4facfe" } }, { "id": "in_bg", "name": "bg", "value": { "type": "Text", "value": "#07090e", "defaultValue": "#07090e" } } ], "layers": [ { "name": "Base", "entryStateId": "s_idle", "states": [ { "id": "s_idle", "name": "Idle", "loop": true, "transitions": [] } ] } ], "logicNodes": [] }, "animations": [], "physics": { "enabled": false, "gravity": { "x": 0, "y": 9.8 } }, "animationFlow": [], "navigation": [], "stateVariables": [], "objects": [ { "id": "stage", "name": "Stage", "type": "Group", "transform": { "x": 0, "y": 0, "rotation": 0, "scale_x": 1, "scale_y": 1, "opacity": 1, "skew_x": 0, "skew_y": 0 }, "width": 1200, "height": 640, "geometry": { "type": "Rectangle", "width": 1200, "height": 640, "cornerRadius": 0 }, "cornerRadius": 0, "children": [], "clipContent": true, "style": { "fill": { "type": "Solid", "color": "#07090e", "opacity": 1 }, "effects": [ { "id": "fx_pulse-graph", "type": "CustomEffect", "name": "Pulse Graph", "isEnabled": true, "params": {}, "code": "/* Shared by every motion-ui effect (prepended to each one).\n Rules for this file and the effects: the .bexode compiler minifies effect\n code, so use explicit semicolons, block comments only, and never write a\n minus followed by a negative value (it collapses to a decrement). */\n\n/* Read a live state-machine input, falling back to a default. */\nfunction inp(env, name, fallback) {\n const v = env.inputs ? env.inputs[name] : undefined;\n if (v === undefined || v === null || v === '') return fallback;\n if (typeof fallback === 'number') {\n const n = Number(v);\n return isFinite(n) ? n : fallback;\n }\n if (typeof fallback === 'boolean') return v === true || v === 1 || v === 'true';\n return v;\n}\n\n/* '#rgb' / '#rrggbb' to [r, g, b]; anything else falls back to white. */\nfunction rgbOf(hex) {\n let h = String(hex || '').trim().replace('#', '');\n if (h.length === 3) h = h[0] + h[0] + h[1] + h[1] + h[2] + h[2];\n if (!/^[0-9a-fA-F]{6}$/.test(h)) return [255, 255, 255];\n const n = parseInt(h, 16);\n return [(n >> 16) & 255, (n >> 8) & 255, n & 255];\n}\n\nfunction rgba(hex, a) {\n const c = rgbOf(hex);\n return 'rgba(' + c[0] + ',' + c[1] + ',' + c[2] + ',' + Math.max(0, Math.min(1, a)) + ')';\n}\n\nfunction mix(a, b, t) {\n const x = rgbOf(a), y = rgbOf(b);\n const r = Math.round(x[0] + (y[0] - x[0]) * t);\n const g = Math.round(x[1] + (y[1] - x[1]) * t);\n const bl = Math.round(x[2] + (y[2] - x[2]) * t);\n return '#' + ((1 << 24) + (r << 16) + (g << 8) + bl).toString(16).slice(1);\n}\n\n/* A soft round glow, rendered once per colour and blitted with drawImage\n (much cheaper than shadowBlur on every particle). */\nconst __glows = {};\nfunction glowSprite(hex) {\n if (__glows[hex]) return __glows[hex];\n const s = 64;\n const c = document.createElement('canvas');\n c.width = s; c.height = s;\n const g = c.getContext('2d');\n const gr = g.createRadialGradient(s / 2, s / 2, 0, s / 2, s / 2, s / 2);\n gr.addColorStop(0, rgba(hex, 1));\n gr.addColorStop(0.18, rgba(hex, 0.55));\n gr.addColorStop(0.45, rgba(hex, 0.14));\n gr.addColorStop(1, rgba(hex, 0));\n g.fillStyle = gr;\n g.fillRect(0, 0, s, s);\n __glows[hex] = c;\n return c;\n}\n\nfunction glow(ctx, hex, x, y, r, a) {\n if (r <= 0 || a <= 0) return;\n ctx.globalAlpha = Math.min(1, a);\n ctx.drawImage(glowSprite(hex), x - r, y - r, r * 2, r * 2);\n ctx.globalAlpha = 1;\n}\n\n/* Frame clock: seconds since start and a clamped delta. */\nfunction tick(S) {\n const now = performance.now();\n if (!S.t0) { S.t0 = now; S.last = now; }\n S.dt = Math.min(0.05, Math.max(0.001, (now - S.last) / 1000));\n S.last = now;\n S.age = (now - S.t0) / 1000;\n return S.dt;\n}\n\n/* Deterministic pseudo-random so layouts are stable across resizes. */\nfunction rng(seed) {\n let s = seed >>> 0 || 1;\n return function () {\n s = (s * 1664525 + 1013904223) >>> 0;\n return s / 4294967296;\n };\n}\n\nfunction ease(x) { return x < 0.5 ? 4 * x * x * x : 1 + (Math.pow(2 * x - 2, 3)) / 2; }\nfunction clamp(v, a, b) { return v < a ? a : v > b ? b : v; }\n\nconst SANS = 'Inter, Helvetica, Arial, sans-serif';\nconst MONO = 'ui-monospace, Menlo, monospace';\n\nfunction roundRect(ctx, x, y, w, h, r) {\n r = Math.min(r, w / 2, h / 2);\n ctx.beginPath();\n ctx.moveTo(x + r, y);\n ctx.arcTo(x + w, y, x + w, y + h, r);\n ctx.arcTo(x + w, y + h, x, y + h, r);\n ctx.arcTo(x, y + h, x, y, r);\n ctx.arcTo(x, y, x + w, y, r);\n ctx.closePath();\n}\n\n/* Shared backdrop: flat colour, soft vignette and fine grain. */\nfunction backdrop(ctx, W, H, bg, tint, amt) {\n ctx.fillStyle = bg;\n ctx.fillRect(0, 0, W, H);\n if (tint && amt > 0) {\n const gr = ctx.createRadialGradient(W / 2, H * 0.45, 0, W / 2, H * 0.45, Math.max(W, H) * 0.7);\n gr.addColorStop(0, rgba(tint, 0.10 * amt));\n gr.addColorStop(1, rgba(tint, 0));\n ctx.fillStyle = gr;\n ctx.fillRect(0, 0, W, H);\n }\n const vg = ctx.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.3, W / 2, H / 2, Math.max(W, H) * 0.8);\n vg.addColorStop(0, 'rgba(0,0,0,0)');\n vg.addColorStop(1, 'rgba(0,0,0,0.45)');\n ctx.fillStyle = vg;\n ctx.fillRect(0, 0, W, H);\n}\n\n/* Greedy word wrap with the current ctx.font. */\nfunction wrap(ctx, text, maxW) {\n const out = [];\n String(text).split('\\n').forEach(function (para) {\n const words = para.split(' ');\n let cur = '';\n for (let i = 0; i < words.length; i++) {\n const next = cur ? cur + ' ' + words[i] : words[i];\n if (cur && ctx.measureText(next).width > maxW) { out.push(cur); cur = words[i]; } else cur = next;\n }\n out.push(cur);\n });\n return out;\n}\n\n/* Largest font size (up to max) at which text wraps into maxLines within maxW. */\nfunction fitFont(ctx, text, weight, family, maxW, maxLines, max, min) {\n let fs = max;\n while (fs > min) {\n ctx.font = weight + ' ' + fs + 'px ' + family;\n if (wrap(ctx, text, maxW).length <= maxLines) break;\n fs = fs * 0.92;\n }\n ctx.font = weight + ' ' + fs + 'px ' + family;\n return fs;\n}\n\n/* Smoothed pointer that idles along a slow figure-eight when the cursor is away. */\nfunction follow(S, env, W, H, k) {\n const pt = env.pointer || {};\n const t = S.age || 0;\n const tx = pt.isHovered ? pt.localX : W / 2 + Math.sin(t * 0.37) * W * 0.3;\n const ty = pt.isHovered ? pt.localY : H / 2 + Math.sin(t * 0.74) * H * 0.22;\n if (S.px === undefined) { S.px = tx; S.py = ty; }\n S.px += (tx - S.px) * Math.min(1, S.dt * (k || 6));\n S.py += (ty - S.py) * Math.min(1, S.dt * (k || 6));\n S.inside = !!pt.isHovered;\n return pt;\n}\n\n/* Optional centred headline over a background effect. */\nfunction title(ctx, W, H, text, sub, ink, accent, bg) {\n if (!text) return;\n if (bg) {\n /* Soft scrim so the headline reads over busy motion. */\n const sc = ctx.createRadialGradient(W / 2, H / 2, 0, W / 2, H / 2, Math.min(W * 0.5, 560));\n sc.addColorStop(0, rgba(bg, 0.72));\n sc.addColorStop(1, rgba(bg, 0));\n ctx.fillStyle = sc;\n ctx.fillRect(0, 0, W, H);\n }\n ctx.textAlign = 'center';\n ctx.textBaseline = 'alphabetic';\n const maxW = Math.min(W * 0.86, 900);\n const fs = fitFont(ctx, text, 600, SANS, maxW, 2, clamp(W * 0.065, 26, 72), 16);\n const lines = wrap(ctx, text, maxW);\n const lh = fs * 1.08;\n const y0 = H / 2 - (lines.length * lh) / 2 + fs * 0.8 - (sub ? fs * 0.35 : 0);\n ctx.fillStyle = ink;\n lines.forEach(function (l, i) { ctx.fillText(l, W / 2, y0 + i * lh); });\n if (sub) {\n ctx.font = '500 ' + clamp(fs * 0.24, 11, 15) + 'px ' + MONO;\n ctx.fillStyle = rgba(accent, 0.85);\n ctx.fillText(String(sub).toUpperCase(), W / 2, y0 + (lines.length - 1) * lh + fs * 0.9);\n }\n}\n\n/* Pulse Graph: an interactive live vector metric and telemetry graph.\n Features a real-time animated spline wave with gradient area fill,\n cursor scrub with vertical scanning beam, frosted glass tooltip readout,\n and click-to-inject metric spikes with shockwave ripple physics. */\nlet S = null;\n\nfunction render(ctx, env) {\n const W = env.width, H = env.height;\n if (!S) {\n S = {\n points: [],\n scrubX: -1,\n scrubRatio: 0.75,\n activeVal: 0,\n spikes: [],\n wasDown: false,\n ripples: [],\n };\n /* Initialize baseline 32 telemetry data points */\n for (let i = 0; i < 36; i++) {\n S.points.push(0.35 + Math.sin(i * 0.4) * 0.2 + (Math.random() * 0.15));\n }\n }\n const dt = tick(S);\n\n const title = String(inp(env, 'title', 'Live Telemetry & Throughput'));\n const unit = String(inp(env, 'unit', 'req/s'));\n const peakVal = inp(env, 'peakVal', 9840);\n const speed = clamp(inp(env, 'speed', 1), 0.1, 4);\n const accent = inp(env, 'accent', '#00f2fe');\n const accent2 = inp(env, 'accent2', '#4facfe');\n const bg = inp(env, 'bg', '#07090e');\n\n ctx.save();\n ctx.translate(-W / 2, -H / 2);\n\n /* Clean Dark Canvas Backdrop */\n ctx.fillStyle = bg;\n ctx.fillRect(0, 0, W, H);\n\n const cx = W / 2, cy = H / 2;\n const isMobile = W < 600;\n const pt = env.pointer || {};\n const px = pt.isHovered ? pt.localX : -9999;\n const py = pt.isHovered ? pt.localY : -9999;\n const isDown = !!(pt.isDown || pt.down);\n\n /* Graph Container Bounds */\n const cardW = Math.min(W * 0.94, 980);\n const cardH = Math.max(240, Math.min(H * 0.88, 520));\n const cardX = cx - cardW / 2;\n const cardY = cy - cardH / 2;\n\n /* Card Base */\n ctx.fillStyle = 'rgba(14, 18, 28, 0.75)';\n roundRect(ctx, cardX, cardY, cardW, cardH, 20);\n ctx.fill();\n\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.08)';\n ctx.lineWidth = 1.2;\n roundRect(ctx, cardX, cardY, cardW, cardH, 20);\n ctx.stroke();\n\n /* Header inside card */\n const headerH = isMobile ? 64 : 76;\n ctx.font = '700 ' + (isMobile ? 15 : 18) + 'px ' + SANS;\n ctx.textAlign = 'left';\n ctx.textBaseline = 'top';\n ctx.fillStyle = '#ffffff';\n ctx.fillText(title, cardX + 24, cardY + 22);\n\n /* Current Active Metric Readout */\n const displayVal = Math.round(peakVal * (0.3 + S.activeVal * 0.7));\n ctx.font = '800 ' + (isMobile ? 22 : 28) + 'px ' + SANS;\n ctx.textAlign = 'right';\n ctx.fillStyle = '#ffffff';\n ctx.fillText(displayVal.toLocaleString() + ' ' + unit, cardX + cardW - 24, cardY + 16);\n\n ctx.font = '600 11px ' + MONO;\n ctx.fillStyle = rgba(accent, 0.9);\n ctx.fillText('STATUS: REALTIME STREAMING', cardX + cardW - 24, cardY + (isMobile ? 44 : 50));\n\n /* Graph Plotting Area */\n const plotPadX = isMobile ? 24 : 36;\n const plotX = cardX + plotPadX;\n const plotY = cardY + headerH + 16;\n const plotW = cardW - plotPadX * 2;\n const plotH = cardH - headerH - 56;\n\n /* Grid lines */\n ctx.strokeStyle = 'rgba(255, 255, 255, 0.04)';\n ctx.lineWidth = 1;\n for (let gy = 0; gy <= 4; gy++) {\n const yLine = plotY + (gy / 4) * plotH;\n ctx.beginPath();\n ctx.moveTo(plotX, yLine);\n ctx.lineTo(plotX + plotW, yLine);\n ctx.stroke();\n }\n\n /* Real-time wave oscillation */\n const count = S.points.length;\n for (let i = 0; i < count; i++) {\n const phase = S.age * 2.5 * speed + (i * 0.35);\n const wave = Math.sin(phase) * 0.08 + Math.cos(phase * 1.7) * 0.05;\n S.points[i] = clamp(S.points[i] + wave * dt * 3, 0.12, 0.92);\n }\n\n /* Cursor Scrubbing */\n const inPlot = pt.isHovered && px >= plotX && px <= plotX + plotW && py >= plotY - 10 && py <= plotY + plotH + 20;\n if (inPlot) {\n const targetRatio = (px - plotX) / plotW;\n S.scrubRatio += (targetRatio - S.scrubRatio) * Math.min(1, dt * 14);\n } else {\n /* Idle slow scan */\n S.scrubRatio = (0.5 + Math.sin(S.age * 0.8 * speed) * 0.35);\n }\n\n /* Click to inject metric spike */\n if (!S.wasDown && isDown && inPlot) {\n const clickIdx = Math.floor(S.scrubRatio * (count - 1));\n S.points[clickIdx] = 0.96;\n if (clickIdx > 0) S.points[clickIdx - 1] = Math.min(0.9, S.points[clickIdx - 1] + 0.3);\n if (clickIdx < count - 1) S.points[clickIdx + 1] = Math.min(0.9, S.points[clickIdx + 1] + 0.3);\n\n S.ripples.push({ x: px, y: py, r: 0, alpha: 0.9, color: accent });\n if (typeof env.emit === 'function') env.emit('dataSpike', displayVal);\n }\n S.wasDown = isDown;\n\n /* Build Smooth Bezier Curve Path */\n const coords = [];\n for (let i = 0; i < count; i++) {\n const ptX = plotX + (i / (count - 1)) * plotW;\n const ptY = plotY + plotH - S.points[i] * plotH;\n coords.push({ x: ptX, y: ptY });\n }\n\n /* Gradient Fill under the curve */\n ctx.save();\n ctx.beginPath();\n ctx.moveTo(coords[0].x, plotY + plotH);\n ctx.lineTo(coords[0].x, coords[0].y);\n\n for (let i = 0; i < count - 1; i++) {\n const p0 = coords[i];\n const p1 = coords[i + 1];\n const mx = (p0.x + p1.x) / 2;\n const my = (p0.y + p1.y) / 2;\n ctx.quadraticCurveTo(p0.x, p0.y, mx, my);\n }\n ctx.lineTo(coords[count - 1].x, coords[count - 1].y);\n ctx.lineTo(coords[count - 1].x, plotY + plotH);\n ctx.closePath();\n\n const areaGrad = ctx.createLinearGradient(0, plotY, 0, plotY + plotH);\n areaGrad.addColorStop(0, rgba(accent, 0.35));\n areaGrad.addColorStop(0.6, rgba(accent2, 0.12));\n areaGrad.addColorStop(1, 'rgba(0, 242, 254, 0)');\n ctx.fillStyle = areaGrad;\n ctx.fill();\n\n /* Glowing Spline Stroke */\n ctx.beginPath();\n ctx.moveTo(coords[0].x, coords[0].y);\n for (let i = 0; i < count - 1; i++) {\n const p0 = coords[i];\n const p1 = coords[i + 1];\n const mx = (p0.x + p1.x) / 2;\n const my = (p0.y + p1.y) / 2;\n ctx.quadraticCurveTo(p0.x, p0.y, mx, my);\n }\n ctx.lineTo(coords[count - 1].x, coords[count - 1].y);\n\n const strokeGrad = ctx.createLinearGradient(plotX, 0, plotX + plotW, 0);\n strokeGrad.addColorStop(0, accent2);\n strokeGrad.addColorStop(0.5, accent);\n strokeGrad.addColorStop(1, '#ffffff');\n ctx.strokeStyle = strokeGrad;\n ctx.lineWidth = 3;\n ctx.stroke();\n\n /* ---------- Vertical Scrub Line & Indicator ---------- */\n const scrubCurX = plotX + S.scrubRatio * plotW;\n const scrubIdx = clamp(Math.floor(S.scrubRatio * (count - 1)), 0, count - 2);\n const subRatio = (S.scrubRatio * (count - 1)) - scrubIdx;\n const interpY = coords[scrubIdx].y + (coords[scrubIdx + 1].y - coords[scrubIdx].y) * subRatio;\n S.activeVal += ((1 - (interpY - plotY) / plotH) - S.activeVal) * Math.min(1, dt * 10);\n\n /* Vertical Scanning Beam */\n ctx.strokeStyle = rgba('#ffffff', 0.25);\n ctx.lineWidth = 1;\n ctx.setLineDash([4, 4]);\n ctx.beginPath();\n ctx.moveTo(scrubCurX, plotY);\n ctx.lineTo(scrubCurX, plotY + plotH);\n ctx.stroke();\n ctx.setLineDash([]);\n\n /* Active Scrub Node Glow */\n glow(ctx, accent, scrubCurX, interpY, 28, 0.85);\n\n ctx.fillStyle = '#ffffff';\n ctx.beginPath();\n ctx.arc(scrubCurX, interpY, 6, 0, Math.PI * 2);\n ctx.fill();\n\n ctx.strokeStyle = accent;\n ctx.lineWidth = 2.5;\n ctx.beginPath();\n ctx.arc(scrubCurX, interpY, 6, 0, Math.PI * 2);\n ctx.stroke();\n\n /* Floating Frosted Tooltip above cursor node */\n const tipW = 100;\n const tipH = 34;\n const tipX = clamp(scrubCurX - tipW / 2, plotX, plotX + plotW - tipW);\n const tipY = Math.max(plotY - 6, interpY - tipH - 14);\n\n ctx.fillStyle = 'rgba(11, 14, 22, 0.9)';\n roundRect(ctx, tipX, tipY, tipW, tipH, 8);\n ctx.fill();\n\n ctx.strokeStyle = rgba(accent, 0.6);\n ctx.lineWidth = 1;\n roundRect(ctx, tipX, tipY, tipW, tipH, 8);\n ctx.stroke();\n\n ctx.font = '700 13px ' + MONO;\n ctx.fillStyle = '#ffffff';\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n ctx.fillText(displayVal.toLocaleString(), tipX + tipW / 2, tipY + tipH / 2);\n\n ctx.restore();\n\n /* Ripples from spikes */\n for (let ri = S.ripples.length - 1; ri >= 0; ri--) {\n const rip = S.ripples[ri];\n rip.r += dt * 160;\n rip.alpha -= dt * 2.2;\n if (rip.alpha <= 0) {\n S.ripples.splice(ri, 1);\n continue;\n }\n ctx.strokeStyle = rgba(rip.color, rip.alpha);\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.arc(rip.x, rip.y, rip.r, 0, Math.PI * 2);\n ctx.stroke();\n }\n\n ctx.restore();\n}\n" } ] }, "layoutProps": { "layoutSizingHorizontal": "fill", "layoutSizingVertical": "fill" }, "zIndex": 1, "interactions": [] } ] }