A cinematic, compass-led website for a luxury travel planner.
- Role
- Design · Front-end · DevOps
- Year
- 2026
- Type
- Travel website
- Status
- Built for royalcompasstravels.com
Overview
12
Designed sections
5
Signature motion moments
6
Step journey planner
~150
Lines of motion runtime
01
The hero compass follows the cursor with damping and reads out a live heading. Hover a destination and the needle swings to its real great-circle bearing, the coordinates count up and a route line draws itself.
A flight path draws as you scroll and lights each step it passes; four pillars sit on N, E, S and W of a turning dial; a pinned gallery moves sideways as you scroll down; and a six-step journey planner with validation and focus management replaces the contact form.
02
React 18, TypeScript and Vite with plain CSS design tokens and Lenis smooth scrolling — and no animation library. The whole motion system is about 150 lines, and every effect has a reduced-motion fallback.
In production it runs as a lightweight WordPress theme. Every push to main builds the site and deploys it through GoDaddy’s CI/CD; the theme handles legacy redirects, security headers, journey-planner enquiries and a maintenance switch.
What’s inside
- Live compass & heading
- Great-circle bearings
- Scroll-drawn flight path
- Pinned horizontal gallery
- Six-step journey planner
- CI/CD to WordPress
Built with
- React 18
- TypeScript
- Vite
- Lenis
- WordPress theme
- GitHub Actions
- GoDaddy
Next project
Pabloch Tech →
My independent studio for websites, online stores and digital products.