Live page · scroll inside

Freeestate agent · light · landing page · gsap · lenis · html

Keyturn

An independent estate agent's site in warm paper, green-black ink and bottle green: the hero pairs a headline and a price histogram of every listing in town (two draggable thumbs) with an SVG town map of numbered pins and market dots; narrowing the range greys out bars, dots, pins and listing cards outside it, and hovering a card lights its pin (and the other way round). Then six photo listing cards, a sold-nearby table of asking against achieved prices, and a valuation strip.

Placeholder photos by Viktor Forgacs, Peter Boccia, Ivy Barn, Jonathan Borba, Noushy DEL and RECEP TİRYAKİ on Unsplash. Replace them with your own before launch.

What's inside

01
Key-mark wordmark bar
Turns translucent after 80 px.
02
Headline, price histogram and a pinned town map
Headline lines rise; histogram bars grow from the baseline in turn; pins drop in with a short bounce. Dragging the thumbs dims bars, dots, pins and cards outside the range; hovering a card or pin lights its partner.
03
Six listing cards tied to the pins
Cards rise in turn. Cards outside the price range grey out with an 'Outside your range' tag; hover or focus lights the matching pin.
04
Asked against achieved table
Rows rise in turn.
05
Valuation request strip
Content rises.
06
Minimal footer
None.

Utility pages in the same file: 404 · Style guide · Password · Changelog

How to use it

From prompt to a live page.

01
Walk the page
The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.
02
Pick a palette
Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.
03
Pick your stack
Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.
04
Copy the prompt
It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.
05
Make it yours, then iterate
Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.

More templates

Free♥ 0

Abacus

Accountancy practice

Template

Premium♥ 0

Kittiwake Air

travel/regional airline

Template

Premium♥ 0

Laneline

sport/mobile app

Template

Free♥ 0

Beacon

Feature flags

Template

Loading…

Keyturn

What's inside

Key-mark wordmark bar

Turns translucent after 80 px.

Headline, price histogram and a pinned town map

Headline lines rise; histogram bars grow from the baseline in turn; pins drop in with a short bounce. Dragging the thumbs dims bars, dots, pins and cards outside the range; hovering a card or pin lights its partner.

Six listing cards tied to the pins

Cards rise in turn. Cards outside the price range grey out with an 'Outside your range' tag; hover or focus lights the matching pin.

Asked against achieved table

Rows rise in turn.

Valuation request strip

Content rises.

Minimal footer

None.

How to use it

From prompt to a live page.

Walk the page

The preview is the real template: loader, scene, scroll choreography. Scroll inside it or open it full-screen.

Pick a palette

Token sets re-tint the whole page live, scene included. The prompt carries the one you chose.

Pick your stack

Single HTML, Next.js, React, Vue, Astro, WordPress blocks, Shopify sections or a Webflow build guide.

Copy the prompt

It carries the art direction, the tokens, the motion system and every section's layout, motion and content, in order.

Make it yours, then iterate

Swap copy and images first, keeping the structure. Then refine section by section rather than re-running the whole prompt.