Loading…
Live page · scroll inside
Premiumtravel/regional airline · dark · landing page · gsap · lenis · html
Kittiwake Air
An island airline's site on a night-sea ground with gull-bill yellow and sea blue: a large serif headline beside a ruled next-departure card (no barcode), a top-view ATR 72 seat map of eighteen rows where choosing a seat rolls its zone, side, legroom and price and redraws an oval window view (hills on the left, open sea on the right, the wing and propeller over rows 5 to 8, slow clouds with a pause), a ruled route timetable, a commuter's quote and three fares.
What's inside
- 01Serif wordmark barTurns translucent after 80 px.
- 02Night-sea headline with next departureH1 lines rise from masks; the flight block rises; the departure clock line fades in.
- 03Seat map with window viewChoosing a seat moves a highlight ring onto it, rolls the details and price, and crossfades the window scene (side swap slides the horizon, wing rows slide the wing in from the edge); a slow cloud drift in the window has a pause toggle.
- 04Routes as a ruled timetableRows rise in turn.
- 05Passenger pull quoteLines rise from masks.
- 06Three fares side by sideColumns rise in turn.
- 07Minimal footerNone.
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.
