/* global React */ /* ============================================================ HubScrollAnimation — replaces the abstract orchard-cube centrepiece. A 3-stage scroll-scrubbed micro-explainer: Stage 1 Detection — RevScout S identifies fruit Stage 2 Map — fruits become per-tree size dots on a block Stage 3 Histogram — dots collapse into a size distribution 18 dots / fruits are conserved across all stages so the morph reads coherently. Pure SVG + CSS, GPU-friendly. ============================================================ */ (function () { const { useRef, useMemo } = React; // ---- CONFIG ----------------------------------------------------- // 18 fruits, with size in mm and their (x,y) in stage-1 space (0..100, 0..100) // and target tree-cell index for stage 2. const N = 18; // Detection-stage normalised positions (matches the detection screenshot vibe). const FRUITS = [ { x: 22, y: 18, size: 70 }, { x: 70, y: 14, size: 70 }, { x: 35, y: 24, size: 65 }, { x: 80, y: 28, size: 56 }, { x: 18, y: 32, size: 61 }, { x: 52, y: 30, size: 70 }, { x: 64, y: 33, size: 66 }, { x: 26, y: 44, size: 52 }, { x: 50, y: 46, size: 50 }, { x: 60, y: 50, size: 58 }, { x: 36, y: 54, size: 55 }, { x: 76, y: 50, size: 60 }, { x: 14, y: 60, size: 49 }, { x: 44, y: 62, size: 53 }, { x: 70, y: 64, size: 57 }, { x: 28, y: 74, size: 47 }, { x: 56, y: 76, size: 51 }, { x: 82, y: 70, size: 63 }, ]; // Stage-2 grid: 6 cols × 3 rows = 18 trees. Each fruit lands at one tree. // Order is shuffled so it doesn't read as a 1:1 column transfer. const TREE_ORDER = [3, 11, 6, 14, 0, 9, 17, 2, 8, 5, 13, 16, 1, 10, 7, 4, 15, 12]; // Stage-3 histogram bins (mm). Each fruit contributes one tally to a bin. const BINS = [ { lo: 40, hi: 45 }, { lo: 45, hi: 50 }, { lo: 50, hi: 55 }, { lo: 55, hi: 60 }, { lo: 60, hi: 65 }, { lo: 65, hi: 70 }, { lo: 70, hi: 75 }, ]; function binIndex(size) { for (let i = 0; i < BINS.length; i++) if (size >= BINS[i].lo && size < BINS[i].hi) return i; return BINS.length - 1; } // Map a 0..1 size value (40..75 mm) to the brand size palette. // Matches the real Survey-Manager "Avg Size (mm)" legend: purple → blue → green → yellow. function sizeColor(mm) { const t = Math.max(0, Math.min(1, (mm - 40) / 35)); // multi-stop gradient const stops = [ [0.00, [86, 35, 132]], // purple [0.35, [55, 95, 180]], // blue [0.60, [80, 160, 90]], // green [0.80, [180, 200, 60]], // lime [1.00, [245, 200, 50]], // yellow ]; let a = stops[0], b = stops[stops.length - 1]; for (let i = 0; i < stops.length - 1; i++) { if (t >= stops[i][0] && t <= stops[i + 1][0]) { a = stops[i]; b = stops[i + 1]; break; } } const local = (t - a[0]) / Math.max(1e-6, (b[0] - a[0])); const r = Math.round(a[1][0] + (b[1][0] - a[1][0]) * local); const g = Math.round(a[1][1] + (b[1][1] - a[1][1]) * local); const bl = Math.round(a[1][2] + (b[1][2] - a[1][2]) * local); return `rgb(${r},${g},${bl})`; } // ---- COMPONENT -------------------------------------------------- window.HubScrollAnimation = function HubScrollAnimation() { const wrapRef = useRef(null); // Use the section-level scroll progress; stages are split inside. const progress = window.useScrollProgress(wrapRef, { start: 0.0, end: 0.95 }); // Stage progress: 0..1 for each of the three stages. // Crossfades happen 0.30..0.40 and 0.65..0.75 of the way through. const p = progress; // Stage envelopes (alpha): const a1 = clamp(invlerp(0.40, 0.30, p)); // 1 → 0 between 0.30 and 0.40 const a2 = clamp(invlerp(0.30, 0.40, p)) * clamp(invlerp(0.75, 0.65, p)); const a3 = clamp(invlerp(0.65, 0.75, p)); // Per-stage internal progress (0..1 within stage): const s1 = clamp(invlerp(0.00, 0.30, p)); // detection reveal const s2 = clamp(invlerp(0.40, 0.65, p)); // morph to map const s3 = clamp(invlerp(0.75, 1.00, p)); // morph to histogram // Memoise per-fruit derived geometry. const fruits = useMemo(() => FRUITS.map((f, i) => { // stage-2 grid coords (6x3) const cell = TREE_ORDER[i]; const col = cell % 6; const row = Math.floor(cell / 6); // Map padding so dots sit on a friendly inner area const mapX = 14 + col * (72 / 5); // 6 cols across 14..86 → step 14.4 const mapY = 22 + row * (54 / 2); // 3 rows across 22..76 → step 27 // stage-3 histogram coords const bi = binIndex(f.size); const tally = FRUITS.slice(0, i + 1).filter(o => binIndex(o.size) === bi) .filter(o => binIndex(o.size) === bi).length; const totalInBin = FRUITS.filter(o => binIndex(o.size) === bi).length; const indexInBin = FRUITS.slice(0, i).filter(o => binIndex(o.size) === bi).length; // Bar geometry: 7 bins across viewBox x 12..88, stacked from bottom. const barX = 12 + bi * ((88 - 12) / BINS.length) + ((88 - 12) / BINS.length) * 0.5; // Each tally is a 4-unit-tall dot, stacked from baseline 80. const barY = 80 - 4 - indexInBin * 4.5; return { ...f, idx: i, mapX, mapY, barX, barY, bi, indexInBin, totalInBin }; }), []); return (
{/* ---------------- BACKGROUND PHOTO (Stage 1) ---------------- */}
{/* dark wash baseline so labels stay legible across stages */}
{/* ---------------- SVG (all 3 stages) ---------------- */} {/* ---------------- HUD overlays ---------------- */}
{/* Stage tag (top-left) */}
{a3 > 0.5 ? '03 · DISTRIBUTION' : a2 > 0.5 ? '02 · MAP' : '01 · DETECT'}
{/* Stage label (bottom) */}
{a3 > 0.5 ? ( <>HARVEST DISTRIBUTION · WEEK 28 ) : a2 > 0.5 ? ( <>BLOCK 1A · {N} TREES · AVG SIZE BY TREE ) : ( <>REV-SIZER ⇄ CAMERA · CALIBRATED )}
{/* Stage progress dots */}
= 0.33 && p < 0.66 ? 'on' : ''}> = 0.66 ? 'on' : ''}>
{/* Calibration tick (only in stage 1) */} {a1 > 0.4 && (
CAL · 2.4m REF · ±0.5mm
)}
); }; // ---- math helpers ----------------------------------------------- function clamp(v) { return Math.max(0, Math.min(1, v)); } function lerp(a, b, t) { return a + (b - a) * t; } function invlerp(a, b, v) { return (v - a) / (b - a); } function ease(t) { return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; } // backwards-compat: HubGlobe3D / OrchardCube3D now return this scroll animation // (we override only on the home page, not globally — see pages-home.jsx) })();