+
diff --git a/components/landing/useInView.ts b/components/landing/useInView.ts
new file mode 100644
index 00000000..cdb5edba
--- /dev/null
+++ b/components/landing/useInView.ts
@@ -0,0 +1,28 @@
+'use client'
+
+// useInView — flips `inView` to true once, the first time the element nears the
+// viewport. One-shot by design: scroll-back never replays the entrance.
+import { useEffect, useRef, useState } from 'react'
+
+export function useInView() {
+ const ref = useRef(null)
+ const [inView, setInView] = useState(false)
+
+ useEffect(() => {
+ const el = ref.current
+ if (!el) return
+ const io = new IntersectionObserver(
+ ([entry]) => {
+ if (!entry.isIntersecting) return
+ setInView(true)
+ io.disconnect()
+ },
+ // Inset the bottom edge so tall elements trigger before they're half read.
+ { rootMargin: '0px 0px -10% 0px' }
+ )
+ io.observe(el)
+ return () => io.disconnect()
+ }, [])
+
+ return { ref, inView }
+}
diff --git a/components/travel/TravelMap.tsx b/components/travel/TravelMap.tsx
index 9780b307..261f312f 100644
--- a/components/travel/TravelMap.tsx
+++ b/components/travel/TravelMap.tsx
@@ -11,6 +11,13 @@ import {
} from "react-simple-maps";
import { geoOrthographic } from "d3-geo";
import { Country, FlightRoute } from "@/lib/content/travel";
+import {
+ INTRO_START_LON,
+ MAX_STAGGER_MS,
+ prefersReducedMotion,
+ useGlobeSpin,
+ useIntroDone,
+} from "./useGlobeIntro";
// Served locally so a CDN hiccup can't blank the globe — the site otherwise
// has no runtime third-party dependency.
@@ -81,6 +88,8 @@ interface TravelMapProps {
flightRoutes?: FlightRoute[];
selectedYear?: number;
showFlights?: boolean;
+ /** Flips true once the globe scrolls into view; starts the route draw-in. */
+ drawIn?: boolean;
}
interface TooltipData {
@@ -104,12 +113,30 @@ export function TravelMap({
flightRoutes = [],
selectedYear,
showFlights = false,
+ drawIn = false,
}: TravelMapProps) {
const [tooltip, setTooltip] = useState(null);
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+ // Starts off-axis so the intro spin has somewhere to settle from; the map is
+ // client-only (dynamic, ssr:false), so reading matchMedia here is safe.
const [rotation, setRotation] = useState<[number, number, number]>([
- 0, -20, 0,
+ prefersReducedMotion() ? 0 : INTRO_START_LON,
+ -20,
+ 0,
]);
+ const userRotated = useRef(false);
+ const introDone = useIntroDone(drawIn);
+ useGlobeSpin(drawIn, setRotation, userRotated);
+ const routeClass = !drawIn
+ ? "flight-line is-pending"
+ : introDone
+ ? "flight-line"
+ : "flight-line is-drawing";
+ const airportClass = !drawIn
+ ? "airport-dot is-pending"
+ : introDone
+ ? "airport-dot"
+ : "airport-dot is-drawing";
const [isDragging, setIsDragging] = useState(false);
const dragStart = useRef<{
x: number;
@@ -183,6 +210,7 @@ export function TravelMap({
const handleMouseDown = useCallback(
(e: React.PointerEvent) => {
+ userRotated.current = true;
setIsDragging(true);
dragStart.current = {
x: e.clientX,
@@ -259,6 +287,7 @@ export function TravelMap({
aria-label={`Globe showing ${displayedCountries.length} visited countries. Drag or use the arrow keys to rotate.`}
onKeyDown={(e) => {
const step = 10;
+ userRotated.current = true;
const [lon, lat] = rotation;
// Match drag: dragging up increases rotation[1] (dy < 0, so
// rotation[1] - dy*sensitivity grows), so ArrowUp must also increase it.
@@ -354,7 +383,15 @@ export function TravelMap({
strokeOpacity={0.6}
strokeWidth={Math.min(0.8 + route.count * 0.15, 3)}
strokeLinecap="round"
- style={{ cursor: "pointer" }}
+ // Normalises dash lengths so the draw-in works for any route length.
+ pathLength={1}
+ className={routeClass}
+ style={
+ {
+ cursor: "pointer",
+ "--delay": `${Math.min(idx * 25, MAX_STAGGER_MS)}ms`,
+ } as React.CSSProperties
+ }
onMouseEnter={() =>
showFlightTooltip(route.from, route.to, route.count)
}
@@ -382,6 +419,7 @@ export function TravelMap({
r={Math.min(2.5 + airport.count * 0.05, 5)}
stroke="var(--map-stroke)"
strokeWidth={0.5}
+ className={airportClass}
style={{ fill: "var(--accent)", cursor: "pointer" }}
/>
diff --git a/components/travel/useGlobeIntro.ts b/components/travel/useGlobeIntro.ts
new file mode 100644
index 00000000..824b59fd
--- /dev/null
+++ b/components/travel/useGlobeIntro.ts
@@ -0,0 +1,50 @@
+'use client'
+
+// Intro choreography for the flight globe: the globe drifts into place while the
+// routes draw in (CSS, see "Flight globe intro" in globals.css). Timings here
+// must stay in step with the --draw-ms keyframe duration there.
+import { useEffect, useState, type Dispatch, type RefObject, type SetStateAction } from 'react'
+
+type Rotation = [number, number, number]
+
+export const INTRO_START_LON = -50
+export const DRAW_MS = 900
+export const MAX_STAGGER_MS = 1200
+const SPIN_MS = 1400
+const INTRO_TOTAL_MS = MAX_STAGGER_MS + DRAW_MS + 300
+
+export const prefersReducedMotion = () =>
+ typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+/** True once the intro window after `active` has elapsed. Stays true afterwards. */
+export function useIntroDone(active: boolean) {
+ const [done, setDone] = useState(false)
+ useEffect(() => {
+ if (!active) return
+ const id = setTimeout(() => setDone(true), INTRO_TOTAL_MS)
+ return () => clearTimeout(id)
+ }, [active])
+ return done
+}
+
+/** Eases longitude from INTRO_START_LON to 0 once `active`; yields to any user input. */
+export function useGlobeSpin(
+ active: boolean,
+ setRotation: Dispatch>,
+ interrupted: RefObject
+) {
+ useEffect(() => {
+ if (!active || prefersReducedMotion()) return
+ const start = performance.now()
+ let raf = 0
+ const step = (now: number) => {
+ if (interrupted.current) return
+ const t = Math.min(1, (now - start) / SPIN_MS)
+ const eased = 1 - Math.pow(1 - t, 3)
+ setRotation(([, lat]) => [INTRO_START_LON * (1 - eased), lat, 0])
+ if (t < 1) raf = requestAnimationFrame(step)
+ }
+ raf = requestAnimationFrame(step)
+ return () => cancelAnimationFrame(raf)
+ }, [active, setRotation, interrupted])
+}