Construction · Dark

Plumb

Five drone shots glued to the scroll tell an entire build, from the wireframe drawing over the plot to the lit-up house, captioned by a single sentence that completes itself through ellipses.

Palette

--bg#0e0e0e
background under the videos and dock bar
--branco#fdfdfd
data sheet that covers the film at the end
--texto#ffffff
captions and nav over the video
--texto-escuro#121212
numbers and titles on white
--texto-2#6b6b6b
labels and metadata on white (5.2:1); #9a9a9a on --bg
--linha#e6e6e6
data sheet dividers
--acento#dfeeff
luminous wireframe line and active dock marker

Typography

Display: light neo grotesque, weight 300, mixed case, tracking -0.03em, centered; caption at clamp(1.8rem,3.4vw,3rem) — suggestions: Inter Tight (300) / Geist (300).
Body: same family 400, 12–13px, 2 centered lines under the caption.
Support/labels: mono 8–9px uppercase, tracking 0.16em (coordinates, "YEAR · PHASE", quote link) — suggestions: Geist Mono / IBM Plex Mono.
Treatments: continuous caption between scenes through ellipses ("…phase…"); data sheet numbers in large 300 with decimal comma; nothing in bold.

Sections

Opening — drone descends through mist over the plot (coast, forest); a wireframe of the house draws itself over the lot.
Nav — appears after the opening: centered brand at 13px; mono quote link with an arrow on the right.
Film in phases — five shots (design, foundation, structure, finishing, handover) tied to the scroll; single phrase at the bottom center that changes per phase; black dock at the base with an arrow, "YEAR · PHASE" and a menu icon; mono coordinates in the bottom-left corner.
Data sheet — white panel rises over the last shot: final caption still visible at the top, row of 5 large numbers with tiny labels.
Sequel — institutional/contact content below (list of projects, CTA).

Motion and interaction

Drone shots: scroll scrub → canvas frame sequences, one block per phase (≈ 100vh each); GSAP ScrollTrigger.
Wireframe: scroll scrub in the opening → SVG lines of the house volume draw themselves (stroke-dashoffset) and glow; vanish when the real build appears.
Caption: swaps per phase → word exits with blur and the next enters; ellipses keep the sentence going.
Dock: updates year/phase with a vertical swap.
Data sheet: scroll → white panel rises (y 100% → 0) and numbers count up.
Mist: load → opening starts overexposed (brightness 1.6) and settles over 1.2s.
Tech: canvas image-sequence + GSAP ScrollTrigger + Lenis.

Components

Dock: 220×28px black pill, ↓ arrow, central mono text, 3-line icon.
Phase caption: centered display 300 + 12px support line.
Mono link with a "↘" arrow 8px.
Data cell: 7px mono label on top, 26px number in 300.
Wireframe: SVG with a 1px --acento stroke and glow (drop-shadow 0 0 6px).