// Mini live previews for each tool card. Lightweight SVG sketches.
// Shared rAF ticker — smooth 60 fps animation
const useAnim = () => {
const [t, setT] = React.useState(0);
React.useEffect(() => {
let raf, last = performance.now();
const loop = (now) => { setT(v => v + (now - last) / 1000); last = now; raf = requestAnimationFrame(loop); };
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, []);
return t;
};
const TrackingPreview = ({ accent = "currentColor" }) => {
const t = useAnim();
const agents = [
{ p: 0.13, a: 40, cx: 50, cy: 40, r: 22 },
{ p: 0.27, a: 55, cx: 40, cy: 50, r: 18 },
{ p: 0.41, a: 30, cx: 60, cy: 45, r: 24 },
{ p: 0.19, a: 50, cx: 45, cy: 55, r: 16 },
];
return (
);
};
const ProjectionPreview = ({ accent = "currentColor" }) => {
const t = useAnim();
const fx = 50 + Math.cos(t * 0.4) * 18;
const fy = 35 + Math.sin(t * 0.55) * 10;
return (
);
};
const RigPreview = ({ accent = "currentColor" }) => {
const t = useAnim();
const cells = Array.from({ length: 8 });
return (
);
};
// ─────────────────────────────────────────────────────────────────────────────
// ArthroScape — turbulent odor plume; flies navigate upstream (surge-and-cast)
// ─────────────────────────────────────────────────────────────────────────────
const MapPreview = ({ accent = "currentColor" }) => {
const t = useAnim();
const SX = 7, SY = 35;
const PUFFS = 32;
const PERIOD = 0.28;
const CYCLE = PUFFS * PERIOD;
const SPEED = 9.5;
const puffSeeds = React.useMemo(() =>
Array.from({ length: PUFFS }, (_, i) => ({
latSeed: ((i * 1.6180339) % 1) * 2 - 1,
speedMult: 0.78 + ((i * 0.1379) % 1) * 0.44,
sizeMult: 0.65 + ((i * 0.2517) % 1) * 0.70,
opacMult: 0.55 + ((i * 0.3931) % 1) * 0.45,
})), []);
// Turbulent plume centerline: slow meander + three spatial harmonics
const centerY = (x, time) => {
const d = Math.max(0, (x - SX) / 84);
const meander = 4.5 * Math.sin(time * 0.21 + 0.4) + 2.2 * Math.sin(time * 0.37);
return (SY + meander)
+ 6.5 * d * Math.sin(d * 3.4 + time * 1.05)
+ 3.2 * d * Math.sin(d * 6.1 - time * 0.68)
+ 1.6 * d * Math.sin(d * 10.3 + time * 1.92);
};
const plumeSpread = (x) => 1.1 + ((x - SX) / 84) * 10.5;
const puffs = puffSeeds.map((seed, i) => {
const age = ((t - i * PERIOD) % CYCLE + CYCLE) % CYCLE;
const x = SX + age * SPEED * seed.speedMult;
if (x > 92 || x < SX) return null;
const frac = Math.min(1, (x - SX) / 84);
const sp = plumeSpread(x) * seed.sizeMult;
const cy = centerY(x, t) + seed.latSeed * sp * 0.45;
// Steeper power (1.9): concentration falls off sharply away from source
const opacity = 0.34 * seed.opacMult * Math.pow(1 - frac, 1.9);
return { x, y: Math.max(5, Math.min(65, cy)), rx: sp * 0.48, ry: sp, opacity };
}).filter(Boolean);
// ── Stateful fly simulation (surge-and-cast upwind navigation) ────────────
// Flies start downwind (right) and navigate toward the source (left).
// On-plume: surge upwind fast, converge toward centerline.
// Off-plume: slow cast crosswind with widening sweeps to re-contact plume.
const flyRef = React.useRef(null);
const prevT = React.useRef(null);
if (!flyRef.current) {
flyRef.current = [
{ x: 90, y: 33, castFreq: 2.6, trail: [] },
{ x: 68, y: 40, castFreq: 2.0, trail: [] },
{ x: 46, y: 28, castFreq: 3.1, trail: [] },
];
}
const dt = prevT.current !== null
? Math.min(0.08, Math.max(0, t - prevT.current))
: 0;
prevT.current = t;
if (dt > 0) {
flyRef.current = flyRef.current.map((fly, i) => {
const cl = centerY(fly.x, t);
const sp = plumeSpread(fly.x);
const onPlume = Math.abs(fly.y - cl) < sp * 0.88;
// Upwind velocity: surge on-plume, slow cast off-plume
const vx = onPlume ? -11 : -5;
const newX = fly.x + vx * dt;
// Lateral: damp toward centerline when surging; sinusoidal cast when lost
const castTarget = cl + Math.sin(t * fly.castFreq + i * 2.4) * sp * 1.55;
const targetY = onPlume ? cl + (fly.y - cl) * 0.55 : castTarget;
const newY = fly.y + (targetY - fly.y) * Math.min(1, dt * 4.0);
const clampedY = Math.max(8, Math.min(62, newY));
// Prepend current position into trail (keep 10 steps)
const trail = [[fly.x, fly.y], ...fly.trail].slice(0, 10);
// Reset to far downwind when reaching source vicinity
if (newX < SX + 7) {
const resetCl = centerY(93, t);
return { x: 93, y: resetCl + (i - 1) * 7, castFreq: fly.castFreq, trail: [] };
}
return { x: newX, y: clampedY, castFreq: fly.castFreq, trail, onPlume };
});
}
return (
);
};
// ─────────────────────────────────────────────────────────────────────────────
// MiniVentory — two-panel checkout/return form with typewriter field fill
// ─────────────────────────────────────────────────────────────────────────────
const InventoryPreview = ({ accent = "currentColor" }) => {
const t = useAnim();
const CYCLE = 10;
const tc = t % CYCLE;
const CO_VALS = ['R.M.', 'fly food', '2', '\u2014'];
const RET_VALS = ['C.U.', 'tips', '1', 'leftover'];
const LABELS = ['person', 'item', 'qty', 'reason'];
const typeField = (vals, i, start) => {
if (tc < start + i) return '';
const val = vals[i];
return val.slice(0, Math.ceil(Math.min(1, tc - start - i) * val.length));
};
const coFlash = tc >= 4.0 && tc < 4.3;
const retFlash = tc >= 8.3 && tc < 8.6;
const activeCoField = (tc >= 0 && tc < 4.0) ? Math.min(3, Math.floor(tc)) : -1;
const activeRetField = (tc >= 4.3 && tc < 8.3) ? Math.min(3, Math.floor(tc - 4.3)) : -1;
const cursorOn = Math.sin(t * 9) > 0;
const renderFields = (vals, start, activeField, fx) =>
LABELS.map((label, i) => {
const fy = 22 + i * 11;
const val = typeField(vals, i, start);
const active = activeField === i;
return (
{label}
{val}
{active && cursorOn && (
)}
);
});
return (
);
};
// ─────────────────────────────────────────────────────────────────────────────
// ─────────────────────────────────────────────────────────────────────────────
// D. Manager — vial flip → QR label → scan (sequential 3-phase loop)
// Vials have food plugs, foam stoppers. Flies use the page's fly-sprite.png.
// ─────────────────────────────────────────────────────────────────────────────
const StockPreview = ({ accent = "currentColor" }) => {
const t = useAnim();
// 2-phase loop: phase 0 = transfer, phase 1 = label+scan+verify
const PHASE_DUR = 3.0;
const phase = Math.floor(t / PHASE_DUR) % 2;
const phaseT = (t % PHASE_DUR) / PHASE_DUR;
const LABELS = ['flip \u00b7 transferring', 'label \u00b7 scan \u00b7 verified'];
// Vial geometry
const VW = 16, VH = 36, FOOD_H = 7, PLUG_H = 3;
const LCX = 28, RCX = 72, VBOT = 62, VY = VBOT - VH; // VY=26
const FLY_N = 5;
// 5 fly slots: 2 pairs side-by-side just above food, 1 lone fly higher up
const flySlots = [
{ lx: -2.5, ly: -(FOOD_H + 4.0) },
{ lx: 2.5, ly: -(FOOD_H + 4.0) },
{ lx: -2.5, ly: -(FOOD_H + 9.5) },
{ lx: 2.5, ly: -(FOOD_H + 9.5) },
{ lx: 0, ly: -(FOOD_H + 15.0) },
];
// Transfer progress: ramp starts at phaseT=0.10, ends at 0.90
const transferP = phase === 0
? Math.max(0, Math.min(1, (phaseT - 0.10) / 0.80))
: 1;
// Left vial tilts during transfer
const tilt = phase === 0 ? 16 * Math.sin(phaseT * Math.PI * 0.92) : 0;
// Sprite: img/fly-sprite.png — 65×56px, frame size 13×14px, 5 cols × 4 rows
// row 0: walk wings open, row 1: walk wings closed, row 2: fly up, row 3: fly down
const SPR_COLS = 5, SPR_ROWS = 4;
const DW = 4.5; // display width in SVG units
const DH = 14 * DW / 13; // display height, preserving aspect ≈4.85
const walkCol = Math.floor(t * 8) % 4; // 8 fps walk cycle
const flyRow = 2 + Math.floor(t * 12) % 2; // alternate rows 2/3
const flyCol = Math.floor(t * 10) % 4;
// Render one sprite frame via nested SVG (overflow:hidden = natural clip)
const flySprite = (cx, cy, col, row, key) => {
const x = cx - DW / 2;
const y = cy - DH / 2;
return (
);
};
// Phase 1: QR fades in 0→0.12, scan 0.15→0.55, checkmark 0.60+
const QR_N = 4, QR_CELL = 2.2;
const QR_LX = RCX - (QR_N * QR_CELL) / 2;
const QR_LY = VY + 5;
const QR_FILL = [1,1,0,1, 1,0,1,1, 0,1,1,0, 1,1,0,1];
const qrOpacity = phase === 1 ? Math.min(1, phaseT / 0.12) : 0;
const scanY = phase === 1 && phaseT >= 0.15 && phaseT < 0.55
? QR_LY + ((phaseT - 0.15) / 0.40) * QR_N * QR_CELL
: -99;
const showCheck = phase === 1 && phaseT > 0.60;
const vialShell = (cx) => (
{/* Food/agar media at bottom */}
{/* Foam stopper at top */}
);
return (
);
};
// ─────────────────────────────────────────────────────────────────────────────
// R01 · Fly-on-ball olfactory VR — rotating sphere, fly walks, odor plume
// ─────────────────────────────────────────────────────────────────────────────
const FlyOnBallPreview = ({ accent = "currentColor" }) => {
const t = useAnim();
const cx = 50, cy = 42, R = 22;
const rotDeg = (t * 26) % 180;
const flyX = cx + Math.sin(t * 0.72) * 11;
const flyY = cy - R - 1.8;
const flyTrail = Array.from({ length: 14 }, (_, k) => {
const at = t - k * 0.09;
return [cx + Math.sin(at * 0.72) * 11, cy - R - 1.8];
});
return (
);
};
// ─────────────────────────────────────────────────────────────────────────────
// R02 · 16FlYMaze — 4×4 grid, flies choose left or right arm each trial
// ─────────────────────────────────────────────────────────────────────────────
const MazePreview = ({ accent = "currentColor" }) => {
const t = useAnim();
const N = 16, COLS = 4, W = 18, H = 11, GAP = 2.5;
const TRIAL = 4.5;
const trialN = Math.floor(t / TRIAL);
const trialPhase = (t % TRIAL) / TRIAL;
const committed = trialPhase > 0.42;
const choices = React.useMemo(() => {
const arr = [];
let seed = trialN * 1664525 + 1013904223;
for (let i = 0; i < N; i++) {
seed = (seed * 1664525 + 1013904223) & 0xFFFFFFFF;
arr.push((seed >>> 0) % 2 === 0 ? -1 : 1);
}
return arr;
}, [trialN]);
const leftN = choices.filter(c => c < 0).length;
const rightN = N - leftN;
return (
);
};
// ─────────────────────────────────────────────────────────────────────────────
// R03 · MultiCLOPS — optogenetic closed-loop trail in circular arena
// ─────────────────────────────────────────────────────────────────────────────
const CLOPSPreview = ({ accent = "currentColor" }) => {
const t = useAnim();
const cx = 50, cy = 38, R = 26;
const flyAngle = t * 0.62;
const flyRadius = 12 + Math.sin(t * 0.38) * 5;
const fx = cx + flyRadius * Math.cos(flyAngle);
const fy = cy + flyRadius * Math.sin(flyAngle) * 0.68;
const spotAngle = flyAngle + 0.52;
const spotRadius = flyRadius * 0.82;
const sx = cx + spotRadius * Math.cos(spotAngle);
const sy = cy + spotRadius * Math.sin(spotAngle) * 0.68;
const TRAIL = 20;
const flyTrail = Array.from({ length: TRAIL }, (_, k) => {
const at = t - k * 0.055;
const fa = at * 0.62;
const fr = 12 + Math.sin(at * 0.38) * 5;
return [cx + fr * Math.cos(fa), cy + fr * Math.sin(fa) * 0.68];
});
const pulseOn = (t * 20 % 1) < 0.5;
return (
);
};
// ─────────────────────────────────────────────────────────────────────────────
// R04 · MultiBiOS — bilateral olfactometer: scope traces + fly + odor clouds
// ─────────────────────────────────────────────────────────────────────────────
const BiOSPreview = ({ accent = "currentColor" }) => {
const t = useAnim();
const PERIOD = 4;
const lFn = (p) => p > 0.08 && p < 0.44;
const rFn = (p) => p > 0.56 && p < 0.92;
const ph = (t % PERIOD) / PERIOD;
const lOn = lFn(ph);
const rOn = rFn(ph);
const makeTrace = (chanFn, yOn, yOff) => {
const STEPS = 55, TRACE_W = 82, TX = 10;
const pts = [];
let prevOn = null;
for (let i = 0; i <= STEPS; i++) {
const at = t - (STEPS - i) * 0.065;
const p = ((at % PERIOD) / PERIOD + 1) % 1;
const on = chanFn(p);
const x = TX + (i / STEPS) * TRACE_W;
if (prevOn !== null && prevOn !== on) {
pts.push(`${x.toFixed(2)},${(prevOn ? yOn : yOff).toFixed(2)}`);
}
pts.push(`${x.toFixed(2)},${(on ? yOn : yOff).toFixed(2)}`);
prevOn = on;
}
return pts.join(" ");
};
const lTrace = makeTrace(lFn, 11.5, 17.5);
const rTrace = makeTrace(rFn, 25.5, 31.5);
const cx = 50, cy = 50;
return (
);
};
const PREVIEWS = {
tracking: TrackingPreview,
projection: ProjectionPreview,
rig: RigPreview,
map: MapPreview,
inventory: InventoryPreview,
stock: StockPreview,
flyball: FlyOnBallPreview,
maze: MazePreview,
clops: CLOPSPreview,
bios: BiOSPreview,
};
window.ToolPreviews = PREVIEWS;