Live page · scroll inside

Premiumsailing school · light · landing page · gsap · lenis · html

Fairlead

A sailing school's site in chart-paper white, navy ink and racing-mark orange: a big serif headline over a top-down photo of a junior fleet and a quay board of the morning's wind, tide and sea temperature; then a points-of-sail instrument where you drag the wind round a top-down dinghy on a compass dial, the boom swings to leeward and trims, the sail's belly flips with the tack and flaps in the no-go zone, and a polar diagram moves its marker to the boat speed for Force 3, 4 or 5; then a five-rung course ladder, a Beaufort strip that marks the Force 2 to 5 sailing window with wave-height bars, the fleet with two photos and counters, and a navy booking block listing the next starts.

Placeholder photos by Rowan Heuvel, James Wainscoat and Kelly Sikkema on Unsplash. Replace them with your own before launch.

What's inside

01
Pennant wordmark bar
Turns solid with a hairline after 80 px; link underlines grow with scaleX.
02
Headline over a fleet photo and a quay board
Headline lines rise from masks; photo, intro, buttons and board rise in turn.
03
Points-of-sail dial with a polar diagram
Dragging turns the wind; the boom trims, the sail mirrors with the tack and flutters in irons; the polar marker and ray follow. The wind sweeps once on first view.
04
Course ladder
Rows rise in turn; hovering a row lifts a paper-coloured band behind it and fills the arrow.
05
Beaufort strip with the sailing window
Columns rise in turn; wave bars grow from the waterline.
06
Two photos and the fleet in numbers
Photos and copy rise; counters run from zero.
07
Navy booking block with the next starts
List rows rise in turn.
08
Single-line 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

Premium

Lanternfish

scuba dive centre

Template

Free

Pollard

arborist and tree surgeons

Template

Free

Abacus

Accountancy practice

Template

Premium

Kittiwake Air

travel/regional airline

Template

Loading…

Fairlead

Placeholder photos by Rowan Heuvel, James Wainscoat and Kelly Sikkema on Unsplash. Replace them with your own before launch.

What's inside

Pennant wordmark bar

Turns solid with a hairline after 80 px; link underlines grow with scaleX.

Headline over a fleet photo and a quay board

Headline lines rise from masks; photo, intro, buttons and board rise in turn.

Points-of-sail dial with a polar diagram

Dragging turns the wind; the boom trims, the sail mirrors with the tack and flutters in irons; the polar marker and ray follow. The wind sweeps once on first view.

Course ladder

Rows rise in turn; hovering a row lifts a paper-coloured band behind it and fills the arrow.

Beaufort strip with the sailing window

Columns rise in turn; wave bars grow from the waterline.

Two photos and the fleet in numbers

Photos and copy rise; counters run from zero.

Navy booking block with the next starts

List rows rise in turn.

Single-line 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.