← All work

Overland

Expedition travel template with a panoramic scroll hero and live GPS coordinate readout

Template
Overland
Sector
Adventure Travel
Year
2025
Built with
Astro 5, React 19, Tailwind CSS v4
Pages
12
Open the live demo
Overland

Overland is a flagship template for expedition outfitters, adventure travel operators, and outdoor brands. Twelve pages cover a destination catalog with detail pages, packaged journeys with day-by-day itineraries and gear lists, guide profiles, a Markdown blog, FAQ, about, and contact. The hero is a 220vh panoramic traverse: a photograph four viewport widths wide slides horizontally as you scroll while a live GPS readout interpolates from 61.2247° N in the Norwegian fjords to 51.7267° S in Patagonia. Below it, a pinned ScrollTrigger section drags six destination cards sideways. Three color skins ship with a floating switcher, The Map (parchment #F5F1E8), Night Camp (dark forest with ember orange), and Arctic (glacier blue). Two-part custom cursor, magnetic buttons, animated counters, Lenis smooth scroll, and Astro View Transitions throughout.

What’s inside

  • 12 pages, Home, Destinations, Destination Detail, Journeys, Journey Detail, Guides, Blog, Post, About, FAQ, Contact, 404
  • Panoramic hero, a 400%-wide photograph pans to -75% across a 220vh sticky wrapper on a rAF-throttled scroll scrub
  • Live GPS counter that interpolates coordinates from the Norwegian fjords to Patagonia as the hero traverses
  • Pinned horizontal destinations track, GSAP ScrollTrigger pin + scrub drags six cards sideways with staggered reveals
  • 3 color skins with a floating switcher, The Map (parchment/forest/rust), Night Camp (ember orange), Arctic (glacier blue)
  • 4 Zod-validated content collections, 10 destinations, 5 journeys, 4 guides (JSON) and 5 blog posts (Markdown)

The signature

The hero is a 220vh scroll traverse. A photograph rendered at 400% of the viewport width sits inside a sticky 100vh frame and slides to -75% as you scroll, so the landscape pans past you instead of the page moving. At the same time a GPS readout in the corner interpolates live from 61.2247° N / 6.8782° E in the Norwegian fjords to 51.7267° S / 72.9651° W in Patagonia, and the gradient overlay darkens with progress. Scroll further and a pinned ScrollTrigger section takes over, dragging six destination cards horizontally.

See it live

The demo is public: https://fpsjago.github.io/overland/. 12 pages, built with Astro 5, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.