Hospitality · Dark

Shoreline

A single architectural tracking shot tied to the scroll, captioned like cinema with wide uppercase letters, mono coordinates and a terracotta red that only appears to book.

Palette

--bg#1d1a13
dark background under the video and bottom veil of the scenes
--creme#e8e1d7
background of the content sections after the film
--texto-claro#f5f0e7
titles over the image
--texto-escuro#1f1b16
titles and numbers on cream
--texto-2#655e54
secondary paragraphs, mono metadata on cream (the #8f877b seen in the video gives only 2.7:1)
--acento#c54e3a
booking button, caption dot, progress bar
--linha#cfc6b8
vertical and horizontal dividers in the cream section

Typography

Display: expanded grotesque (125% width), weight 800, uppercase, tracking -0.01em, line-height 0.92; giant name at clamp(4rem,14vw,12rem); scene captions at clamp(1.8rem,4vw,3.4rem) — suggestions: Archivo (wdth axis 125, 800) / Unbounded.
Body: neutral grotesque 400, 13–15px, --texto-2 color on cream, 3 lines at most — suggestions: Inter / Manrope.
Support/labels: mono 10–11px uppercase, tracking 0.12em (coordinates, scene counter, menu links, room metadata) — suggestions: JetBrains Mono / IBM Plex Mono.
Treatments: captions always on 2–3 short hand-broken lines; "NN · NAME" index in mono with a red dot; tabular numbers in the data.

Sections

Nav — house name in 13px display on the left; in the center a mono "NN / SCENE" indicator that changes with the film; on the right 4 mono links and a thin-bordered "book" button.
Hero / film — full-bleed video tied to the scroll (canvas frame sequence); giant name at the bottom left; 3 lines of description; bottom ruler with coordinates on the left, scroll instruction in brackets in the center, 01/04 counter on the right.
Captioned scenes — the same shot continues (interior → veranda → pool → aerial of the forest); each scene gets a caption: mono label with a red dot, 2–3 line uppercase title, short phrase; on the last one the red button appears.
House spec sheet — cream band with 5 columns separated by vertical lines: mono label on top, display number below.
Rooms — 2-line uppercase title on the left; numbered list of rooms (mono index, uppercase title, paragraph, mono metadata line) in the left column; sticky square image on the right that swaps with each item, with a mono tag in the bottom-left corner.

Motion and interaction

Tracking shot: scroll scrub (pin ~500vh) → JPG/WebP frames drawn on a canvas; ~240 frames; GSAP ScrollTrigger scrub 0.5.
Name exit: progress 0–0.12 → giant name and description rise and vanish (y -60, opacity 0).
Captions per scene: progress windows → title lines reveal via a mask (yPercent 110→0, stagger 0.08, 0.8s expo.out) and exit upward.
Counter and breadcrumb: update per scene with a vertical digit swap (0.4s).
Progress bar: 1px --acento line on the bottom ruler grows scaleX 0→1 with the pin.
Rooms: sticky image swaps via crossfade + clip-path when the active item crosses 50% of the viewport.
Smooth: Lenis.

Components

Booking button: --acento background, 10px uppercase mono cream text, 2px radius, padding 10×16.
Nav "book" button: 1px cream border at 40%, mono 10px.
Scene caption: 6px red dot + mono label + uppercase display title + 12px phrase.
Bottom ruler: 1px line + 3 mono blocks (left/center/right).
Data cell: 9px mono label + 28px display number, vertical divider on the left.
Room item: mono index, 24px display title, paragraph, mono metadata separated by " · ".
Image tag: cream rectangle with 9px mono text.