{ "id": "mg_radar", "name": "Radar", "width": 1440, "height": 810, "cornerRadius": 0, "fit": "Layout", "backgroundColor": "#030805", "opacity": 1, "x": -720, "y": -405, "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": "Radar — Exode Motion Graphics", "description": "A phosphor sweep that paints contacts as it passes, with range rings, bearings and a live cursor readout. Click to drop a waypoint." }, "stateMachine": { "inputs": [ { "id": "in_title", "name": "title", "value": { "type": "Text", "value": "SECTOR 7 · PASSIVE", "defaultValue": "SECTOR 7 · PASSIVE" } }, { "id": "in_contacts", "name": "contacts", "value": { "type": "Number", "value": 9, "defaultValue": 9 } }, { "id": "in_speed", "name": "speed", "value": { "type": "Number", "value": 1, "defaultValue": 1 } }, { "id": "in_accent", "name": "accent", "value": { "type": "Text", "value": "#7dff9b", "defaultValue": "#7dff9b" } }, { "id": "in_bg", "name": "bg", "value": { "type": "Text", "value": "#030805", "defaultValue": "#030805" } }, { "id": "in_text", "name": "text", "value": { "type": "Text", "value": "#d9ffe2", "defaultValue": "#d9ffe2" } } ], "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": 1440, "height": 810, "geometry": { "type": "Rectangle", "width": 1440, "height": 810, "cornerRadius": 0 }, "cornerRadius": 0, "children": [], "clipContent": true, "style": { "fill": { "type": "Solid", "color": "#030805", "opacity": 1 }, "effects": [ { "id": "fx_radar", "type": "CustomEffect", "name": "Radar", "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,\\u0020Helvetica,\\u0020Arial,\\u0020sans-serif';\nconst MONO = 'ui-monospace,\\u0020Menlo,\\u0020monospace';\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('\\u0020');\n let cur = '';\n for (let i = 0; i < words.length; i++) {\n const next = cur ? cur + '\\u0020' + 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 + '\\u0020' + fs + 'px\\u0020' + family;\n if (wrap(ctx, text, maxW).length <= maxLines) break;\n fs = fs * 0.92;\n }\n ctx.font = weight + '\\u0020' + fs + 'px\\u0020' + 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\\u0020' + clamp(fs * 0.24, 11, 15) + 'px\\u0020' + 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\nconst PIECE = { n: '19', total: '57' };\n/* Shared by every motion-graphics piece (prepended after motion-ui/_kit.js).\n Same minifier rules as the kit: explicit semicolons, block comments only,\n never a minus followed by a negative value. */\n\nconst SERIF = 'Georgia,\\u0020serif';\n\n/* Value noise and fractal noise, deterministic. */\nconst NZP = (function () {\n const r = rng(1337);\n const p = [];\n for (let i = 0; i < 512; i++) p.push(Math.floor(r() * 256));\n return p;\n})();\nfunction hash2(x, y) { return NZP[(x & 255) + NZP[y & 255]] / 255; }\nfunction noise2(x, y) {\n const xi = Math.floor(x), yi = Math.floor(y);\n const xf = x - xi, yf = y - yi;\n const u = xf * xf * (3 - 2 * xf), v = yf * yf * (3 - 2 * yf);\n const a = hash2(xi, yi), b = hash2(xi + 1, yi), c = hash2(xi, yi + 1), d = hash2(xi + 1, yi + 1);\n return a + (b - a) * u + (c - a) * v + (a - b - c + d) * u * v;\n}\nfunction fbm(x, y) {\n return noise2(x, y) * 0.55 + noise2(x * 2.03 + 17.1, y * 2.03 + 3.7) * 0.3 + noise2(x * 4.1 + 5.3, y * 4.1 + 41.9) * 0.15;\n}\n\n/* Film grain: one noise tile, re-offset every frame. */\nlet GRAIN = null;\nfunction grain(ctx, W, H, a) {\n if (a <= 0) return;\n if (!GRAIN) {\n const c = document.createElement('canvas');\n c.width = 160; c.height = 160;\n const g = c.getContext('2d');\n const im = g.createImageData(160, 160);\n for (let i = 0; i < im.data.length; i += 4) {\n const v = Math.random() * 255;\n im.data[i] = v; im.data[i + 1] = v; im.data[i + 2] = v; im.data[i + 3] = 255;\n }\n g.putImageData(im, 0, 0);\n GRAIN = ctx.createPattern(c, 'repeat');\n }\n const ox = Math.floor(Math.random() * 160), oy = Math.floor(Math.random() * 160);\n ctx.save();\n ctx.globalAlpha = a;\n ctx.globalCompositeOperation = 'overlay';\n ctx.translate(ox, oy);\n ctx.fillStyle = GRAIN;\n ctx.fillRect(0 - ox, 0 - oy, W, H);\n ctx.restore();\n}\n\n/* Soft edge vignette. */\nfunction vignette(ctx, W, H, a) {\n const vg = ctx.createRadialGradient(W / 2, H / 2, Math.min(W, H) * 0.35, W / 2, H / 2, Math.max(W, H) * 0.75);\n vg.addColorStop(0, 'rgba(0,0,0,0)');\n vg.addColorStop(1, 'rgba(0,0,0,' + a + ')');\n ctx.fillStyle = vg;\n ctx.fillRect(0, 0, W, H);\n}\n\n/* Portfolio chrome: four mono captions and hairline registration marks. */\nfunction chrome(ctx, W, H, ink, name, caption) {\n const s = Math.min(W, H);\n const pad = clamp(s * 0.05, 14, 38);\n const fs = clamp(s * 0.017, 9, 11);\n ctx.save();\n ctx.font = '500\\u0020' + fs + 'px\\u0020' + MONO;\n ctx.textBaseline = 'middle';\n ctx.fillStyle = rgba(ink, 0.62);\n ctx.textAlign = 'left';\n ctx.fillText(String(name).toUpperCase(), pad, pad);\n ctx.textAlign = 'right';\n ctx.fillText(PIECE.n + '\\u0020/\\u0020' + PIECE.total, W - pad, pad);\n ctx.fillStyle = rgba(ink, 0.4);\n ctx.textAlign = 'left';\n if (W > 520) ctx.fillText(String(caption).toUpperCase(), pad, H - pad);\n ctx.textAlign = 'right';\n ctx.fillText('EXODE MOTION · 2026', W - pad, H - pad);\n ctx.strokeStyle = rgba(ink, 0.22);\n ctx.lineWidth = 1;\n const m = pad * 0.45, k = 7;\n ctx.beginPath();\n ctx.moveTo(m, m + k); ctx.lineTo(m, m); ctx.lineTo(m + k, m);\n ctx.moveTo(W - m - k, m); ctx.lineTo(W - m, m); ctx.lineTo(W - m, m + k);\n ctx.moveTo(m, H - m - k); ctx.lineTo(m, H - m); ctx.lineTo(m + k, H - m);\n ctx.moveTo(W - m - k, H - m); ctx.lineTo(W - m, H - m); ctx.lineTo(W - m, H - m - k);\n ctx.stroke();\n ctx.restore();\n}\n\n/* Spaced display text (letterSpacing where supported). */\nfunction spaced(ctx, text, x, y, em) {\n ctx.letterSpacing = em + 'em';\n ctx.fillText(text, x, y);\n ctx.letterSpacing = '0px';\n}\n\n/* Backing-store scale of the canvas, for offscreen buffers (max 2). */\nfunction dprOf(ctx) {\n const m = ctx.getTransform ? ctx.getTransform() : null;\n return m ? clamp(Math.sqrt(m.a * m.a + m.b * m.b), 1, 2) : 1;\n}\n\n/* One pointer press per click. */\nfunction pressed(S, pt) {\n const p = !!pt.isDown && !S.wasDown && !!pt.isHovered;\n S.wasDown = !!pt.isDown;\n return p;\n}\n\n/* ---------- Product launch helpers ---------- */\n\n/* Where the product sits: right of the copy on wide frames, above it on tall ones. */\nfunction productStage(W, H) {\n const land = W > H * 1.05;\n return land\n ? { land: true, cx: W * 0.67, cy: H * 0.52, size: Math.min(W * 0.5, H * 0.78) }\n : { land: false, cx: W / 2, cy: H * 0.32, size: Math.min(W * 0.88, H * 0.46) };\n}\n\n/* Studio sweep: spotlight behind the product and a soft floor. */\nfunction studio(ctx, W, H, bg, tint, st) {\n ctx.fillStyle = bg;\n ctx.fillRect(0, 0, W, H);\n const r = st.size * 1.1;\n const g = ctx.createRadialGradient(st.cx, st.cy, 0, st.cx, st.cy, r);\n g.addColorStop(0, rgba(tint, 0.22));\n g.addColorStop(0.5, rgba(tint, 0.06));\n g.addColorStop(1, rgba(tint, 0));\n ctx.fillStyle = g;\n ctx.fillRect(0, 0, W, H);\n const fy = st.cy + st.size * 0.42;\n const fl = ctx.createLinearGradient(0, fy, 0, H);\n fl.addColorStop(0, rgba(tint, 0.05));\n fl.addColorStop(1, rgba(tint, 0));\n ctx.fillStyle = fl;\n ctx.fillRect(0, fy, W, H - fy);\n}\n\n/* Soft contact shadow. */\nfunction floorShadow(ctx, x, y, w, a) {\n ctx.save();\n ctx.translate(x, y);\n ctx.scale(1, 0.16);\n const g = ctx.createRadialGradient(0, 0, 0, 0, 0, w);\n g.addColorStop(0, 'rgba(0,0,0,' + a + ')');\n g.addColorStop(1, 'rgba(0,0,0,0)');\n ctx.fillStyle = g;\n ctx.fillRect(0 - w, 0 - w, w * 2, w * 2);\n ctx.restore();\n}\n\n/* Launch copy block: eyebrow, name, tagline, three specs and a CTA pill.\n Staggers in with `appear` (seconds since start) and records CTA hover on S. */\nfunction productCopy(ctx, W, H, o, S, env) {\n const s = Math.min(W, H);\n const land = W > H * 1.05;\n const pad = clamp(s * 0.09, 20, 96);\n const cw = land ? Math.min(W * 0.34, 500) : W - pad * 2;\n /* Small frames (cards, thumbnails) drop the specs and shorten the tagline. */\n const compact = cw < 220 || H < 300;\n const fe = clamp(s * 0.016, 7, 12);\n const nameFs = fitFont(ctx, o.name, 600, SANS, cw, 2, clamp(s * 0.085, 16, 78), 12);\n const nl = wrap(ctx, o.name, cw);\n const ft = clamp(s * 0.024, 9, 18);\n ctx.font = '400\\u0020' + ft + 'px\\u0020' + SANS;\n const tl = wrap(ctx, o.tagline, cw).slice(0, compact ? 2 : 3);\n const fv = clamp(s * 0.034, 12, 26);\n const specs = compact ? [] : (o.specs || []).slice(0, 3);\n const ch = fe * 3.6;\n const total = fe * 2.6 + nl.length * nameFs * 1.02 + ft * 0.9 + tl.length * ft * 1.5 + (specs.length ? fv * 3.4 : 0) + ch + fe;\n let y = land ? H / 2 - total / 2 : H - pad - total;\n const x = pad;\n const reveal = function (i) {\n const k = ease(clamp(((o.appear || 9) - 0.15 - i * 0.12) / 0.7, 0, 1));\n ctx.globalAlpha = k;\n return (1 - k) * 18;\n };\n ctx.textAlign = 'left';\n ctx.textBaseline = 'alphabetic';\n\n let d = reveal(0);\n ctx.font = '600\\u0020' + fe + 'px\\u0020' + MONO;\n ctx.fillStyle = o.accent;\n spaced(ctx, String(o.eyebrow).toUpperCase(), x, y + fe + d, 0.22);\n y += fe * 2.6;\n\n d = reveal(1);\n ctx.font = '600\\u0020' + nameFs + 'px\\u0020' + SANS;\n ctx.fillStyle = o.ink;\n ctx.letterSpacing = '-0.025em';\n for (let i = 0; i < nl.length; i++) ctx.fillText(nl[i], x, y + nameFs * 0.86 + i * nameFs * 1.02 + d);\n ctx.letterSpacing = '0px';\n y += nl.length * nameFs * 1.02 + ft * 0.9;\n\n d = reveal(2);\n ctx.font = '400\\u0020' + ft + 'px\\u0020' + SANS;\n ctx.fillStyle = rgba(o.ink, 0.62);\n for (let i = 0; i < tl.length; i++) ctx.fillText(tl[i], x, y + ft + i * ft * 1.5 + d);\n y += tl.length * ft * 1.5;\n\n if (specs.length) {\n d = reveal(3);\n y += fv * 0.9;\n ctx.fillStyle = rgba(o.ink, 0.14);\n ctx.fillRect(x, y + d, cw, 1);\n const colw = cw / 3;\n for (let i = 0; i < specs.length; i++) {\n ctx.font = '600\\u0020' + fv + 'px\\u0020' + SANS;\n ctx.fillStyle = o.ink;\n ctx.fillText(String(specs[i][0]), x + i * colw, y + fv * 1.5 + d);\n ctx.font = '500\\u0020' + fe * 0.9 + 'px\\u0020' + MONO;\n ctx.fillStyle = rgba(o.ink, 0.45);\n ctx.fillText(String(specs[i][1]).toUpperCase(), x + i * colw, y + fv * 1.5 + fe * 1.7 + d);\n }\n y += fv * 2.5;\n }\n\n d = reveal(4);\n ctx.font = '600\\u0020' + fe * 1.2 + 'px\\u0020' + SANS;\n const label = String(o.cta);\n const bw = ctx.measureText(label).width + fe * 4;\n const by = y + d;\n const pt = env.pointer || {};\n const hot = !!pt.isHovered && pt.localX >= x && pt.localX <= x + bw && pt.localY >= by && pt.localY <= by + ch;\n S.ctaHot = hot;\n S.ctaK = (S.ctaK || 0) + ((hot ? 1 : 0) - (S.ctaK || 0)) * 0.2;\n ctx.fillStyle = mix(o.accent, '#ffffff', S.ctaK * 0.18);\n roundRect(ctx, x, by, bw, ch, ch / 2);\n ctx.fill();\n ctx.fillStyle = o.ctaInk;\n ctx.textBaseline = 'middle';\n ctx.fillText(label, x + fe * 2, by + ch / 2 + 1);\n ctx.font = '500\\u0020' + fe * 1.1 + 'px\\u0020' + SANS;\n ctx.fillStyle = rgba(o.ink, 0.7);\n if (cw > bw + 120) ctx.fillText('Learn more\\u0020\\u0020→', x + bw + fe * 2, by + ch / 2 + 1);\n ctx.textBaseline = 'alphabetic';\n ctx.globalAlpha = 1;\n}\n\n\n/* Radar: a phosphor sweep that paints contacts as it passes, with range\n rings, bearings and a cursor readout. Click to drop a waypoint.\n Inputs: title, speed, contacts, accent, bg, text. */\nlet S = null;\n\nfunction render(ctx, env) {\n const W = env.width, H = env.height;\n const n = Math.round(clamp(inp(env, 'contacts', 9), 1, 30));\n if (!S || S.n !== n) {\n const r = rng(3);\n S = { n: n, c: [], wp: [] };\n for (let i = 0; i < n; i++) S.c.push({ r: 0.2 + r() * 0.75, a: r() * 6.28, v: (r() - 0.5) * 0.04, dr: (r() - 0.5) * 0.01, lit: 0, id: 100 + Math.floor(r() * 899) });\n }\n const dt = tick(S);\n const t = S.age;\n const speed = inp(env, 'speed', 1);\n const ttl = String(inp(env, 'title', 'SECTOR 7 · PASSIVE'));\n const A = inp(env, 'accent', '#7dff9b');\n const bg = inp(env, 'bg', '#030805');\n const ink = inp(env, 'text', '#d9ffe2');\n const pt = env.pointer || {};\n const s = Math.min(W, H);\n const cx = W / 2, cy = H / 2;\n const R = s * 0.4;\n const TAU = Math.PI * 2;\n const prev = S.sweep || 0;\n S.sweep = (prev + dt * 1.1 * speed) % TAU;\n\n ctx.save();\n ctx.translate(-W / 2, -H / 2);\n backdrop(ctx, W, H, bg, A, 0.6);\n\n /* Scope. */\n ctx.strokeStyle = rgba(A, 0.18);\n ctx.lineWidth = 1;\n for (let i = 1; i <= 4; i++) { ctx.beginPath(); ctx.arc(cx, cy, R * i / 4, 0, TAU); ctx.stroke(); }\n ctx.beginPath();\n ctx.moveTo(cx - R, cy); ctx.lineTo(cx + R, cy);\n ctx.moveTo(cx, cy - R); ctx.lineTo(cx, cy + R);\n ctx.stroke();\n ctx.font = '500\\u0020' + clamp(s * 0.014, 8, 10) + 'px\\u0020' + MONO;\n ctx.textAlign = 'center';\n ctx.textBaseline = 'middle';\n for (let d = 0; d < 360; d += 5) {\n const a = d / 57.2958 - Math.PI / 2;\n const l = d % 30 === 0 ? 10 : 4;\n ctx.strokeStyle = rgba(A, d % 30 === 0 ? 0.5 : 0.22);\n ctx.beginPath();\n ctx.moveTo(cx + Math.cos(a) * R, cy + Math.sin(a) * R);\n ctx.lineTo(cx + Math.cos(a) * (R + l), cy + Math.sin(a) * (R + l));\n ctx.stroke();\n if (d % 30 === 0) { ctx.fillStyle = rgba(A, 0.6); ctx.fillText(('00' + d).slice(-3), cx + Math.cos(a) * (R + 22), cy + Math.sin(a) * (R + 22)); }\n }\n\n /* Sweep trail. */\n const sa = S.sweep - Math.PI / 2;\n if (ctx.createConicGradient) {\n const cg = ctx.createConicGradient(sa - 1.2, cx, cy);\n cg.addColorStop(0, rgba(A, 0));\n cg.addColorStop(1.2 / TAU, rgba(A, 0.32));\n cg.addColorStop(1.2 / TAU + 0.001, rgba(A, 0));\n cg.addColorStop(1, rgba(A, 0));\n ctx.fillStyle = cg;\n ctx.beginPath();\n ctx.arc(cx, cy, R, 0, TAU);\n ctx.fill();\n }\n ctx.strokeStyle = rgba(A, 0.95);\n ctx.lineWidth = 1.5;\n ctx.beginPath();\n ctx.moveTo(cx, cy);\n ctx.lineTo(cx + Math.cos(sa) * R, cy + Math.sin(sa) * R);\n ctx.stroke();\n\n /* Contacts light up when the beam crosses them. */\n ctx.textAlign = 'left';\n for (let i = 0; i < S.c.length; i++) {\n const c = S.c[i];\n c.a = (c.a + c.v * dt * speed + TAU) % TAU;\n c.r = clamp(c.r + c.dr * dt * speed, 0.1, 0.95);\n const crossed = prev <= S.sweep ? c.a > prev && c.a <= S.sweep : c.a > prev || c.a <= S.sweep;\n if (crossed) { c.lit = 1; c.sx = c.a; c.sr = c.r; }\n c.lit *= Math.pow(0.35, dt * speed);\n if (c.lit < 0.02 || c.sx === undefined) continue;\n const a = c.sx - Math.PI / 2;\n const x = cx + Math.cos(a) * c.sr * R, y = cy + Math.sin(a) * c.sr * R;\n ctx.globalCompositeOperation = 'lighter';\n glow(ctx, A, x, y, 14, c.lit);\n ctx.globalCompositeOperation = 'source-over';\n ctx.fillStyle = rgba(A, c.lit);\n ctx.fillRect(x - 2, y - 2, 4, 4);\n ctx.fillStyle = rgba(ink, c.lit * 0.85);\n ctx.fillText('TRK-' + c.id + '\\u0020\\u0020' + (c.sr * 40).toFixed(1) + 'NM', x + 10, y - 8);\n }\n if (pressed(S, pt)) S.wp.push({ x: pt.localX, y: pt.localY, t: 0 });\n for (let i = S.wp.length - 1; i >= 0; i--) {\n const w = S.wp[i];\n w.t += dt;\n if (w.t > 6) { S.wp.splice(i, 1); continue; }\n ctx.strokeStyle = rgba(A, 1 - w.t / 6);\n ctx.beginPath();\n ctx.moveTo(w.x, w.y - 7); ctx.lineTo(w.x + 7, w.y); ctx.lineTo(w.x, w.y + 7); ctx.lineTo(w.x - 7, w.y);\n ctx.closePath();\n ctx.stroke();\n ctx.beginPath();\n ctx.arc(w.x, w.y, w.t * 30 % 40, 0, TAU);\n ctx.stroke();\n }\n\n /* Cursor readout. */\n if (pt.isHovered) {\n const dx = pt.localX - cx, dy = pt.localY - cy;\n const brg = ((Math.atan2(dy, dx) * 57.2958 + 90) + 360) % 360;\n const rng2 = Math.hypot(dx, dy) / R * 40;\n ctx.strokeStyle = rgba(ink, 0.5);\n ctx.setLineDash([3, 4]);\n ctx.beginPath();\n ctx.moveTo(cx, cy);\n ctx.lineTo(pt.localX, pt.localY);\n ctx.stroke();\n ctx.setLineDash([]);\n ctx.fillStyle = ink;\n ctx.fillText('BRG\\u0020' + ('00' + Math.round(brg)).slice(-3) + '°\\u0020\\u0020RNG\\u0020' + rng2.toFixed(1), pt.localX + 12, pt.localY + 14);\n }\n\n /* Side panel. */\n const pad = clamp(s * 0.06, 18, 56);\n ctx.font = '600\\u0020' + clamp(s * 0.02, 10, 14) + 'px\\u0020' + MONO;\n ctx.fillStyle = ink;\n ctx.textBaseline = 'alphabetic';\n if (W > H * 1.3) {\n ctx.fillText(ttl.toUpperCase(), pad, H / 2 - 30);\n ctx.font = '500\\u0020' + clamp(s * 0.016, 9, 11) + 'px\\u0020' + MONO;\n ctx.fillStyle = rgba(A, 0.75);\n ctx.fillText('CONTACTS\\u0020\\u0020\\u0020' + ('0' + S.c.length).slice(-2), pad, H / 2);\n ctx.fillText('SWEEP\\u0020\\u0020\\u0020\\u0020\\u0020\\u0020' + ('00' + Math.round(S.sweep * 57.3)).slice(-3) + '°', pad, H / 2 + 18);\n ctx.fillText('RANGE\\u0020\\u0020\\u0020\\u0020\\u0020\\u002040 NM', pad, H / 2 + 36);\n }\n\n vignette(ctx, W, H, 0.6);\n grain(ctx, W, H, 0.08);\n chrome(ctx, W, H, ink, 'Radar', 'Click to drop a waypoint');\n ctx.restore();\n}\n" } ] }, "layoutProps": { "layoutSizingHorizontal": "fill", "layoutSizingVertical": "fill" }, "zIndex": 1, "interactions": [] } ] }