// Four hero variants for Motion.html, each isolating one animation technique. // Renders with a different hero swapped in. // ─── A · Flow Diagram Hero (ported from Dir 1) ───────────────── function HeroFlowDiagram() { return (
Live · Automation consulting

Your systems should
work together.
Not against you.

Automate the manual work flowing through your business — every input, every handoff, every output, running in the background.

); } function MVFlowDiagram() { const Node = ({ x, y, label, sub, size = 'm', color = '#fff' }) => { const w = size === 'lg' ? 160 : 140; return (
{sub}
{label}
); }; const paths = [ 'M 110 90 C 180 90, 220 240, 290 270', 'M 110 190 C 180 190, 220 250, 290 270', 'M 110 290 C 180 290, 220 270, 290 270', 'M 110 390 C 180 390, 220 290, 290 270', 'M 310 270 C 380 270, 420 120, 490 120', 'M 310 270 C 380 270, 420 220, 490 220', 'M 310 270 C 380 270, 420 320, 490 320', 'M 310 270 C 380 270, 420 420, 490 420', ]; return (
{paths.map((d, i) => ( ))} {/* Inputs */} {/* Brain */}
Axiom Brain
Process · Validate · Route
{/* Outputs */}
); } // ─── B · Ticking Counter Hero ───────────────────────────────── function HeroTickingCounter() { const [hoursSaved, setHoursSaved] = React.useState(24187); React.useEffect(() => { const id = setInterval(() => setHoursSaved((x) => x + 1), 1200); return () => clearInterval(id); }, []); // Motion-blurred figures moving through a corridor — editorial, not stock-face const HERO_IMG = 'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=2000&q=80&auto=format&fit=crop'; return (
{/* Duotone photo background */}
); } // ─── C · Auto-Toggle Split Screen ────────────────────────────── function HeroAutoToggle() { // divider position as % — oscillates between 35 and 65 every few seconds const [pos, setPos] = React.useState(50); React.useEffect(() => { const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches; if (reduce) return; let dir = 1; const id = setInterval(() => { setPos((p) => { if (p >= 72) dir = -1; if (p <= 28) dir = 1; return p + dir * 0.6; }); }, 40); return () => clearInterval(id); }, []); const HEIGHT = 620; return (
{/* BEFORE (full width, underneath) */}
Before · Manual
Your team spends
hours on tasks
software can do
{['Re-enter invoice data into Xero','Chase approvals in email','Compile weekly report from 4 spreadsheets','Reconcile deliveries from yesterday',"Fix errors from yesterday's fixes"].map((t, i) => (
{t}
))}
~6 HOURS/DAY LOST
{/* AFTER (clipped to right of divider) */}
{/* right-side content, mirrored to right half */}
After · Automated
Your systems
do the work.
Automatically.
{['Invoices synced to Xero on receipt','Approvals routed & logged in Teams','Reports generated before you arrive','Deliveries reconciled overnight','Exceptions flagged — the rest just works'].map((t, i) => (
{t}
))}
~5 MIN OVERSIGHT
{/* Divider line + chevron handle */}
{/* subhead band (shared with default hero) */}

Your systems should work together.
Not against you.

We connect and automate your tools to eliminate double handling, delays, and inefficiencies — using the Microsoft 365 environment you already have.

); } Object.assign(window, { HeroFlowDiagram, HeroTickingCounter, HeroAutoToggle });