Live page · scroll inside

Premiumboutique hotel · light · landing page · gsap · lenis · html

Harbor

A boutique-hotel site in sea-salt white and harbour blue: a floor-plan room picker (three floors drawn in SVG, hover tooltips, a room card that crossfades), a price-heat calendar where each night is tinted by its price and two clicks pick a range, a sticky booking rail that totals the stay, and a block on the house's own spaces.

Placeholder photos by Dave Photoz and Vije Vijendranath on Unsplash. Replace them with your own before launch.

What's inside

01
Harbor preloader
The rope path draws over 1 s; the name fades; the slab lifts.
02
Fixed bar
Turns translucent after 80 px; underlines draw.
03
Harbour hero
Photo settles from 1.06 and drifts; lines rise; the tide value in the card counts.
04
Floor-plan room picker
Switching floors fades the plan and redraws; hovering a room fills it with a pale accent and shows a tooltip; selecting one strokes it in the accent, crossfades the card and writes the room into the rail; the harbour-side rooms have a soft wave line that animates.
05
Price-heat calendar
Cells pop in with a 6 ms stagger; the heat tints fade in after; a hover shows the price large; the selected range sweeps in with a stagger; the total counts.
06
Inside the house
Photos unroll with a stagger; hover zooms.
07
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…

Harbor

Placeholder photos by Dave Photoz and Vije Vijendranath on Unsplash. Replace them with your own before launch.

What's inside

Harbor preloader

The rope path draws over 1 s; the name fades; the slab lifts.

Fixed bar

Turns translucent after 80 px; underlines draw.

Harbour hero

Photo settles from 1.06 and drifts; lines rise; the tide value in the card counts.

Floor-plan room picker

Switching floors fades the plan and redraws; hovering a room fills it with a pale accent and shows a tooltip; selecting one strokes it in the accent, crossfades the card and writes the room into the rail; the harbour-side rooms have a soft wave line that animates.

Price-heat calendar

Cells pop in with a 6 ms stagger; the heat tints fade in after; a hover shows the price large; the selected range sweeps in with a stagger; the total counts.

Inside the house

Photos unroll with a stagger; hover zooms.

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.