// Walk Around Australia — a virtual fundraising challenge page.
// The community logs kilometres and collectively walks the ~35,000 km
// mainland coastline. Centrepiece is an interactive, animated SVG map with
// a hopping kangaroo that follows the coast, landmark stops, and live stats.
// Total mainland coastline distance used for the challenge (approximate).
const WALK_TOTAL_KM = 35000;
// Accurate Australia geometry (real coastline + projected city coordinates),
// baked offline from Natural Earth data into lib/au-geo.js (window.AU_GEO).
const GEO = (typeof window !== 'undefined' && window.AU_GEO) ||
{ land: '', mainland: '', tasmania: '', viewBox: '0 0 1000 800', cities: {} };
const C = GEO.cities;
// Coastal stops, placed at their real projected coordinates. Their position
// along the trail is measured at runtime so the kangaroo passes each one as
// progress advances.
const WALK_PLACES = [
{ id: 'perth', name: 'Perth', x: C.perth[0], y: C.perth[1], dy: 4, anchor: 'end' },
{ id: 'broome', name: 'Broome', x: C.broome[0], y: C.broome[1], dy: -14, anchor: 'middle' },
{ id: 'darwin', name: 'Darwin', x: C.darwin[0], y: C.darwin[1], dy: -14, anchor: 'middle' },
{ id: 'cairns', name: 'Cairns', x: C.cairns[0], y: C.cairns[1], dy: 4, anchor: 'start' },
{ id: 'brisbane', name: 'Brisbane', x: C.brisbane[0], y: C.brisbane[1], dy: 4, anchor: 'start' },
{ id: 'sydney', name: 'Sydney', x: C.sydney[0], y: C.sydney[1], dy: 4, anchor: 'start' },
{ id: 'melbourne', name: 'Melbourne', x: C.melbourne[0], y: C.melbourne[1], dy: 20, anchor: 'middle' },
{ id: 'adelaide', name: 'Adelaide', x: C.adelaide[0], y: C.adelaide[1], dy: 20, anchor: 'middle' },
];
// -- A single landmark/city marker on the map (status dot + label pill). --
function WalkStop({ place, passed, current }) {
const fill = passed ? '#FFFFFF' : 'transparent';
const ring = passed ? '#FFFFFF' : '#4A7EC7';
const w = place.name.length * 7.2 + 16;
const lx = place.x + (place.anchor === 'end' ? -10 : place.anchor === 'start' ? 10 : 0);
const ly = place.y + place.dy;
const rectX = place.anchor === 'end' ? lx - w : place.anchor === 'start' ? lx : lx - w / 2;
return (
{current && }
{place.name}
);
}
// -- Sydney Opera House: three sails, drawn small in white. --
function OperaHouse({ x, y }) {
return (
);
}
// -- Uluru: a sandstone dome in the red centre (warm neutral, on-brand). --
function Uluru({ x, y }) {
return (
Uluru
);
}
function WalkPage({ navigate }) {
const reduce = typeof window !== 'undefined' && window.matchMedia
&& window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const trailRef = React.useRef(null);
const [length, setLength] = React.useState(0);
const [stops, setStops] = React.useState(WALK_PLACES.map(p => ({ ...p, frac: 0 })));
const [roo, setRoo] = React.useState({ x: C.perth ? C.perth[0] : 285, y: C.perth ? C.perth[1] : 349 });
const [progress, setProgress] = React.useState(0.34);
const [playing, setPlaying] = React.useState(!reduce);
// Measure the trail once it is in the DOM, and place each stop at the
// nearest point along the path so the kangaroo passes it at that progress.
React.useEffect(() => {
const path = trailRef.current;
if (!path) return;
const len = path.getTotalLength();
setLength(len);
const N = 720;
const samples = [];
for (let i = 0; i <= N; i++) samples.push(path.getPointAtLength((len * i) / N));
setStops(WALK_PLACES.map(p => {
let best = 0, bestD = Infinity;
for (let i = 0; i <= N; i++) {
const d = (samples[i].x - p.x) ** 2 + (samples[i].y - p.y) ** 2;
if (d < bestD) { bestD = d; best = i; }
}
return { ...p, frac: best / N };
}));
}, []);
// Move the kangaroo to the current point on the trail.
React.useEffect(() => {
const path = trailRef.current;
if (!path || !length) return;
const p = path.getPointAtLength(length * Math.min(progress, 0.9999));
setRoo({ x: p.x, y: p.y });
}, [progress, length]);
// Auto-walk: advance progress smoothly so the country fills in.
React.useEffect(() => {
if (!playing) return;
let raf, last = performance.now();
const tick = (now) => {
const dt = (now - last) / 1000; last = now;
setProgress(p => { const np = p + dt * 0.05; return np >= 1 ? 0 : np; });
raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [playing]);
const km = Math.round(progress * WALK_TOTAL_KM);
const pct = Math.round(progress * 100);
const next = stops.filter(s => s.frac > progress).sort((a, b) => a.frac - b.frac)[0];
const dash = length || 1;
return (
navigate('involved') }}
secondaryCta={{ label: 'How it works', onClick: () => { const el = document.getElementById('walk-how'); if (el) el.scrollIntoView({ behavior: 'smooth' }); } }}
navigate={navigate} />
{/* Interactive map — the navy feature band for this page */}
The challenge
Watch the nation move, one step at a time.
Every kilometre the community logs carries our kangaroo further around the
coast, past every state and territory, and home again. Drag the slider to
preview the journey, or let it walk.
{/* The map */}
{/* Control + stats panel — a warm-white card on the navy band */}
Community progress
{km.toLocaleString()}
km
of {WALK_TOTAL_KM.toLocaleString()} km · {pct}% around the coastline
{/* Progress bar */}
{/* Slider */}
{next && (
Next stop: {next.name}, {Math.max(0, Math.round((next.frac - progress) * WALK_TOTAL_KM)).toLocaleString()} km to go.
{[
{ stat: '~35,000', unit: 'km of coastline', body: 'The distance our community is walking together, end to end.' },
{ stat: '1 in 100', unit: 'live births carry a DEE', body: 'Developmental and epileptic encephalopathies are more common than most realise.' },
{ stat: '100%', unit: 'stays in Australia', body: 'Funds raised support local research partnerships and family navigation.' },
].map((c, i) => (
{c.stat}
{c.unit}
{c.body}
))}
navigate('involved')}
secondaryLabel="Talk to us"
onSecondary={() => navigate('contact')} />