Luxury Yacht Club Website Template

YORCH is a private yacht club and luxury charter brand, and it is the most ambitious template in the Siteglade library. Nine looping ocean and fleet videos, a fixed full-screen hero that the rest of the page scrolls over, and five full-screen overlay pages layered on top of a single-page site.

The structural idea is worth understanding before you fork it: the hero never scrolls away. It is fixed behind everything, and the content sections slide over it on a solid background, so the ocean is always there underneath. Scroll back to the top and the sea is exactly where you left it.

It is a Vite and React project on the Pro and Max plans, with the public preview open to everyone.

A single page with five overlay pages on top

The main scroll runs through a brand manifesto, experiences, yacht specifications, testimonials, membership, an academy section, a concierge form, an FAQ, a press strip and the footer. That alone would be a full site.

On top of it sit five overlays, each opened from the header or the staggered side menu and each covering the full screen: fleet, journeys, membership, about and blog. This is a deliberate alternative to routing — nothing navigates away, nothing reloads, and the ocean underneath stays continuous. The fleet overlay is the deepest of them, with a spec drawer for each yacht; the shipped fleet is three vessels, Ocean Eclipse, Black Sovereign and Azure Horizon, each with a tagline and a specification set.

A cookie consent component ships with the template, which matters for a brand operating in Europe. Siteglade also gives every project full bilingual legal pages in English and German if you need privacy, terms, cookies and Impressum coverage alongside the site itself.

Everything the template ships

The main scroll and the overlays are separate component sets, which is why the file list is longer than a typical landing page:

• Header and a GSAP staggered side menu that opens in sequence
• Hero — fixed full-screen looping video the page scrolls over
• Ripple trail — a cursor effect across the whole document
• Brand manifesto, experiences and yacht specifications in the main scroll
• Testimonials, membership and academy sections
• Concierge form, FAQ, press strip and footer
• Fleet overlay with a per-yacht spec drawer
• Journeys, membership, about and blog overlays
• Cookie consent

Design notes

Warm off-white paper sections against deep navy, so the page alternates between the sea and something that reads like printed stock. Type is all-uppercase Instrument Serif with alternating italic lines — a headline where every other line tilts, which is the template signature and appears everywhere from the manifesto to the overlay titles.

Glassmorphism is used heavily and, unusually, correctly: because there is always video behind the interface, frosted panels have something real to blur. The same treatment on a flat background would look like a decoration, but here it is doing the job it was invented for.

The side menu staggers open with GSAP rather than sliding as one block, and a ripple trail follows the cursor across the document. Both are showy, and both are consistent with a brand whose entire proposition is atmosphere.

The stack under the hood

A Vite single-page app running the newest Tailwind alongside two motion libraries.

• Vite 8
• React 19 and TypeScript
• Tailwind CSS v4 with tw-animate-css
• Motion 12 for component transitions
• GSAP for the staggered menu and scroll effects
• Nine looping MP4 backgrounds across the hero, fleet and overlays

Adapting it with a Siteglade prompt

Be realistic about the media budget. Nine looping videos is what makes this template feel expensive, and replacing them with three will change the experience more than any copy edit. If you have limited footage, tell the agent up front and ask it to consolidate.

A prompt that respects that: "Rebuild this for Northmoor, a private ski club in the Alps. Keep the fixed hero and the overlay structure but reduce it to three overlays: lodges, seasons and membership. Change the three fleet entries to three lodges with their own spec drawers. Rewrite the manifesto around altitude and solitude instead of the sea, and keep the navy and off-white palette."

The overlays make this template unusually adaptable, because each one is effectively a page you can repurpose or delete without touching the others. Ask the agent to drop the academy section or the press strip if you have nothing true to put in them.

What to change first

This is a media-first template, so the order is unambiguous:

• The hero video, which is on screen for the entire visit
• The fleet entries and their spec drawers — the only hard data on the site
• The press strip, which must be removed unless you have genuine coverage to cite
• Testimonials — replace with real quotes or delete the section
• The manifesto copy, which is the voice of the whole brand

Last updated: 2026-08-16