Live page · scroll inside

Premiumreal-estate development · dark · landing page · gsap · lenis · html

Keystone

A residential-tower launch site in near-black and brass whose isometric tower assembles slab by slab as you scroll a pinned block, with a hover-annotated SVG floor plan that redraws for each plan type, an amenity bento and a live build log.

Placeholder photos by Nate Watson on Unsplash. Replace them with your own before launch.

What's inside

01
Stacking preloader
Six slabs drop into place from above, 90 ms apart, with a brass top face; the name fades in; the slab lifts away and the hero intro begins.
02
Fixed bar with brass pill
Turns translucent dark with a blur after 80 px; link underlines draw in brass on hover.
03
Headline over a dusk skyline
Lines rise from masks; the photo settles from 1.08 scale and drifts up 12 % as the hero scrolls (parallax); the hint's line pulses a few times, then rests.
04
Isometric tower assembling on scroll
Pinned for 2.6 viewport heights with scrub 0.5; each slab drops 160 px from above with opacity 0→1 and a small overshoot as the progress passes its index; the readout counts floors; a fact lights when its floor band is reached (lobby 1, residences 2–38, sky terrace 41, crown 42). On mobile the block is not pinned and the tower builds once on enter.
05
Floor plan with hover hotspots
Hovering a room fills it with brass at 18 % and a tooltip with the room name and area follows the pointer (0.18 lerp); clicking a plan card re-draws the rooms (widths tween over 0.6 s) and swaps the figures.
06
Amenity bento
Tiles unroll (clip-path) with a 100 ms stagger; images drift 6 % on hover; the count-up runs on enter.
07
Construction progress
The ring's arc draws to 61 % and its number counts up on enter; log rows rise with a stagger; the current row's dot pulses three times as the log enters.
08
Enquiry form
The panel rises in; the button's label slides up and a second label slides in on hover; submitting shows an inline 'On the list' confirmation.
09
Minimal footer
None beyond link colour on hover.

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…

Keystone

Placeholder photos by Nate Watson on Unsplash. Replace them with your own before launch.

What's inside

Stacking preloader

Six slabs drop into place from above, 90 ms apart, with a brass top face; the name fades in; the slab lifts away and the hero intro begins.

Fixed bar with brass pill

Turns translucent dark with a blur after 80 px; link underlines draw in brass on hover.

Headline over a dusk skyline

Lines rise from masks; the photo settles from 1.08 scale and drifts up 12 % as the hero scrolls (parallax); the hint's line pulses a few times, then rests.

Isometric tower assembling on scroll

Pinned for 2.6 viewport heights with scrub 0.5; each slab drops 160 px from above with opacity 0→1 and a small overshoot as the progress passes its index; the readout counts floors; a fact lights when its floor band is reached (lobby 1, residences 2–38, sky terrace 41, crown 42). On mobile the block is not pinned and the tower builds once on enter.

Floor plan with hover hotspots

Hovering a room fills it with brass at 18 % and a tooltip with the room name and area follows the pointer (0.18 lerp); clicking a plan card re-draws the rooms (widths tween over 0.6 s) and swaps the figures.

Amenity bento

Tiles unroll (clip-path) with a 100 ms stagger; images drift 6 % on hover; the count-up runs on enter.

Construction progress

The ring's arc draws to 61 % and its number counts up on enter; log rows rise with a stagger; the current row's dot pulses three times as the log enters.

Enquiry form

The panel rises in; the button's label slides up and a second label slides in on hover; submitting shows an inline 'On the list' confirmation.

Minimal footer

None beyond link colour on hover.

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.