PresetHaus
← All presets

Real estate · Dark

Skyline

A tower photographed in the late afternoon becomes an interface: each floor lights up under the cursor and, on a click, opens as a furnished 3D model over a deep midnight blue, before the page lightens into a paper-and-olive-green editorial.

Palette

  • --bg-noite#0E141D

    background of the 3D scenes and the unit panel

  • --ceu#25549A

    top of the hero photo's sky (reference for overlays)

  • --bg-claro#FCFDFB

    background of the editorial sections (spec sheet, form, footer)

  • --campo#F3F5EF

    inputs and subtle blocks on light

  • --acento#56673F

    olive green: primary CTA, active chip, italics on light

  • --dourado#D9B98A

    italic of the title over the night photo, markers

  • --texto#16191C

    text on light

  • --texto-2#8C9189

    secondary paragraphs and labels

  • --linha#E2E5DE

    technical table dividers (light) / rgba(255,255,255,.12) on dark

Typography

  • Display: neo-humanist grotesque in regular weight (400), mixed case, tracking -0.02em, with one word per title swapped for a high-contrast italic serif (didone/transitional) — clamp(2.6rem, 5vw, 4.6rem), line-height 1.02 — suggestions: Inter Tight + Instrument Serif Italic / Geist + Fraunces Italic
  • Body: same grotesque at 15–16px, weight 400, medium gray, line-height 1.55, columns of ~38ch
  • Support/labels: uppercase grotesque 10–11px with 0.16em tracking for overlines ("VISIT", "FLOOR"), and condensed serif for the panel's large numbers (floor, area, price)
  • Treatments: logo in a thin serif; giant floor numeral with a superscript "º"; numbers with font-variant-numeric: tabular-nums; never underlines — links with a "→" arrow

Sections

  1. Nav — floating bar in two separate translucent (blur) capsules: on the left a serif logo + location in small text; on the right links + a light pill button (on dark) that turns olive on light.
  2. Hero / interactive facade — full-bleed night photo of the tower, centered; 3-line title in the bottom-left corner (middle line in golden italic serif), uppercase overline above, "hover" microcopy with a pulsing dot at the bottom left and a scroll indicator at the bottom right. Invisible bands over each floor trigger a tooltip card.
  3. Floor transition — on click, the camera zooms with blur into the facade to the chosen floor, which stands out as an isolated slab.
  4. Apartment model — midnight-blue background, isometric 3D model (cutaway without a ceiling, furnished) taking ~65% on the left; on the right a dark vertical panel: floor label + status badge, unit name, trio of numbers (m², suites, parking), price, paragraph, numbered list of rooms (hotspots), two buttons ("see photos" light, "back to facade" outline).
  5. Room in photo — on choosing a room, a full-bleed photo of the room with a large name at the bottom left, "back to floor plan" button and a tab rail with all rooms at the bottom.
  6. Penthouse — aerial flight over the city at night to the penthouse, then the penthouse model (same layout as item 4) with a pool.
  7. Typical apartment (light editorial) — large title with an italic word, metadata on the right, image and text in two columns, large numbers, strip of thumbnails with captions.
  8. For residents / spec sheet — section title + 2-column table with thin lines (gray label / black value).
  9. Book a visit — 2 columns: title with an olive italic + text + phone on the left; form with light-gray pill fields, unit-type chips and a wide olive button on the right.
  10. Footer — serif logo, short paragraph, 3 columns of links in small uppercase.

Motion and interaction

  • Floor under the cursor: hover → the floor's band gets a glow (golden overlay 18% + 1px line), tooltip card follows the floor's Y with a guide line to the facade; 180ms ease-out; CSS + JS with a height map.
  • Dive into the floor: click → facade scales 1→2.4 with filter: blur(0→14px) and opacity, while the model enters from below with rotation; ~1.1s power3.inOut; GSAP timeline.
  • Orbiting model: cursor → model Y rotation ±12° and X ±5° with damping (lerp 0.08); hotspots pulse; Three.js / R3F with GLB.
  • Hotspot → photo: click on a room → 600ms crossfade to a full-bleed photo with a slight 1.08→1 zoom.
  • Flight to the penthouse: scroll scrub → aerial video/sequence controlled by the scroll, then the penthouse model; GSAP ScrollTrigger with pin.
  • Lightening: transition from dark to light section by a vertical mask (clip-path) while scrolling.
  • Editorial reveal: texts and images enter with y 24px→0, blur 6px→0, stagger 80ms.
  • Smooth scroll: Lenis across the whole page.

Components

  • Nav capsule: 36px height, 999px radius, rgba(255,255,255,.08) background + blur 12px, 1px rgba(255,255,255,.14) border.
  • Floor tooltip: 180×120px card with #0E141D 92% background, 1px white 12% border, 40px serif numeral, 9px uppercase status badge with a border.
  • Unit panel: 300px column, #121A25 background, 24px padding, 1px rgba(255,255,255,.1) dividers, numbered list 01–06.
  • Number trio: 26px serif value + 9px gray caption.
  • Primary button: 40px pill, white background (dark) or olive (light), 13px text.
  • Room tab rail: 9px uppercase chips, active one with a white 20% background.
  • Technical table: 48px rows, 1px divider, gray label on the left, black value.
  • Pill input: 44px, #F3F5EF background, no border, 12px label above.