/* * Docs homepage hero animation. * Ported from the flowx.ai landing v2 exploration * (github.com/bogdandraghici/flx_landing_explo — v2/components/field.js * "full-bleed grid resolve" + HeroTerminal.jsx placeholder typing). * Vanilla JS, no dependencies. Mounts on any page containing .fxh-hero; * SPA-navigation aware (Mintlify swaps page content without reloads). * Accent updated to the canonical amber #fcb813. */ (function () { 'use strict'; var YEL = '#fcb813'; /* ---------------- field.js port ---------------- */ function smoothstep(v) { v = Math.max(0, Math.min(1, v)); return v * v * (3 - 2 * v); } function makeDust(n, w, h) { var d = []; for (var i = 0; i < n; i++) { d.push({ x: Math.random() * w, y: Math.random() * h, yel: Math.random() < 0.06, a: 0.05 + Math.random() * 0.11, s: 1 + Math.random() * 1.4, }); } return d; } function drawDust(ctx, dust, t) { for (var i = 0; i < dust.length; i++) { var p = dust[i]; ctx.globalAlpha = p.a * (0.7 + 0.3 * Math.sin(t * 0.5 + p.x)); ctx.fillStyle = p.yel ? YEL : '#fff'; ctx.fillRect(p.x, p.y, p.s, p.s); } ctx.globalAlpha = 1; } function buildGrid(w, h) { var SP = 52; var grid = []; var pts = []; for (var r = 0; r * SP <= h; r++) { var row = []; for (var c = 0; c * SP <= w; c++) { row.push(pts.length); pts.push({ gx: c * SP, gy: r * SP, sx: c * SP + (Math.random() - 0.5) * 380, sy: r * SP + (Math.random() - 0.5) * 340, ph: Math.random() * 6.28, yel: Math.random() < 0.05, }); } grid.push(row); } return { grid: grid, pts: pts }; } function waveFront(y, t) { return ( Math.sin(y * 0.0052 + t * 0.85) * 165 + Math.sin(y * 0.0143 + t * 1.6 + 1.3) * 74 + Math.sin(y * 0.027 - t * 0.55 + 2.1) * 34 ); } // Docs are informative, not promotional (design feedback): the field // renders a single settled frame — no compile sweep, no perpetual motion. var STATIC_FIELD = true; function createField(canvas) { var reduceMotion = STATIC_FIELD || window.matchMedia('(prefers-reduced-motion: reduce)').matches; 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 dpr = Math.min(window.devicePixelRatio || 1, 2); // calmer than the landing: slower sweep, long resolved hold so the // grid rests most of the time instead of constantly rebuilding var SPD = 90; // px/s sweep speed var HOLD = 7; // seconds fully resolved var REST = 2.5; // seconds fully torn down var w = 0, h = 0, grid = [], pts = [], dust = []; var span = 0, buildDur = 0, period = 0; function layout() { w = canvas.clientWidth || window.innerWidth; h = canvas.clientHeight || window.innerHeight; canvas.width = w * dpr; canvas.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); var g = buildGrid(w, h); grid = g.grid; pts = g.pts; dust = makeDust(50, w, h); span = w + 1200; buildDur = span / SPD; period = 2 * buildDur + HOLD + REST; } layout(); function draw(t) { ctx.clearRect(0, 0, w, h); drawDust(ctx, dust, t); var tt = t % period; var xBuild = -400 + Math.min(tt, buildDur) * SPD; var xTear = -400 + Math.max(0, tt - buildDur - HOLD) * SPD; function resolvedAmt(p) { var o = waveFront(p.gy, t); return smoothstep((xBuild + o - p.gx) / 180) * (1 - smoothstep((xTear + o - p.gx) / 180)); } ctx.strokeStyle = 'rgba(255,255,255,0.055)'; ctx.lineWidth = 1; var r, c, k, a, b, row; for (r = 0; r < grid.length; r++) { row = grid[r]; ctx.beginPath(); var open = false; for (k = 0; k < row.length - 1; k++) { a = pts[row[k]]; b = pts[row[k + 1]]; if (resolvedAmt(a) > 0.8 && resolvedAmt(b) > 0.8) { if (!open) { ctx.moveTo(a.gx, a.gy); open = true; } ctx.lineTo(b.gx, b.gy); } else open = false; } ctx.stroke(); } for (c = 0; c < grid[0].length; c++) { ctx.beginPath(); var openC = false; for (r = 0; r < grid.length - 1; r++) { a = pts[grid[r][c]]; b = pts[grid[r + 1][c]]; if (resolvedAmt(a) > 0.8 && resolvedAmt(b) > 0.8) { if (!openC) { ctx.moveTo(a.gx, a.gy); openC = true; } ctx.lineTo(b.gx, b.gy); } else openC = false; } ctx.stroke(); } for (k = 0; k < pts.length; k++) { var p = pts[k]; var res = resolvedAmt(p); var jx = Math.sin(t * 1.1 + p.ph) * 34 * (1 - res); var jy = Math.cos(t * 0.8 + p.ph * 1.7) * 28 * (1 - res); var x = p.sx + (p.gx - p.sx) * res + jx; var y = p.sy + (p.gy - p.sy) * res + jy; if (p.yel && res > 0.5) { ctx.globalAlpha = 0.6 * res; ctx.strokeStyle = YEL; ctx.beginPath(); ctx.moveTo(x - 5, y); ctx.lineTo(x + 5, y); ctx.moveTo(x, y - 5); ctx.lineTo(x, y + 5); ctx.stroke(); } else { ctx.globalAlpha = 0.24 + 0.18 * res; ctx.fillStyle = '#fff'; ctx.fillRect(x, y, 1.7 + res, 1.7 + res); } } ctx.globalAlpha = 1; } var raf = 0; var running = false; var t0 = null; function frame(now) { raf = requestAnimationFrame(frame); if (t0 === null) t0 = now; draw((now - t0) / 1000); } function start() { if (running || reduceMotion) return; running = true; raf = requestAnimationFrame(frame); } function stop() { running = false; cancelAnimationFrame(raf); } if (reduceMotion) { draw(buildDur + HOLD * 0.5); // settled, mid-hold frame } else { start(); } var resizeTimer = 0; function onResize() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { t0 = null; layout(); if (reduceMotion) draw(buildDur + HOLD * 0.5); }, 150); } window.addEventListener('resize', onResize); var hero = canvas.closest('.fxh-hero') || canvas; var io = new IntersectionObserver( function (entries) { entries[0].isIntersecting ? start() : stop(); }, { threshold: 0.02 } ); io.observe(hero); function onVis() { if (document.hidden) stop(); else start(); } document.addEventListener('visibilitychange', onVis); return { destroy: function () { stop(); io.disconnect(); window.removeEventListener('resize', onResize); document.removeEventListener('visibilitychange', onVis); clearTimeout(resizeTimer); }, }; } /* ------- terminal compile loop (HeroTerminal.jsx + home.js compile port) ------- */ var PHRASES = [ { text: 'automate customer onboarding end to end', slug: 'customer-onboarding' }, { text: 'build a loan origination flow with e-signature', slug: 'loan-origination' }, { text: 'triage insurance claims with an AI agent', slug: 'claims-processing' }, { text: 'orchestrate my core systems over REST and Kafka', slug: 'system-integration' }, { text: 'ship a web and mobile UI from one design', slug: 'omnichannel-ui' }, ]; function startTyping(el, logEl) { if (!el) return { destroy: function () {} }; function line(msg, time, mark) { if (!logEl) return; var ln = document.createElement('div'); ln.className = 'ln'; var left = document.createElement('span'); var ok = document.createElement('span'); ok.className = 'ok'; ok.textContent = mark || '✓'; left.appendChild(ok); left.appendChild(document.createTextNode(msg)); var t = document.createElement('span'); t.className = 't'; t.textContent = time || ''; ln.appendChild(left); ln.appendChild(t); logEl.appendChild(ln); } function logSteps(slug, delays) { later(function () { line('intent parsed', '128ms'); }, delays[0]); later(function () { line('matched pattern: ' + slug, '412ms'); }, delays[1]); later(function () { line('agents + guardrails composed', '590ms'); }, delays[2]); later(function () { line('blueprint ready', '', '▸'); }, delays[3]); } var dead = false, timer = 0, timers = []; function later(fn, ms) { timers.push(setTimeout(function () { if (!dead) fn(); }, ms)); } if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) { el.textContent = PHRASES[0].text; logSteps(PHRASES[0].slug, [0, 0, 0, 0]); return { destroy: function () { dead = true; timers.forEach(clearTimeout); } }; } var pi = 0; function typePhrase(cb) { var ci = 0; (function tick() { if (dead) return; var full = PHRASES[pi].text; ci++; el.textContent = full.slice(0, ci); if (ci >= full.length) { later(cb, 480); return; } timer = setTimeout(tick, 38 + Math.random() * 40); })(); } function erase(cb) { (function tick() { if (dead) return; var cur = el.textContent; if (!cur.length) { cb(); return; } el.textContent = cur.slice(0, Math.max(0, cur.length - 3)); timer = setTimeout(tick, 22); })(); } function cycle() { typePhrase(function () { logSteps(PHRASES[pi].slug, [80, 560, 1060, 1560]); // home.js compile() cadence later(function () { if (logEl) logEl.innerHTML = ''; erase(function () { pi = (pi + 1) % PHRASES.length; cycle(); }); }, 4400); }); } cycle(); return { destroy: function () { dead = true; clearTimeout(timer); timers.forEach(clearTimeout); }, }; } /* ---------------- reveal on scroll (RevealInit.jsx port) ---------------- */ var revealIO = null; function initReveals() { var nodes = document.querySelectorAll('.rv:not([data-rv])'); if (!nodes.length) return; if (!revealIO) { revealIO = new IntersectionObserver( function (entries) { entries.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); revealIO.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' } ); } nodes.forEach(function (n) { n.dataset.rv = '1'; revealIO.observe(n); }); } /* ---------------- mount / SPA lifecycle ---------------- */ var live = null; // { hero, field, typing } function unmount() { if (!live) return; live.field.destroy(); live.typing.destroy(); live = null; } function mountIfPresent() { if (live && !live.hero.isConnected) unmount(); if (live) return; var hero = document.querySelector('.fxh-hero'); if (!hero || hero.dataset.fxhLive) return; hero.dataset.fxhLive = '1'; var canvas = document.createElement('canvas'); canvas.className = 'fxh-field'; canvas.setAttribute('aria-hidden', 'true'); (hero.querySelector('.fxh-hero__bg') || hero).prepend(canvas); var field = createField(canvas); var typing = startTyping(hero.querySelector('#fxh-type'), hero.querySelector('#fxh-log')); hero.classList.add('fxh-hero--live'); // swaps static grid for the canvas, triggers entrance animation live = { hero: hero, field: field, typing: typing }; } var scheduled = false; function schedule() { if (scheduled) return; scheduled = true; requestAnimationFrame(function () { scheduled = false; mountIfPresent(); initReveals(); }); } function init() { document.documentElement.classList.add('fxl-js'); mountIfPresent(); initReveals(); new MutationObserver(schedule).observe(document.body, { childList: true, subtree: true }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', init); } else { init(); } })();

Web SDK (Angular renderer)

iOS SDK

Android SDK