// JOURNEY — Hand-drawn map Paris → Chaumont-sur-Yonne // Decorative topographic map with hand-drawn rivers, forests, hills, road that draws itself. // Internal parallax: layers move at different rates relative to scroll progress. const Journey = () => { const ref = React.useRef(null); const [inView, progress] = window.useInView(ref); const t = window.useT().journey; // Route draws from progress 0.18 → 0.75 const draw = Math.max(0, Math.min(1, (progress - 0.18) / 0.55)); const carP = draw; // Parallax offsets const cloudShift = (progress - 0.5) * 60; // clouds drift across const treeShift = (progress - 0.5) * -25; // foreground trees opposite // Stylized hand-drawn route: Paris (top-left) curving through countryside to Chaumont (bottom-right) const pathD = "M 56 64 C 84 96, 78 132, 120 156 S 188 200, 196 244 S 234 318, 296 360"; const pathLength = 580; const [carPos, setCarPos] = React.useState({ x: 56, y: 64, angle: 0 }); const pathRef = React.useRef(null); React.useEffect(() => { if (!pathRef.current) return; const len = pathRef.current.getTotalLength(); const pt = pathRef.current.getPointAtLength(len * carP); const pt2 = pathRef.current.getPointAtLength(Math.min(len, len * carP + 1)); const angle = Math.atan2(pt2.y - pt.y, pt2.x - pt.x) * 180 / Math.PI; setCarPos({ x: pt.x, y: pt.y, angle }); }, [carP]); return (
· {t.eyebrow}

{t.title_main}
{t.title_em} {t.title_to} {t.subtitle}

{t.intro.map((line, i) => ( {line}{i < t.intro.length - 1 &&
} ))}

{/* ---------- TERRAIN: hand-drawn rivers, forests, hills ---------- */} {/* Rivers (Seine + Yonne) — flowing curves with subtle parallax */} la Seine l'Yonne {/* Hills (concentric arcs, contour-like) */} {/* Forests — clusters of tiny tree dots */} {/* forest 1 */} {/* forest 2 */} {/* forest 3 */} {/* Tiny villages (squares) */} {/* Small italic place names */} Fontainebleau Sens Joigny {/* ---------- ROUTE ---------- */} {/* Dotted shadow underlay */} {/* Main animated route */} {/* Tick marks at intervals along route */} {draw > 0.4 && ( )} {/* Moving carriage */} {draw > 0.02 && draw < 0.99 && ( {/* Subtle trail */} {/* Tiny direction arrow */} )} {/* Compass */}
N
{/* Scale */}
0 · 50 · 100 km
{/* City pins */}
0.02 ? 'active' : ''}`}> {draw > 0.02 && draw < 0.1 && } {t.pin_paris} {t.pin_paris_sub}
{/* Mid-waypoint: Sens (cathédrale + landmark sur l'A6) */}
0.45 ? 'active' : ''}`} /> 0.4 ? 1 : 0, transition: 'opacity 0.6s', fontSize: '14px' }}> {t.pin_sens} {t.pin_sens_sub}
0.95 ? 'active' : ''}`}> {draw > 0.95 && } 0.7 ? 1 : 0, transition: 'opacity 0.6s' }}> {t.pin_chaumont} {t.pin_chaumont_sub}
130 {t.stat_km}
1h45 {t.stat_duration_label}
A6 {t.stat_highway_label}
); }; window.Journey = Journey;