Real estate · Dark

Canopy

A single drone tracking shot, tied to the scroll, glides through the show home room by room while short, light phrases swap at the top of the screen, until the page comes to rest on an almost empty warm-gray paper.

Palette

--bg#EFEDEB
background of the sections after the flight (warm-gray paper)
--tinta#141414
text on light, solid pill button
--branco#FFFFFF
text over the video, light button at the end of the flight
--texto-2#66635F
subtitles and captions on light (the #8A8784 seen in the video gives only 3:1)
--acento#8F5A2C
sunset amber darkened to 4.9:1: links, focus, selector detail
--linha#D9D6D2
input borders and dividers

Typography

Display: light-weight (300) geometric grotesque, mixed case, tracking -0.03em, centered, always a single phrase of up to 7 words ending in a period — clamp(1.8rem, 3.2vw, 2.8rem) — suggestions: Urbanist Light / Outfit Light
Body: same family at 300–400, 12–13px, centered under the title, line-height 1.5, 80% white (video) or gray (light)
Support/labels: scene caption in the bottom-left corner: room name at 11px weight 500 + data line at 10px, 60% opacity
Treatments: no uppercase, no bold; contrast comes from size alone. The logo is the word itself at 13px, no symbol.

Sections

Nav — minimal: brand name in the top-left corner, small pill button on the right (translucent over the video, black over light). No links.
Hero / pinned flight — full screen pinned for several viewport heights: drone frame sequence (aerial of the house → entry over the water → living room → dining → suite → exit through the pool). Top center: title phrase + support line, swapping with each chapter. Bottom-left corner: room caption.
Flight closing — the last chapter shows the facade across the pool with a title, support line and a centered white pill button.
Site plan — light background, centered two-line title, support line, wide aerial image (≈ 60% of the width) with slightly rounded corners.
Unit types — centered title + support, two vertical photos side by side with a caption (name on the left, data on the right) beneath each.
Nature — long centered phrase over 2 lines, large photo of the forest/trail.
Asymmetric gallery — photos of different sizes scattered across an offset grid with lots of empty space, minimal caption under each.
Booking — centered two-line title, support text, inline form (name, WhatsApp, day select, black button).
Footer — email and "back to top" on the left, image credits on the right, all at 10px.

Motion and interaction

Frame-based flight: scroll scrub → sequence of ~180–300 frames drawn on a <canvas> (frames-canvas), section pinned at ~800vh; Lenis + GSAP ScrollTrigger.
Chapter swap: progress crosses a threshold → the current title exits (opacity 1→0, y 0→-12px, blur 0→8px, 400ms) and the next one enters in reverse with a 120ms delay.
Room caption: swaps with a 300ms fade and a thin progress line.
Adaptive nav: when the pin ends, the nav button goes from translucent to solid black (200ms).
Post-flight reveal: images enter with clip-path inset(8% 8% round 12px)→inset(0 round 8px) and scale 1.06→1; text with fade/y 16px.
Parallax gallery: each photo with its own speed (yPercent -6 to -18) on scrub.

Components

Pill button: 28px height, padding 0 14px, 11px text, 999px radius; translucent (blur 10px, 25% white border), white and black variants.
Centered title block: 1-line phrase + 1-line support, max width 640px.
Scene caption: 2 lines, 11/10px, aligned to the 16px margin.
Unit type card: 4:5 photo with 6px radius + caption line with name (left) and data (right) at 10px.
Inline form: 32px inputs with a 1px --linha border, 999px radius, no visible label (placeholder + aria-label).
Panoramic image: 8px radius, no shadow.