01Recreation

Tidewell Hall

A site that sells events and hotel stays at once: a scroll-driven home page over a WebGL water shader, a pinned campaign page and a booking flow behind every Book Room button.

Tidewell Hall, summer series campaign on a desktop screen — Summer Series campaign

Tidewell Hall, summer series campaign on a phone — Summer Series campaign

What I built

Home page that opens on a photo grid and dives into a live water shader.
Campaign page told inside a 400vh pinned section.
Booking modal with availability, nightly rates, a hold step and confirmation codes.

Engineering notes

Water shader in raw WebGL

Domain-warped noise with pointer ripples at a reduced internal resolution. It pauses off screen, renders a still frame for reduced motion and falls back to CSS without WebGL.

A version pin with a reason

Newer Framer Motion releases moved scroll-linked opacity to a native ViewTimeline, which broke multi-segment transforms inside the pinned section. The site stays on the release it shipped with, and the reason is documented.

What runs in demo mode

Forms, availability, rates and confirmation codes are generated in the browser.