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
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.