/* Hero "connection" variants - how the Clay arch and the Claude Code pig
relate to each other in the hero. Three linked concepts + the original
free-floating corners. Switched via the Tweaks panel (heroLink).
- corners : original - both objects drift in opposite corners, no link
- wire : both grounded bottom-left/right, a sagging dashed wire runs
between them with the system's parts threaded on as chips
- circuit : corners kept, an orthogonal routed circuit line connects them
around the text (technical-drawing language)
- loop : a dashed orbit ellipse around the headline; both objects sit
ON the path with the other system parts as labeled nodes */
const HV_CLAY = (window.__resources || {}).clayArch || "assets/clay-arch-t.png"; // 227×173 → h = w * 0.762
const HV_PIG = (window.__resources || {}).ccPig || "assets/cc-pig-t.png"; // 896×561 → h = w * 0.626
const HV_CLAY_R = 0.762;
const HV_PIG_R = 0.626;
/* the 4 signal colours from the section-seam pixels */
const HV_SIGNAL = ["#E0379E", "#37D6D6", "#52C964", "#6E7BE6"];
function useHvBox() {
const ref = React.useRef(null);
const [box, setBox] = React.useState({ w: 0, h: 0 });
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const measure = () => setBox((prev) => {
const w = el.clientWidth, h = el.clientHeight;
return (prev.w === w && prev.h === h) ? prev : { w, h };
});
const ro = new ResizeObserver(measure);
ro.observe(el);
measure();
const raf = requestAnimationFrame(measure);
window.addEventListener("load", measure);
/* throttled/hidden iframes can miss every one-shot re-measure AND the
RO transition - poll until a non-zero size lands, then let RO own it */
let pollId;
const poll = () => {
measure();
if (el.clientWidth > 0 && el.clientHeight > 0) return;
pollId = setTimeout(poll, 220);
};
pollId = setTimeout(poll, 80);
return () => { ro.disconnect(); cancelAnimationFrame(raf); clearTimeout(pollId); window.removeEventListener("load", measure); };
}, []);
return [ref, box];
}
/* matchMedia hook - true below the phone breakpoint */
function useIsMobile(q = "(max-width: 640px)") {
const get = () => (typeof window !== "undefined" && window.matchMedia ? window.matchMedia(q).matches : false);
const [m, setM] = React.useState(get);
React.useEffect(() => {
const mq = window.matchMedia(q);
const on = () => setM(mq.matches);
on();
mq.addEventListener ? mq.addEventListener("change", on) : mq.addListener(on);
return () => { mq.removeEventListener ? mq.removeEventListener("change", on) : mq.removeListener(on); };
}, [q]);
return m;
}
/* point on a cubic bezier */
function hvCubic(p0, p1, p2, p3, t) {
const u = 1 - t;
return {
x: u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x,
y: u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y,
};
}
/* ---- original: free corners, gentle bob ---- */
function HvCorners() {
return (
);
}
/* ---- orbit: dashed ellipse around the headline, objects ON the path ---- */
function HvLoop() {
const [ref, { w, h }] = useHvBox();
const cx = w / 2, cy = h / 2;
const rx = w / 2 - 6, ry = h / 2 - 6;
const pt = (deg) => {
const a = (deg * Math.PI) / 180;
return { x: cx + rx * Math.cos(a), y: cy + ry * Math.sin(a), cos: Math.cos(a), sin: Math.sin(a) };
};
const clayW = Math.min(140, Math.max(95, w * 0.115));
const pigW = Math.min(172, Math.max(105, w * 0.135));
const clayH = clayW * HV_CLAY_R;
const pigH = pigW * HV_PIG_R;
const clayP = pt(207);
const pigP = pt(27);
const nodes = [
["TAM MAPPING", 240], ["ENRICHMENT", 273], ["SCORING", 306], ["SIGNALS", 339],
["CRM WORKFLOWS", 57], ["ADS", 87], ["ABM ASSETS", 117], ["ENABLEMENT", 147], ["SALES FEEDBACK LOOPS", 177],
];
/* labels always show; verticals get pushed clear of the headline/CTA band -
on short containers they align to common lines above/below the ellipse so
they can't land behind the headline glyphs or the CTA buttons. The far-left
node centers under its dot so it can't run off-canvas. */
const short = h < 560;
const place = (p) => {
if (p.cos < -0.92) return { anchor: "middle", lx: p.x, ly: p.y + 22 };
if (p.sin > 0.75) return { anchor: "middle", lx: p.x, ly: short ? h + 27 : p.y + 26 };
if (p.sin < -0.75) return { anchor: "middle", lx: p.x, ly: short ? -8 : p.y - 14 };
return { anchor: p.cos > 0 ? "start" : "end", lx: p.x + (p.cos > 0 ? 17 : -17), ly: p.y + p.sin * 15 + 4 };
};
return (
{w > 0 && (
)}
{w > 0 && (
CLAY · DATA & ORCHESTRATIONCLAUDE CODE · AGENTS
)}
);
}
/* ---- mobile: a compact centred "bridge" above the headline. The two
product marks (Clay + Claude Code) linked by a short dashed wire - the
same two-pillar story as the desktop variants, but flow-safe so it never
collides with the centred copy on a narrow screen. ---- */
function HvMobile() {
return (
CLAY · DATACLAUDE CODE
);
}
function HeroFloats({ variant }) {
const mobile = useIsMobile("(max-width: 900px)");
if (mobile) return ;
if (variant === "wire") return ;
if (variant === "circuit") return ;
if (variant === "loop") return ;
return ;
}
Object.assign(window, { HeroFloats });