Solstice — Retreat Landing Page
A wellness retreat page where the footage is the pacing: four chapters scrubbed by the scrollbar, a horizontal rail of rooms that pans as you descend, and a booking bar that only commits once you have seen the place.
The prompt — 4 sections
Film Foundation
Build a landing page for **Solstice**, a coastal retreat. The whole page sits on one continuous shot: a video whose playhead is the scrollbar.
- **Stack:** React + Tailwind. The film runs on a WebGL quad so the shot can be graded, grained and bent by scroll velocity; without WebGL the plain `<video>` shows through and nothing is lost but the grade.
- **Palette:** page `#07090b`, ink `#EEF1EE`, muted `#8E958E`, accent `#9FC7A6` — a cool sage that reads as calm rather than clinical. One accent, used for rules and the scrubber only.
- **Type:** a humanist sans for prose, a mono at 11px uppercase with 0.16em tracking for chapter labels. Display sizes at `clamp(2.5rem, 6vw, 5rem)` and −0.03em tracking.
The governing rule: **the scroll is the edit.** Chapters do not animate independently of the footage — each one fades in over a stretch of film chosen because that is what the camera is doing at that moment. A chapter that lands on the wrong frame reads as a bug even when nobody can say why.
Give the stage five viewports of track. Fewer and the scrub feels twitchy; more and visitors think the page has stopped.
Chapters
Four acts over the film, each fading in and out on its own band of scroll progress, separated by a beat of bare footage rather than overlapped — two headlines at half opacity read as a mistake, a gap between them reads as a dissolve.
1. **Arrival** (0.00–0.25) — the name, one line on what the place is, and a mono line giving latitude and the number of rooms. No booking control yet.
2. **Water** (0.30–0.50) — a single sentence about the swim, and three figures: water temperature, distance to the cove, months open.
3. **Table** (0.55–0.75) — the food, in two short paragraphs. No menu, no photographs of plated food.
4. **Rooms** (0.80–1.00) — what a room actually contains, written as a list of absences: no television, no minibar, no check-in desk.
Drift each chapter −90px and zoom it 5% as it passes, so the type moves with the camera rather than sitting on top of it.
Over the film, a fixed scrubber pinned to the bottom edge: a hairline rule, a tick per chapter, a filled portion showing progress, and the percentage in mono at the right. It is a chapter index, not a control — do not make it draggable.
The Rail
Below the film, the rooms — as a horizontal pan rather than a grid.
The section is three viewports tall and holds a sticky stage. Inside it a `max-content` track slides sideways as the visitor scrolls down, so six rooms read as one continuous move along a corridor.
Drive the travel with a single transform: `translate3d(calc(var(--rail-p) * (100cqw - 100%)), 0, 0)`, where `--rail-p` is smoothed scroll progress. Because `100%` is the track's own width and `100cqw` is the stage's, the track always ends flush with the right edge whatever it contains — no measuring, no resize handler, nothing to go stale when an image loads late.
Each panel: a 420px-wide card, a mono room number, the room name, two lines, and the nightly rate. The active panel — the one nearest the centre of the stage — brightens; the others sit at 55%.
Under `prefers-reduced-motion`, drop the conceit entirely: the stage becomes an ordinary horizontally scrollable strip with snap points. Same content, same gestures, no hijack.
Booking & Close
A booking bar that does not appear until the film is behind the visitor — asking for a date before anyone has seen the place is how a retreat page reads as a hotel aggregator.
The bar is sticky to the bottom once the rail is in view: two date fields, a guest stepper, a nightly total that updates as the dates change, and one solid accent button. Tabular numerals on the total, so the figure does not shift width as it changes.
Close with a full-bleed still from the film — the poster frame, not a different photograph — a single line of copy, and the same booking control repeated. Beneath it, a mono line stating the three things people write in to ask: no minimum stay, dogs welcome, the last ferry is at six.
Footer: the wordmark, an address, three links, and the coordinates in mono.
