Loading…
Live page · scroll inside
PremiumDelivery route planning · light · landing page · gsap · lenis · html
Fleetly
A delivery-routing site in road yellow and asphalt black on pale map grey: the hero dispatch board plans a florist's Tuesday on an SVG town map, four coloured routes draw from the depot, four vans drive them and seven stops flip from Unassigned to Assigned to Delivered with times while route time and distance count up, with pause and replan. Then constraint cards with working mini-diagrams, customer arrival texts with big figures, a rate card and a black CTA with a sliding road line.
What's inside
- 01Route-line barSolid after 80 px.
- 02Dispatch map heroDispatch draws four coloured routes from the depot, then four vans drive them and park out of sight; each stop turns from Unassigned to its van's colour, then to Delivered with a time as the van reaches it. Route time and distance count up. It runs once on view; Pause holds the vans.
- 03Constraint cardsDiagrams fill as cards rise.
- 04Customer textsBubbles pop in one after another; figures count up.
- 05Rate cardRows rise.
- 06Road-yellow bandHeading lines rise; the road dashes slide once.
- 07FooterNone.
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.
