Scroll-driven film scenes
Two homepage scenes play through 155-frame and 100-frame WebP sequences on a canvas as you scroll, with separate frame sets for desktop and mobile.
SELECTED WORK / LUXURY TRAVEL
High Life Journeys.
Independent luxury cruise travel
A film-led website for an independent luxury cruise agency, with scroll-driven scenes, 98 destination and port guides and a direct inquiry form.
Visit live website (opens in a new tab)Explore the project
- CLIENT
- High Life Journeys
- INDUSTRY
- Luxury travel
- OUR WORK
- Website design & development, technical SEO
- WEBSITE
- highlifejourneys.com
THE PROJECT
A small luxury practice.
A website with real depth.
High Life Journeys is an independent cruise travel agency that plans voyages with Virgin Voyages, Princess Cruises and Viking, along with a few overland trips like Route 66. It is a deliberately small practice: one specialist plans each trip from the first conversation to the day the client steps aboard.
We designed and built the site on Next.js. It opens with a ship film and scroll-driven scenes, then gives the agency real depth: three cruise-line pages, six destination regions broken into 35 country and area pages and 63 port and place guides, five signature itineraries and a journal.
DESIGN STRATEGY
Quiet luxury,
and the feeling of being at sea.
The design presents a small, personal practice rather than a booking engine. Warm bone and sand backgrounds, deep navy type and a single teal accent give it a quiet, editorial feel, and full-bleed ports and coastlines carry the rest.
Motion makes the trip feel like something you move through. Two homepage scenes play through photographic frame sequences as you scroll, a route map draws itself from Miami to Santorini with a ship following the line, and rows of port photos drift past in opposite directions. The inquiry form sits on the homepage as well as the contact page.
TYPOGRAPHY
Fraunces for headlines over Inter body text, both self-hosted.
COLOR
Warm bone and sand, deep navy type and one restrained teal accent.
MOTION
Scroll-driven film scenes, a route map that draws itself and drifting port photos, with reduced-motion fallbacks.
HOW IT’S BUILT
Next.js and GSAP,
prerendered at the edge.
The site runs on Next.js 16 with the App Router and React 19, styled with Tailwind CSS 4, with self-hosted fonts and responsive WebP images. Scroll motion runs on GSAP with ScrollTrigger and MotionPathPlugin, and Lenis handles smooth scrolling.
Inquiries are validated with Zod and posted to the site’s own API route, and the prerendered pages are delivered through Amazon CloudFront.
- FRAMEWORK
- Next.js 16 (App Router) and React 19
- STYLING
- Tailwind CSS 4 with a custom theme
- MOTION
- GSAP ScrollTrigger and MotionPathPlugin, with Lenis
- FORMS
- Zod-validated inquiries to the site’s own API
- IMAGES
- Responsive WebP through next/image
- HOSTING
- Prerendered pages through CloudFront
SEARCH, BUILT IN
Every port
gets a guide.
Cruise planning starts with places, so every region, country and port has a page that search engines can understand.
Each page has its own title, meta description and canonical address, following one consistent title pattern.
TravelAgency structured data runs across the site and lists the cruise regions the agency serves and the lines it books.
Country and port pages carry TouristDestination and breadcrumb markup, and itinerary pages describe each trip as a TouristTrip with its stops in order.
Cruise-line pages are marked up as a Service, and journal posts as BlogPosting with a publish date.
An XML sitemap lists every page, and robots.txt points crawlers to it while keeping the API routes out.
Images are served as responsive WebP and load lazily, and top-level pages share a generated Open Graph image.
THE SAME WEBSITE. A SMALLER SCREEN.
PROJECT HIGHLIGHTS
The details
that make it work.
98 destination pages
Thirty-five country and area pages link down to 63 port and place guides, built from templates that add destination and breadcrumb markup.
A spam-checked inquiry form
The form asks for party size, cruise line, region, dates and budget, and screens out bots with a hidden field and a timing check.
KEEP EXPLORING
Learn more about the services behind our work.
- Service
Web design & software
Custom websites, online stores and software built around your business.
- Service
Custom websites
A website designed and built around your services and your customers.
- Service
Ecommerce stores
Online stores with clear product pages, simple checkout and the integrations you need.
- Service
SEO
Technical fixes, content and local search that help customers find you.
- Service
Google Maps & local SEO
Your Google Business Profile and local listings, set up for nearby customers.
- About us
Client reviews
What clients say about working with our team.
YOUR NEXT WEBSITE
Planning a website
your customers will use?
Let’s talk about your business, your customers and what your website needs to do.