Editorial / Travel site
Wanderlust
A spring-driven travel editorial — a viewfinder hero that opens on live footage and scenes that animate as one continuous, scroll-choreographed camera move.
View Live →- ( Next.js )
- ( React Spring )
- ( Scroll )
A Next.js 16 travel site built as a single spring-physics motion system: every transition runs through `@react-spring/web` off one shared requestAnimationFrame loop, with Lenis smoothing the scroll and a rem-based adaptive grid holding the composition together at any width.
The experience is a sequence of pinned, scroll-interpolated scenes — a viewfinder hero that opens on a video and follows the cursor, a container-query 'Destinations' index where pointing at a country turns its card toward you and dims the rest, a pinned philosophy block read as two states of one picture, a four-way 'How We Travel' accordion, and a closing plan panel with a frosted footer. Every scene is a single 0→1 scroll value with each layer interpolated off it, so stopping mid-transition still leaves a composed frame.
Notable
- One shared rAF ticker drives every scroll-linked component — N animated sections, one loop, ref-counted so an idle page costs nothing.
- The preloader waits for the hero video to actually have frames (not merely finish downloading), so the first frame is never a black rectangle.
- Destinations is one container-query scene: sixteen cards positioned in `cqw` units, so the whole composition scales 1:1 with the design at any viewport.
Stack
- Next.js 16
- React 19
- @react-spring/web
- Lenis
- Zustand
- Tailwind CSS v4
Want something like this?
Start a Project