Loading…
Live page · scroll inside
FreeTravel / Tour operator · light · landing page · svg · gsap · lenis · html
Atlas
A walking-holiday company on warm paper: a compass needle settles on north, an arch-topped hero photograph unrolls with a slow Ken Burns drift, then a pinned map draws a five-day route across procedurally drawn contours while a walker dot rides the line, pins pop at each hut and the day's copy swaps beside it; three journey cards settle with their own slow Ken Burns drift, a feature row, journal teasers and a teal newsletter box follow.
What's inside
- 01Compass loaderThe needle swings and settles on north; the cover lifts.
- 02Serif navLinks tint accent on hover.
- 03Arch heroLines rise from masks; the figure unrolls and the photograph settles; the hut card fades up.
- 04Self-drawing route mapScrolling draws the route, moves the walker, pops the pins and swaps the day; pin labels scale with the map so they always render at 12.5 px.
- 05Journey cardsCards rise; photographs settle with a slow drift; hover lifts the caption.
- 06Three reasonsCards rise in sequence.
- 07Journal teasersCards rise; hover lifts and zooms the thumbnail.
- 08Newsletter boxThe box rises; headline lines rise from masks.
- 09Footer stripNone.
Utility pages in the same file: 404 · Style guide · Password · Changelog
How to use it
From prompt to a live page.
- 01Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
- 02Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
- 03Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
- 04Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
- 05Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.
