// GLOBAL REACH
// A minimal world map — continent silhouettes rendered as a stippled dot
// matrix (no kitsch). Origin nodes = where we source. Destination arcs =
// where product moves. Designed to feel like a navigator's chart, not an
// infographic. Map projected with manual lon/lat → SVG mapping (equirectangular).
function Reach() {
const [active, setActive] = React.useState('all');
// Equirectangular projection: lon (-180..180) → x (0..1000), lat (90..-90) → y (0..500)
const proj = (lon, lat) => [
((lon + 180) / 360) * 1000,
((90 - lat) / 180) * 500,
];
// Origins: Latin America. Each lists its primary destination markets.
const origins = [
{ id:'mx', name:'Mexico', lon:-102.5,lat:23.6, type:'octopus', ships:['us','es'] },
{ id:'gt', name:'Guatemala', lon:-90.5, lat:15.5, type:'shrimp', ships:['us'] },
{ id:'ho', name:'Honduras', lon:-86.5, lat:14.6, type:'shrimp · lobster', ships:['us','eu'] },
{ id:'ni', name:'Nicaragua', lon:-85.2, lat:12.9, type:'lobster', ships:['us'] },
{ id:'ec', name:'Ecuador', lon:-78.4, lat:-1.5, type:'shrimp · fish', ships:['us','eu','jp'] },
{ id:'cl', name:'Chile', lon:-71.5, lat:-35.7, type:'fish · salmon', ships:['us','jp'] },
{ id:'ve', name:'Venezuela', lon:-66.6, lat:6.4, type:'shrimp · lobster · octopus', ships:['us','es'] },
{ id:'pe', name:'Peru', lon:-75.0, lat:-9.2, type:'squid · octopus · fish', ships:['us','es','kr'] },
{ id:'br', name:'Brazil', lon:-51.9, lat:-14.2, type:'lobster · fish', ships:['us','eu'] },
{ id:'ar', name:'Argentina', lon:-63.6, lat:-38.4, type:'squid · fish', ships:['es','jp','kr'] },
];
// Destinations: USA (primary), plus Europe + Asia
const destinations = [
{ id:'us', name:'United States', lon:-95.7, lat:38.0 },
{ id:'eu', name:'European Union', lon:10.4, lat:51.2 },
{ id:'uk', name:'United Kingdom', lon:-2.4, lat:54.0 },
{ id:'es', name:'Spain', lon:-3.7, lat:40.4 },
{ id:'jp', name:'Japan', lon:138.3, lat:36.2 },
{ id:'kr', name:'South Korea', lon:127.8, lat:35.9 },
{ id:'sg', name:'Singapore', lon:103.8, lat:1.3 },
];
// Trading desk marker only — no longer routed through.
const hub = { lon:-80.2, lat:25.8, name:'Miami HQ' };
// Build the actual origin→destination flows list
const destById = Object.fromEntries(destinations.map(d => [d.id, d]));
const flows = [];
origins.forEach(o => {
o.ships.forEach(dId => {
const d = destById[dId];
if (d) flows.push({ from:o, to:d, key:`${o.id}-${dId}` });
});
});
// Build smooth arc from origin → hub → destination using quadratic bezier
const arc = (a, b) => {
const [ax, ay] = proj(a.lon, a.lat);
const [bx, by] = proj(b.lon, b.lat);
// bow upward (or downward if going reverse hemisphere)
const mx = (ax + bx) / 2;
const my = (ay + by) / 2;
const dx = bx - ax, dy = by - ay;
const dist = Math.sqrt(dx*dx + dy*dy);
// perpendicular, scaled by distance
const nx = -dy / dist;
const ny = dx / dist;
const k = Math.min(dist * 0.32, 110);
const cx = mx + nx * k;
const cy = my + ny * k;
return `M ${ax} ${ay} Q ${cx} ${cy} ${bx} ${by}`;
};
return (
<>
§ 02 — Reach
From sea to shore, across three markets.
{origins.length} origin nodes
Across three markets
HQ
Origin
Destination
→ US
→ EU
→ Asia
A book of trusted lanes.
Latin American origins, three destination markets. We source
from a vetted book of farms and fisheries across the Americas —
routing product into the United States, Europe, and Asia, with
every shipment passing through our Miami trading desk.
Filter map
);
}
// Stippled continent silhouettes. Hand-tuned dot grid covering rough land
// shapes — no real geographic data, just enough to read as a map.
function ContinentDots() {
// Each continent is a list of [x,y,r?] dots in 1000×500 space.
// Generated procedurally from rough bounding regions filled with jittered grid.
const dots = React.useMemo(() => {
const seed = (s) => () => (s = (s * 9301 + 49297) % 233280) / 233280;
const rand = seed(7);
// Each region: bounding poly (approx) + density.
// We sample a grid and keep points inside loose ellipse shapes per region.
const regions = [
// North America
{ cx:230, cy:155, rx:120, ry:90, density:5, jitter:6 },
{ cx:240, cy:230, rx:60, ry:40, density:5, jitter:5 }, // mexico/central
// South America
{ cx:310, cy:340, rx:50, ry:90, density:5, jitter:5 },
// Greenland
{ cx:340, cy:90, rx:35, ry:30, density:6, jitter:5 },
// Europe
{ cx:510, cy:155, rx:60, ry:40, density:5, jitter:4 },
// Africa
{ cx:540, cy:300, rx:65, ry:90, density:5, jitter:5 },
// Middle East / Arabia
{ cx:600, cy:230, rx:35, ry:30, density:5, jitter:4 },
// Russia / Northern Asia
{ cx:680, cy:130, rx:160, ry:50, density:5, jitter:5 },
// India
{ cx:720, cy:240, rx:30, ry:40, density:5, jitter:4 },
// SE Asia / China
{ cx:790, cy:200, rx:60, ry:50, density:5, jitter:5 },
// Indonesia
{ cx:820, cy:300, rx:50, ry:18, density:5, jitter:5 },
// Australia
{ cx:870, cy:360, rx:55, ry:35, density:5, jitter:5 },
// Japan
{ cx:870, cy:200, rx:18, ry:25, density:5, jitter:4 },
];
const out = [];
regions.forEach(r => {
for (let x = r.cx - r.rx; x <= r.cx + r.rx; x += r.density){
for (let y = r.cy - r.ry; y <= r.cy + r.ry; y += r.density){
// ellipse test
const dx = (x - r.cx) / r.rx;
const dy = (y - r.cy) / r.ry;
if (dx*dx + dy*dy > 1) continue;
// edge probability for organic feel
const edge = dx*dx + dy*dy;
if (rand() < edge * 0.4) continue;
const jx = (rand() - 0.5) * r.jitter;
const jy = (rand() - 0.5) * r.jitter;
out.push([x + jx, y + jy]);
}
}
});
return out;
}, []);
return (
{dots.map(([x,y], i) => (
))}
);
}
window.Reach = Reach;