Fable 13 · Guide 10 · Travel agency

Building Parallel 23

The brief: a travel agency with destination packages, a booking flow and an interactive map. The idea: the agency is named for the Tropic of Cancer, so the map isn't a Google embed — it's the flight desk's own chart, drawn from coordinates.

The signature — a chart, not a map

The hero chart is generated in SVG from real latitude/longitude: an equirectangular graticule, the tropic dashed in sun-gold with its label, LHR in rose, and six destination ports each labelled with their true coordinates in Space Mono. Routes are quadratic arcs that draw themselves on load — normalized with pathLength="100" and animated by native WAAPI after Motion proved unwilling to tween stroke-dashoffset here (found in pass one by computing styles, not by squinting). Hovering or keyboard-focusing a journey card lights its route, port and label.

Booking

Three steps — where, when/how many, review — ending in a rotated passport-style stamp that spins in with the chosen destination and month. The confirmation copy promises a human route-planner, because that's the product.

Colour & type

chart blue paper sun rose

Gloock's high-contrast serif gives the atlas voice; Work Sans carries copy; Space Mono owns every coordinate, caption and price — the instrument-panel register that makes the chart feel operated rather than decorated. Destination photography from Unsplash (free license).

Process — three passes

Pass 1 (visual): routes were invisible — computed-style debugging showed dashoffset never tweened; rebuilt on pathLength + WAAPI. Two corrupted CSS hexes (stray words inside colour values) caught and removed.
Pass 2 (complexify): card-hover ↔ chart lighting wired both ways including keyboard focus; labels given an above/below rule so nothing sits on the tropic.
Pass 3 (QA): booking flow scripted through the stamp; 390px pass (chart remains legible, cards stack); reduced motion shows routes pre-drawn; zero console errors.

← All thirteen sites