Real estate · Dark

Flythrough

A continuous drone flight tied to the scroll, in late-afternoon light, passes through the house room by room with thin uppercase captions, and exits through an arched window cut out of a light editorial page.

Palette

--bg-film#1A1410
background behind the film and bottom vignette
--bg#F1EDE9
light editorial background after the flight
--ink#1B1918
dark footer, solid buttons, text on light
--text-on-film#FBF7F2
headlines and nav over the film
--text-2#6F6861
paragraphs and captions on light (4.7:1 on --bg)
--accent#C98A5B
sunset copper: overlines, room numbers, hover
--line#D8D1C9
thin card frames, dividers

Typography

Display: thin (300) geometric grotesque, uppercase, slight tracking (+0.02em), tight line-height 0.95; hero clamp(36px, 4.4vw, 64px); huge final menu on 4 lines — suggestions: Jost 300 / Outfit 300
Body: same family 400, 12–14px, line-height 1.6
Support/labels: uppercase 8–9px with +0.24em tracking for nav, overlines ("01 · room") and buttons
Treatments: room captions alternating sides (left/right) and heights; large thin isolated number in the editorial section; logo only in letter-spaced letters

Sections

Nav — letter-spaced uppercase logo on the left, 4 micro-uppercase links in the center, outlined button with an arrow on the right; fixed over the film.
Hero — first frame of the film: facade at dusk; overline, 2-line uppercase title, short paragraph and white button in the top-left corner; tiny vertical labels on the right.
Flight (long pin) — the drone approaches, enters through the door and moves through the kitchen, dining room, living room and staircase; each room has a caption (number, 1–3 line title, phrase) that appears on alternating sides.
Exit — the drone exits through the entrance to the frontal aerial view; featured property caption with spec sheet and button.
Arched window — the light page rises over the film, leaving an arch-shaped cut-out (half ellipse) through which the video is still visible, shrinking until it vanishes.
Editorial — centered 2-line title; 3-column grid: text and button on the left, vertical photo in the center, two argument blocks on the right and a large number with a caption.
Catalog — 3 property cards in thin frames with crop marks at the corners: photo, number, name, spec sheet and link.
Footer/menu — dark block with giant thin uppercase links stacked on the left and contact/hours in microtext on the right.

Motion and interaction

Drone flight: scroll scrub with pin (~900vh) → canvas frame sequence advancing with progress; GSAP ScrollTrigger + Lenis.
Room captions: scroll → each caption has a progress window; enters with opacity and y 20px and exits before the next one (scrub).
Motion blur: comes from the film itself; the text doesn't move while the camera moves.
Arched window: scroll scrub → the light section has an arch-shaped mask (clip-path/SVG) whose radius shrinks from 60vw to 0, revealing the film inside and then closing.
Catalog cards: hover → photo scales 1.04 over 600ms and the link slides its arrow 4px.
Nav: on leaving the film, switches from white to --ink with a 300ms color transition.

Components

Light button: white rectangle, 8px uppercase text tracking .24em, arrow, 26px height, no radius.
Outlined button: 1px --line-film border, same text, arrow.
Dark button: --ink background, white micro-uppercase text.
Room caption: "NN · NAME" overline at 8px copper, 28–36px thin uppercase title, 11px phrase.
Property card: 1px --line frame with 4px squares at the corners, 4:3 photo, 9px number, 16px name, 10px gray spec sheet, micro-uppercase link.
Argument block: 14px title + 2 lines at 11px --text-2.
Highlight number: 44px weight 200 + 8px uppercase caption.