/* Minimal scroll-driven walking-tour map.
Fixed isometric tilt, static SVG landmarks standing up as billboards,
a puck that slides along the route as the user scrolls. */
const { useEffect: mapUE, useRef: mapUR, useState: mapUS } = React;
/* ----------- Landmark line-art (each ~80×100 viewBox) ----------- */
function LM_Eiffel({ color = "#0E1235", sw = 2 }) {
return (
);
}
function LM_Arc({ color = "#0E1235", sw = 2 }) {
return (
);
}
function LM_Pyramid({ color = "#0E1235", sw = 2 }) {
return (
);
}
function LM_NotreDame({ color = "#0E1235", sw = 2 }) {
return (
);
}
function LM_Pantheon({ color = "#0E1235", sw = 2 }) {
return (
);
}
function LM_Sacre({ color = "#0E1235", sw = 2 }) {
return (
);
}
const LANDMARKS = {
eiffel: LM_Eiffel,
arc: LM_Arc,
pyramid: LM_Pyramid,
cathedral: LM_NotreDame,
pantheon: LM_Pantheon,
sacre: LM_Sacre,
};
/* ---------- Tour data (positions in 0..1000 viewBox) ---------- */
const STOPS = [
{ id: 1, name: "Tour Eiffel", kind: "eiffel", frac: 0.00 },
{ id: 2, name: "Arc de Triomphe", kind: "arc", frac: 0.20 },
{ id: 3, name: "Louvre", kind: "pyramid", frac: 0.40 },
{ id: 4, name: "Notre-Dame", kind: "cathedral", frac: 0.62 },
{ id: 5, name: "Panthéon", kind: "pantheon", frac: 0.82 },
{ id: 6, name: "Sacré-Cœur", kind: "sacre", frac: 1.00 },
];
// SVG path that snakes through the city (we'll position landmarks on it)
const ROUTE_D =
"M 140 800 " +
"C 220 720, 240 620, 300 540 " +
"S 460 460, 540 380 " +
"S 700 320, 760 240 " +
"S 700 120, 600 140 " +
"S 460 220, 380 180 " +
"S 240 80, 180 120";
/* ---------- Landmark billboard with rotating 3D monument ----------
The WebGL renderer is throttled to 30fps and only the "next" landmark
actually ticks its render loop (others freeze on their last frame).
Together with DPR 1.0 this keeps 6 simultaneous canvases lightweight. */
function Landmark({ stop, x, y, isNext, isPast, planeTilt }) {
const Icon = LANDMARKS[stop.kind];
const canvasRef = mapUR(null);
const ctrlRef = mapUR(null);
mapUE(() => {
if (canvasRef.current && window.mountMonument) {
const ctrl = window.mountMonument(canvasRef.current, stop.kind);
ctrlRef.current = ctrl;
return () => {
ctrlRef.current = null;
ctrl && ctrl.dispose && ctrl.dispose();
};
}
}, [stop.kind]);
// Only the currently-active monument runs its render loop.
mapUE(() => {
if (ctrlRef.current && ctrlRef.current.setActive) {
ctrlRef.current.setActive(!!isNext);
}
}, [isNext]);
return (
{stop.id}
{window.mountMonument
?
: }
{stop.id}{stop.name}
);
}
/* ---------- main scene ---------- */
/* Minimal scroll-driven map:
- Route stroke + puck position update via direct DOM on every rAF frame.
- React only re-renders when the discrete current-step index crosses a
stop boundary (~5 times over the whole scroll). The HUD shows only that
one piece of info; nothing on this page recomputes per-pixel of scroll. */
function MapScene() {
const PLANE_TILT = 30;
const stageRef = mapUR(null);
const routeRef = mapUR(null);
const routeBgRef = mapUR(null);
const arrowRef = mapUR(null);
const pathSamples = mapUR(null);
const [stopIdx, setStopIdx] = mapUS(0);
const [stopCoords, setStopCoords] = mapUS([]);
// Measure path & cache samples ONCE — getPointAtLength is too expensive
// to call per scroll frame.
mapUE(() => {
if (!routeRef.current) return;
const path = routeRef.current;
const L = path.getTotalLength();
if (routeBgRef.current) routeBgRef.current.style.strokeDasharray = "none";
path.style.strokeDasharray = L;
path.style.strokeDashoffset = L;
const N = 240;
const samples = new Float32Array((N + 1) * 2);
for (let i = 0; i <= N; i++) {
const pt = path.getPointAtLength((L * i) / N);
samples[i * 2] = pt.x;
samples[i * 2 + 1] = pt.y;
}
pathSamples.current = samples;
const coords = STOPS.map((s) => {
const pt = path.getPointAtLength(L * s.frac);
return { x: pt.x, y: pt.y };
});
setStopCoords(coords);
}, []);
// Single rAF-throttled scroll handler. All per-frame work is composite-only
// (transform changes, no layout). React only re-renders when the discrete
// step index crosses a boundary.
mapUE(() => {
let pending = false;
let rafId = 0;
let lastStopIdx = -1;
let cachedArrowInner = null;
let cachedLen = 0;
// Cache layout-affecting reads on mount + resize so the per-frame path
// never calls getBoundingClientRect (which forces layout).
let sectionTop = 0;
let sectionScrollRange = 1;
let planeW = 0;
let planeH = 0;
function measure() {
const el = stageRef.current;
if (!el) return;
// Use bounding rect + scrollY for the absolute document offset.
// offsetTop returns position relative to the offset parent, which on
// this layout is the , not the document — wrong reference.
const rect = el.getBoundingClientRect();
sectionTop = rect.top + (window.scrollY || window.pageYOffset || 0);
sectionScrollRange = Math.max(1, rect.height - window.innerHeight);
// Plane pixel size for converting viewBox coords to actual pixels.
const plane = el.querySelector(".map-plane");
if (plane) {
planeW = plane.clientWidth;
planeH = plane.clientHeight;
}
if (routeRef.current) cachedLen = routeRef.current.getTotalLength();
}
measure();
const compute = () => {
pending = false;
const scroll = window.scrollY || window.pageYOffset;
const p = Math.min(1, Math.max(0, (scroll - sectionTop) / sectionScrollRange));
const path = routeRef.current;
const samples = pathSamples.current;
if (path && samples && cachedLen) {
// Route fill — strokeDashoffset is paint-only, no layout.
path.style.strokeDashoffset = String(cachedLen * (1 - p));
const N = (samples.length / 2) - 1;
const idx = Math.min(N, Math.max(0, Math.round(p * N)));
const nIdx = Math.min(N, idx + 2);
const px = samples[idx * 2], py = samples[idx * 2 + 1];
const nx = samples[nIdx * 2], ny = samples[nIdx * 2 + 1];
const ang = Math.atan2(ny - py, nx - px) * 180 / Math.PI + 90;
if (arrowRef.current && planeW) {
// Pixel coords (no layout — pure transform, GPU-compositable).
const tx = (px / 1000) * planeW;
const ty = (py / 1000) * planeH;
arrowRef.current.style.transform =
`translate3d(${tx}px, ${ty}px, 4px) translate(-50%, -50%)`;
if (!cachedArrowInner) cachedArrowInner = arrowRef.current.querySelector(".arrow-inner");
if (cachedArrowInner) cachedArrowInner.style.transform = `rotate(${ang}deg)`;
}
}
// Next-destination index: stops we've passed + 1. As soon as the puck
// crosses a stop's frac, that stop turns green (validated) and the
// following one becomes the active highlight.
let nextIdx = 0;
for (let i = 0; i < STOPS.length; i++) {
if (p >= STOPS[i].frac + 0.005) nextIdx = i + 1;
}
if (nextIdx > STOPS.length - 1) nextIdx = STOPS.length - 1;
if (nextIdx !== lastStopIdx) {
lastStopIdx = nextIdx;
setStopIdx(nextIdx);
}
};
const onScroll = () => {
if (pending) return;
pending = true;
rafId = requestAnimationFrame(compute);
};
const onResize = () => {
measure();
onScroll();
};
// Defer the first compute one frame so layout/measure is settled.
requestAnimationFrame(() => { measure(); compute(); });
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onResize);
return () => {
cancelAnimationFrame(rafId);
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onResize);
};
}, []);
const currentStop = STOPS[stopIdx];
return (
Living map · powered by Mapbox
A 3D map that walks with you.
Scroll down to follow a real Paris tour — the route paints itself ahead,
and each stop lights up as you pass: Eiffel, Arc, Louvre, Notre-Dame,
Panthéon, Sacré-Cœur.
{/* Top-left: discrete stop counter — updates 5 times max */}
{stopIdx + 1}/{STOPS.length}
Étape suivante
{currentStop.name}
{/* Top-right: language + audio (purely static) */}