/* * Footer horizon: the honey badger (FlowX mascot) walking a BPMN landscape * at dusk, appended below Mintlify's footer on every page. * The badger is simulated, not keyframed: world-space foot planting, two-bone * IK legs, a sprung body, a follow-through tail, and a walk/sniff state * machine. Crossing the start event launches an amber process token that runs * the sequence flow and is delivered at the hive. * Vanilla JS, no dependencies, styles injected and scoped under .fxfh. * SPA-navigation aware (same mount pattern as intro-hero.js), pauses when * off-screen, static pose under prefers-reduced-motion, theme follows the * .dark class Mintlify sets on . */ (function () { 'use strict'; var CSS = [ '.fxfh{', ' --fh-bg:#f4f4f5;--fh-ground:#ebebe8;--fh-amber:#fcb813;', ' --fh-glow:rgba(252,184,19,.2);', ' --fh-ink-1:rgba(17,17,17,.85);--fh-ink-2:rgba(17,17,17,.45);', ' --fh-ink-3:rgba(17,17,17,.26);--fh-ink-4:rgba(17,17,17,.13);', ' --fh-grid-dot:rgba(17,17,17,.07);--fh-star:transparent;--fh-card:rgba(17,17,17,.055);', ' --fh-band1:rgba(252,184,19,.16);--fh-band2:rgba(252,184,19,.10);--fh-band3:rgba(252,184,19,.05);', ' --fh-sun-o:1;--fh-moon-o:0;', ' --fh-fur:#16171a;--fh-fur-far:#56585e;--fh-fur-rim:#16171a;', ' position:relative;align-self:stretch;width:100%;overflow:hidden;', ' background:radial-gradient(55% 160px at 50% 100%,var(--fh-glow),transparent 75%),', ' radial-gradient(var(--fh-grid-dot) 1px,transparent 1.5px) 0 0/26px 26px;', '}', 'html.dark .fxfh{', ' --fh-bg:#0a0b0d;--fh-ground:#0e1013;--fh-glow:rgba(252,184,19,.1);', ' --fh-ink-1:rgba(255,255,255,.9);--fh-ink-2:rgba(255,255,255,.5);', ' --fh-ink-3:rgba(255,255,255,.3);--fh-ink-4:rgba(255,255,255,.14);', ' --fh-grid-dot:rgba(255,255,255,.05);--fh-star:rgba(255,255,255,.45);--fh-card:rgba(255,255,255,.06);', ' --fh-band1:rgba(252,184,19,.08);--fh-band2:rgba(252,184,19,.05);--fh-band3:rgba(252,184,19,.025);', ' --fh-sun-o:0;--fh-moon-o:1;', ' --fh-fur:#2b2d33;--fh-fur-far:#1b1c20;--fh-fur-rim:rgba(255,255,255,.42);', '}', '.fxfh svg{display:block;width:100%;height:auto;aspect-ratio:1440/300;min-height:150px;max-height:300px}', '.fxfh__ground{height:22px;background:var(--fh-ground)}', '.fxfh canvas{position:absolute;left:0;top:0;width:100%;pointer-events:none}', '@media (prefers-reduced-motion:no-preference){', ' .fxfh-drift{animation:fxfhDrift 3.4s linear infinite}', ' @keyframes fxfhDrift{to{stroke-dashoffset:-18}}', '}' ].join('\n'); var SVG = ''; function injectStyles() { if (document.getElementById('fxfh-style')) return; var s = document.createElement('style'); s.id = 'fxfh-style'; s.textContent = CSS; document.head.appendChild(s); } /* ---------------- badger engine ---------------- */ function createScene(host, stage, canvas) { var ctx; try { ctx = canvas.getContext('2d'); if (!ctx) throw new Error('2d context unavailable'); } catch (e) { canvas.style.display = 'none'; return { destroy: function () {} }; } var reduced = window.matchMedia('(prefers-reduced-motion: reduce)'); /* theme colors from the scoped tokens */ var col = {}; function readColors() { var s = getComputedStyle(host); function v(n) { return s.getPropertyValue(n).trim(); } col.ink2 = v('--fh-ink-2'); col.ink3 = v('--fh-ink-3'); col.ink4 = v('--fh-ink-4'); col.amber = v('--fh-amber') || '#fcb813'; col.fur = v('--fh-fur'); col.furFar = v('--fh-fur-far'); col.rim = v('--fh-fur-rim'); col.dark = document.documentElement.classList.contains('dark'); } function onTheme() { readColors(); if (!running) draw(0); } readColors(); var themeMO = new MutationObserver(onTheme); themeMO.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); /* canvas sizing; replicates the SVG's xMidYMax slice mapping */ var VW = 1440, VH = 300, view = { s: 1, tx: 0, ty: 0 }, dpr = 1; function resize() { var r = stage.getBoundingClientRect(); if (r.width < 2 || r.height < 2) return; dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.style.height = r.height + 'px'; canvas.width = Math.round(r.width * dpr); canvas.height = Math.round(r.height * dpr); view.s = Math.max(r.width / VW, r.height / VH); view.tx = (r.width - VW * view.s) / 2; view.ty = r.height - VH * view.s; if (!running) draw(0); } /* static shapes (badger local space: origin at ground under the rump, +x forward) */ var bodyP = new Path2D('M2 -30 C8 -38 16 -44 34 -47 L70 -47 C82 -47 90 -43 95 -37 C98 -32 98 -26 94 -21 C88 -14 78 -11 68 -11 L38 -11 C28 -11 20 -14 14 -20 C8 -24 4 -27 2 -30 Z'); var mantleP = new Path2D('M2.5 -30.5 C8 -38 16 -44 34 -47 L70 -47 C82 -47 90 -43 95 -37 L91.5 -33.5 C85 -36.5 77 -37 68 -36 L40 -35 C28 -35 17 -32 8 -26.5 Z'); var headF = new Path2D('M-8 -14 C2 -18 12 -16 20 -10 C26 -6 30 -2 31 2 L31 5 C26 8 18 9 10 8 C2 7 -6 4 -9 -2 Z'); var headE = new Path2D('M-8 -14 C2 -18 12 -16 20 -10 C26 -6 30 -2 31 2 L31 5 C26 8 18 9 10 8 C2 7 -6 4 -9 -2'); var headCap = new Path2D('M-8 -14 C2 -18 12 -16 20 -10 L17 -6.5 C10 -10.5 1 -12 -8 -8.5 Z'); /* state; the first lap starts just off-screen so he walks in soon after the footer shows */ var GROUND = 240, SPEED = 52; var stops = [{ bx: 236, d: 2.3 }, { bx: 566, d: 1.8 }, { bx: 1184, d: 3.8 }]; var B = { x: -120, v: 0, state: 'walk', t: 0, stop: 0, bob: 0, bobV: 0, sniff: 0, dist: 0 }; var legs = [ { hip: 28, hy: -13, far: true, off: -6, front: false }, { hip: 32, hy: -13, far: false, off: 2, front: false }, { hip: 72, hy: -13, far: true, off: -2, front: true }, { hip: 76, hy: -13, far: false, off: 6, front: true } ]; function settleFeet() { legs.forEach(function (L) { L.foot = B.x + L.hip + L.off * 0.8; L.planted = true; L.stepT = 1; L.lift = 0; L.from = L.foot; L.to = L.foot; }); } settleFeet(); var tail = null, parts = [], nosePulse = 0, lastPulse = 0; var flies = [[420, 202, 0], [700, 214, 2.1], [1240, 196, 4.2], [1330, 222, 5.4]]; var bees = [ { cx: 1330, cy: 182, rx: 30, ry: 11, sp: 0.9, ph: 0, r: 2 }, { cx: 1336, cy: 174, rx: 24, ry: 9, sp: -0.7, ph: 2.4, r: 1.6 } ]; /* the process the badger walks through: node centers, in flow order */ var nodes = [ { x: 90, y: 229 }, { x: 330, y: 223 }, { x: 560, y: 212 }, { x: 760, y: 218 }, { x: 898, y: 221 }, { x: 1118, y: 222 }, { x: 1330, y: 221, hive: true } ]; var token = null, prevX = B.x; function bodyPoint(lx, ly) { var ang = B.sniff * 0.16; /* body pitches ~9deg nose-down while sniffing */ var c = Math.cos(ang), s = Math.sin(ang); var dx = lx - 26, dy = ly + 14; /* pitch pivot: rear hip (26,-14) */ return [B.x + 26 + dx * c - dy * s, GROUND + B.bob - 14 + dx * s + dy * c]; } function headAngle() { return Math.sin(B.dist * 0.12) * 0.05 + B.sniff * 0.62; } function noseScale() { return 1 + (B.sniff > 0.85 ? Math.max(0, Math.sin(nosePulse * 13)) * 0.3 : 0); } function nosePos() { var ha = headAngle(), c = Math.cos(ha), s = Math.sin(ha); return bodyPoint(90 + 30 * c - 3.5 * s, -32 + 30 * s + 3.5 * c); } function envelope(t, dur) { var a = Math.max(0, Math.min(t / 0.45, 1)); var b = Math.max(0, Math.min((dur - t) / 0.5, 1)); return (a * a * (3 - 2 * a)) * (b * b * (3 - 2 * b)); } function dust(x, y, a) { for (var i = 0; i < 2; i++) { parts.push({ x: x + (Math.random() * 6 - 3), y: y - Math.random() * 2, vx: (Math.random() - 0.7) * 14, vy: -8 - Math.random() * 10, r: 0.9 + Math.random() * 1.1, life: 0.55, max: 0.55, a: a }); } } function ik(hx, hy, fx, fy, l1, l2, bend) { var dx = fx - hx, dy = fy - hy, d = Math.sqrt(dx * dx + dy * dy), m = l1 + l2 - 0.05; if (d > m) { dx *= m / d; dy *= m / d; fx = hx + dx; fy = hy + dy; d = m; } if (d < 0.05) d = 0.05; var a = Math.atan2(dy, dx); var cq = Math.max(-1, Math.min(1, (l1 * l1 + d * d - l2 * l2) / (2 * l1 * d))); var q = Math.acos(cq) * bend; return [hx + l1 * Math.cos(a + q), hy + l1 * Math.sin(a + q), fx, fy]; } function settleTail() { tail = null; for (var i = 0; i < 40; i++) { var b = bodyPoint(6, -30); if (!tail) tail = [{ x: b[0] - 5, y: b[1] - 3 }, { x: b[0] - 9, y: b[1] - 7 }, { x: b[0] - 12, y: b[1] - 11 }]; var rest = [[-5, -3.4], [-4, -4], [-3, -4.2]], px = b[0], py = b[1]; tail.forEach(function (p, j) { p.x += (px + rest[j][0] - p.x) * 0.5; p.y += (py + rest[j][1] - p.y) * 0.5; px = p.x; py = p.y; }); } } function update(dt) { var target = 0, st = stops[B.stop]; if (B.state === 'walk') { target = SPEED; if (st) { var d = st.bx - B.x; if (d < 90) target = Math.max(4, Math.min(SPEED, d * 0.9)); if (d <= 0) { B.state = 'sniff'; B.t = 0; } } B.sniff += (0 - B.sniff) * Math.min(1, dt * 6); } else { B.t += dt; B.sniff = envelope(B.t, st.d); if (B.t >= st.d) { B.state = 'walk'; B.stop++; } } B.v += (target - B.v) * Math.min(1, dt * 6); B.x += B.v * dt; B.dist += B.v * dt; if (B.x > VW + 170) { B.x = -170; B.stop = 0; settleFeet(); tail = null; } B.bobV += (-B.bob * 140 - B.bobV * 12) * dt; B.bob += B.bobV * dt; /* legs: step when the hip outruns the planted foot; one same-end foot at a time */ var lifted = 0; legs.forEach(function (L) { if (!L.planted) lifted++; }); legs.forEach(function (L, i) { var hipX = B.x + L.hip; if (L.planted) { var lead = 5 + B.v * 0.07; var err = hipX + L.off * 0.3 + lead - L.foot; var partner = legs[i % 2 === 0 ? i + 1 : i - 1]; if (err > 9 && Math.abs(B.v) > 2 && partner.planted && lifted < 2) { L.planted = false; L.stepT = 0; L.from = L.foot; L.to = hipX + lead + 8 + B.v * 0.06; lifted++; } } else { L.stepT += dt / 0.17; var k = Math.min(L.stepT, 1), e = k * k * (3 - 2 * k); L.foot = L.from + (L.to - L.from) * e; L.lift = Math.sin(Math.PI * k) * 3.6; if (L.stepT >= 1) { L.planted = true; L.lift = 0; B.bobV += 9; if (B.v > 24 && !L.far) dust(L.foot, GROUND - 1, 0.7); } } }); /* tail follow-through */ var b = bodyPoint(6, -30); if (!tail) tail = [{ x: b[0] - 5, y: b[1] - 3 }, { x: b[0] - 9, y: b[1] - 7 }, { x: b[0] - 12, y: b[1] - 11 }]; var rest = [[-5, -3.4], [-4, -4], [-3, -4.2]], px = b[0], py = b[1], k2 = Math.min(1, dt * 16); tail.forEach(function (p, i) { p.x += (px + rest[i][0] - p.x) * k2; p.y += (py + rest[i][1] - p.y) * k2; px = p.x; py = p.y; }); /* sniff: nose twitch kicks up dust */ if (B.sniff > 0.85) { nosePulse += dt; var ph = Math.sin(nosePulse * 13); if (ph > 0.6 && lastPulse <= 0.6) { var n = nosePos(); dust(n[0] + 2, n[1] + 1, 0.5); } lastPulse = ph; } else { nosePulse = 0; lastPulse = 0; } for (var i = parts.length - 1; i >= 0; i--) { var p = parts[i]; p.life -= dt; if (p.life <= 0) { parts.splice(i, 1); continue; } p.x += p.vx * dt; p.y += p.vy * dt; p.vy += 26 * dt; } /* the badger crossing the start event kicks off a process token */ if (prevX < nodes[0].x && B.x >= nodes[0].x && !token) { token = { seg: 0, t: 0, x: nodes[0].x, y: nodes[0].y, wait: 0.5, fade: 1, done: false }; } prevX = B.x; if (token) { if (token.done) { token.y += dt * 8; token.fade -= dt * 1.4; if (token.fade <= 0) token = null; } else if (token.wait > 0) { token.wait -= dt; } else if (token.seg >= nodes.length - 1) { token.done = true; /* delivered at the hive */ } else { var na = nodes[token.seg], nb = nodes[token.seg + 1]; var dseg = Math.max(1, Math.hypot(nb.x - na.x, nb.y - na.y)); token.t += dt * 120 / dseg; if (token.t >= 1) { token.seg++; token.t = 0; token.x = nb.x; token.y = nb.y; token.wait = nb.hive ? 0.35 : 0.45; /* a beat of "processing" per node */ } else { token.x = na.x + (nb.x - na.x) * token.t; token.y = na.y + (nb.y - na.y) * token.t; } } } } function draw(t) { ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.setTransform(dpr * view.s, 0, 0, dpr * view.s, dpr * view.tx, dpr * view.ty); ctx.lineCap = 'round'; ctx.lineJoin = 'round'; /* bees circling the hive */ ctx.fillStyle = col.amber; bees.forEach(function (b) { var a = t * b.sp + b.ph; ctx.beginPath(); ctx.arc(b.cx + b.rx * Math.cos(a), b.cy + b.ry * Math.sin(a * 1.7) * 0.9, b.r, 0, 7); ctx.fill(); }); /* fireflies at night */ if (col.dark) { flies.forEach(function (f) { var fx = f[0] + 16 * Math.sin(t * 0.5 + f[2]) + 7 * Math.sin(t * 1.6 + f[2] * 2); var fy = f[1] + 9 * Math.sin(t * 0.8 + f[2] * 1.3); ctx.globalAlpha = 0.25 + 0.55 * (0.5 + 0.5 * Math.sin(t * 2.1 + f[2] * 3)); ctx.beginPath(); ctx.arc(fx, fy, 1.5, 0, 7); ctx.fill(); }); ctx.globalAlpha = 1; } /* nodes wake up as the badger passes */ var frontX = B.x + 95; nodes.forEach(function (n) { var d = Math.abs(frontX - n.x); if (d < 85) { var g = 1 - d / 85; g = g * g; var rg = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, 34); rg.addColorStop(0, 'rgba(252,184,19,' + (0.3 * g).toFixed(3) + ')'); rg.addColorStop(1, 'rgba(252,184,19,0)'); ctx.fillStyle = rg; ctx.beginPath(); ctx.arc(n.x, n.y, 34, 0, 7); ctx.fill(); } }); /* shadow */ ctx.globalAlpha = 0.5; ctx.fillStyle = col.ink4; ctx.beginPath(); ctx.ellipse(B.x + 52, GROUND + 2.2, 48 * (1 - Math.min(Math.abs(B.bob) * 0.06, 0.15)), 3.2, 0, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; drawLegs(true); if (tail) { var b = bodyPoint(6, -30), pts = [{ x: b[0], y: b[1] }].concat(tail), w = [4.4, 3.4, 2.4]; [[col.rim, 1.6], [col.fur, 0]].forEach(function (pass) { ctx.strokeStyle = pass[0]; for (var i = 0; i < 3; i++) { ctx.lineWidth = w[i] + pass[1]; ctx.beginPath(); ctx.moveTo(pts[i].x, pts[i].y); ctx.lineTo(pts[i + 1].x, pts[i + 1].y); ctx.stroke(); } }); } /* body + head */ ctx.save(); ctx.translate(B.x, GROUND + B.bob); ctx.translate(26, -14); ctx.rotate(B.sniff * 0.16); ctx.translate(-26, 14); ctx.fillStyle = col.fur; ctx.fill(bodyP); ctx.fillStyle = col.amber; ctx.fill(mantleP); ctx.strokeStyle = col.rim; ctx.lineWidth = 1.6; ctx.stroke(bodyP); ctx.save(); ctx.translate(90, -32); ctx.rotate(headAngle()); ctx.fillStyle = col.fur; ctx.fill(headF); ctx.fillStyle = col.amber; ctx.fill(headCap); ctx.stroke(headE); ctx.lineWidth = 1.4; ctx.beginPath(); ctx.moveTo(-3, -13); ctx.quadraticCurveTo(0, -9.5, 3, -11.5); ctx.stroke(); ctx.fillStyle = 'rgba(255,255,255,.9)'; /* small bright eye on a black face */ ctx.beginPath(); ctx.arc(12, -4, 1.25, 0, 7); ctx.fill(); ctx.fillStyle = col.fur; ctx.lineWidth = 1; ctx.beginPath(); ctx.arc(30.6, 3.4, 2.2 * noseScale(), 0, 7); ctx.fill(); ctx.stroke(); ctx.restore(); ctx.restore(); drawLegs(false); /* the process token, riding the sequence flow */ if (token) { ctx.fillStyle = col.amber; ctx.globalAlpha = 0.22 * token.fade; ctx.beginPath(); ctx.arc(token.x, token.y, 7, 0, 7); ctx.fill(); ctx.globalAlpha = token.fade; ctx.beginPath(); ctx.arc(token.x, token.y, 2.6, 0, 7); ctx.fill(); ctx.globalAlpha = 1; } ctx.fillStyle = col.ink3; parts.forEach(function (p) { ctx.globalAlpha = p.a * (p.life / p.max); ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, 7); ctx.fill(); }); ctx.globalAlpha = 1; } function drawLegs(far) { var w = far ? 4.6 : 5.4; legs.forEach(function (L) { if (L.far !== far) return; var h = bodyPoint(L.hip, L.hy); var seg = ik(h[0], h[1], L.foot, GROUND - L.lift, 7.6, 7.6, L.front ? -1 : 1); [[far ? col.ink4 : col.rim, 1.4], [far ? col.furFar : col.fur, 0]].forEach(function (pass) { ctx.strokeStyle = pass[0]; ctx.lineWidth = w + pass[1]; ctx.beginPath(); ctx.moveTo(h[0], h[1]); ctx.lineTo(seg[0], seg[1]); ctx.lineTo(seg[2], seg[3]); ctx.stroke(); }); if (L.front) { /* digging claws */ ctx.strokeStyle = far ? col.ink3 : col.ink2; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(seg[2] + 2, seg[3] + 0.6); ctx.lineTo(seg[2] + 5, seg[3] + 1.4); ctx.moveTo(seg[2] + 2, seg[3] - 1); ctx.lineTo(seg[2] + 4.8, seg[3] - 0.2); ctx.stroke(); } }); } /* loop: runs only while the scene is on screen and the tab is visible */ var running = false, rafId = 0, last = 0, visible = false; function frame(now) { var dt = Math.min((now - last) / 1000, 0.05); last = now; update(dt); draw(now / 1000); if (running) rafId = requestAnimationFrame(frame); } function start() { if (running || reduced.matches || !visible || document.hidden) return; running = true; last = performance.now(); rafId = requestAnimationFrame(frame); } function stop() { running = false; cancelAnimationFrame(rafId); } function drawStatic() { B.x = 560; B.v = 0; B.bob = 0; B.sniff = 0; B.state = 'walk'; settleFeet(); settleTail(); draw(0); } function onMotion() { if (reduced.matches) { stop(); drawStatic(); } else start(); } function onVis() { if (document.hidden) stop(); else start(); } resize(); var ro = null; if (window.ResizeObserver) { ro = new ResizeObserver(resize); ro.observe(stage); } else window.addEventListener('resize', resize); if (reduced.matches) drawStatic(); else draw(0); try { reduced.addEventListener('change', onMotion); } catch (e) {} document.addEventListener('visibilitychange', onVis); var io = new IntersectionObserver(function (entries) { visible = entries[0].isIntersecting; if (visible) start(); else stop(); }, { threshold: 0.02 }); io.observe(host); /* screenshot hook: document.querySelector('.fxfh').__fxfh.pause(560, true) */ host.__fxfh = { pause: function (x, sniff) { stop(); if (typeof x === 'number') { B.x = x; settleFeet(); } B.sniff = sniff ? 1 : 0; settleTail(); draw(0); }, resume: function () { start(); } }; return { destroy: function () { stop(); io.disconnect(); themeMO.disconnect(); if (ro) ro.disconnect(); else window.removeEventListener('resize', resize); document.removeEventListener('visibilitychange', onVis); try { reduced.removeEventListener('change', onMotion); } catch (e) {} } }; } /* ---------------- mount / SPA lifecycle ---------------- */ var live = null; // { host, scene } function unmount() { if (!live) return; live.scene.destroy(); if (live.host.isConnected) live.host.remove(); live = null; } function mountIfPresent() { if (live && !live.host.isConnected) unmount(); if (live) return; var footer = document.getElementById('footer'); if (!footer || footer.querySelector('.fxfh')) return; injectStyles(); var host = document.createElement('div'); host.className = 'fxfh'; host.setAttribute('aria-hidden', 'true'); var stage = document.createElement('div'); stage.innerHTML = SVG; var canvas = document.createElement('canvas'); var ground = document.createElement('div'); ground.className = 'fxfh__ground'; host.appendChild(stage); host.appendChild(canvas); host.appendChild(ground); footer.appendChild(host); live = { host: host, scene: createScene(host, stage.firstChild, canvas) }; } var scheduled = false; function schedule() { if (scheduled) return; scheduled = true; requestAnimationFrame(function () { scheduled = false; mountIfPresent(); }); } function init() { mountIfPresent(); new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();

Angular SDK

React SDK

iOS SDK

Android SDK