Loading…
Live page · scroll inside
PremiumInsurance broker · light · landing page · gsap · lenis · html
Broker
An independent insurance broker's site in soft grey-white, teal and amber: a plain-English serif statement beside a named broker's card with last year's claim figures, then a premium estimator where business type and four sliders (turnover, staff, claims, excess) swing a needle across a four-band risk gauge, count the monthly premium and rescale a breakdown of the four covers. Then six cover cards that say what each pays for and what it doesn't, a bakery's nine-day claim as a timeline, a client quote and a teal call band.
What's inside
- 01Broker barSolid after 80 px.
- 02Plain-English statementStatement lines rise; the card rises.
- 03Premium estimator with risk gaugeEvery change swings the needle to the new risk score with a slight overshoot, counts the premium to its new value and rescales the breakdown bars.
- 04Cover in plain EnglishCards rise in turn.
- 05A claim, day by dayThe rule draws across and the steps rise in turn.
- 06Client quoteLines rise.
- 07Call RuthLines rise.
- 08FooterNone.
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.
