// Services. A list of "vehicles" with scroll-driven SINGLE-ACTIVE illumination:
// whichever row is closest to the viewport center is lit; the rest sit dim.
// Hovering overrides the scroll-pick while the mouse is inside the list.
const Vehicle = React.forwardRef(({ n, title, body }, ref) => (
{n}
{title}
{body}
));
const Systems = () => {
const items = [
{
n: '01',
title: 'Operating systems.',
body: "The core the business runs on. Pipelines, routing, permissions, the surfaces leadership actually looks at. Built to fit the shape of the operation, not the other way around.",
},
{
n: '02',
title: 'Autonomous operators.',
body: "Agentic layers that take entire workflows off human hands. They talk to each other, pick up where the last one stopped, and keep working while the team sleeps.",
},
{
n: '03',
title: 'Demand infrastructure.',
body: "The machinery behind every growth motion. Outbound, inbound, creative, attribution. Quiet when it is working. Unmistakable when it is not.",
},
{
n: '04',
title: 'Brand identity.',
body: "Mark, palette, voice, surface. A posture the whole company can stand behind, handed over with the keys and a system everyone can wield.",
},
{
n: '05',
title: 'Custom software.',
body: "Only when the problem demands it. Built to slot into the stack that is already there, never to replace it for its own sake. Owned by you on day one.",
},
{
n: '06',
title: 'Business consulting.',
body: "The work behind the work. Offer design, positioning, pricing, the levers an operator can pull to change the trajectory. Where the numbers come from before any build begins.",
},
];
const listRef = React.useRef(null);
const rowsRef = React.useRef([]);
const cursorRef = React.useRef({x: 0, y: 0, known: false});
const [activeIdx, setActiveIdx] = React.useState(1);
// Active row = whichever row currently sits under the cursor. If the cursor
// is outside the list (or position unknown), fall back to the row closest
// to the viewport center. Both scroll AND mousemove feed the same picker so
// the active row tracks the cursor even when only the page is moving —
// giving a glissando-like sweep across the list while you scroll.
React.useEffect(() => {
const pickFromCursor = () => {
if (!cursorRef.current.known || !listRef.current) return -1;
const { x, y } = cursorRef.current;
const under = document.elementFromPoint(x, y);
if (!under || !listRef.current.contains(under)) return -1;
const wrap = under.closest('.orx-vehicle-wrap');
if (!wrap) return -1;
return rowsRef.current.findIndex((el) => el && wrap.contains(el));
};
const pickFromViewport = () => {
const mid = window.innerHeight / 2;
let best = 0;
let bestDist = Infinity;
rowsRef.current.forEach((el, i) => {
if (!el) return;
const r = el.getBoundingClientRect();
const c = r.top + r.height / 2;
const d = Math.abs(c - mid);
if (d < bestDist) { bestDist = d; best = i; }
});
return best;
};
const pick = () => {
const fromCursor = pickFromCursor();
setActiveIdx(fromCursor >= 0 ? fromCursor : pickFromViewport());
};
const onMove = (e) => {
cursorRef.current = {x: e.clientX, y: e.clientY, known: true};
pick();
};
const onScroll = () => pick();
const onResize = () => pick();
pick();
window.addEventListener('mousemove', onMove, { passive: true });
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onResize);
};
}, []);
return (
Services
Some of the vehicles.
If it can be delivered digitally, we can do it.
{items.map((it, i) => (
// See Philosophy for the rationale: reveal is on an outer
// wrapper React never rewrites, so the inner dynamic className
// (`is-active`) can update without wiping `is-revealed` and
// making rows blink away on hover.