Loading…
Live page · scroll inside
Premiumtravel/car rental · light · landing page · gsap · lenis · html
Kerbside
A delivered car-hire service's site in kerb white, ink, signal red and road-marking yellow: a huge geometric headline over three ruled promises, a two-month calendar where every day is a button shaded and labelled by its own price for the chosen car class (weekends and the school holiday dearer), a start-to-end range picker with hover preview, and a receipt that re-prices with rolling figures, slides in the weekly discount at five days and adds extras; then delivery areas and plain answers.
What's inside
- 01Geometric wordmark barTurns translucent after 80 px.
- 02Huge geometric headline with three promisesH1 lines rise from masks; promise columns rise in turn.
- 03Day-priced calendar configuratorChoosing a class re-shades the calendar (cells fade to their new prices) and re-prices everything; picking a start then an end day draws the range; on pointer devices hovering previews the range; summary figures roll to their new values; the weekly discount line slides in at five days.
- 04Delivery areas as a ruled listRows rise in turn.
- 05Plain questionsRows rise in turn.
- 06Minimal 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.
