Velar. — Luxury Real Estate Landing Page

Produce a single-page, cinematic luxury real-estate landing page. A complete, rendered reference implementation ships beside this skill at example.html — start from it. Copy example.html, then adjust copy and data; do not rewrite the choreography or invent a new visual language. The seed already encodes the exact tokens, preloader typewriter, scroll-driven house animation, sticky dark stats band, count-up, and hover-expand gallery described below.

This is the authoritative build brief. Follow it exactly — the named colors, fonts, timings, image URLs, and the scroll-math are locked.

Inlined image (critical): example.html ships the building/house silhouette (HOUSE_IMG, originally res.cloudinary.com/.../building_bzziky.png) as an inlined data:image/webp;base64,… URI — keep it exactly as-is. The 5 cloudfront gallery .mp4 videos and the BG_IMG higgs.ai hero background stay as remote URLs (large stable CDNs); the cloudinary host is the one to inline because it is the load-bearing, repeatedly-scaled centerpiece asset.

Stack

• Default output: a single self-contained HTML file (the example.html seed) using vanilla CSS + JS. It already includes everything inline.
• If the user explicitly asks for the React project: port the seed faithfully to React 18 + TypeScript + Vite + Tailwind CSS with only lucide-react for icons (the hamburger→X). All animation logic lives in a single src/App.tsx using useState, useEffect, useRef, useCallback, and IntersectionObserver. No other libraries. Do not change the design while porting.

Global setup — locked

• Page background #f5f0ea (warm off-white). Body wrapper overflow-x: clip.
• Fonts via @import in an inline <style>: Syne (400, 700, 800, 900) + Inter (300, 400, 500, 600) from Google Fonts.
• Constants: GRASS_GREEN = '#213138' (preloader bg + default logo color), FULL_TEXT = 'Velar.', HOUSE_IMG (inlined data URI in the seed), BG_IMG (higgs.ai hero bg), and the 5 cloudfront gallery videos (in order — keep them).

Section 1 — Preloader / intro overlay

Fixed full-viewport overlay (z-index:100, bg #213138, centered flex). Typewriter of Velar. in Syne 2.6rem, white, letter-spacing:-0.02em; letters weight 700 except . weight 900. Blinking white cursor (3px × 1.1em rounded bar, blink 0.7s step-end infinite, opacity 0↔1) follows the last typed letter.

Timings (setTimeout): CHAR_INTERVAL=140ms, TYPE_START=600ms. Reveal letter i at TYPE_START + i*CHAR_INTERVAL. LIFT_AT = TYPE_START + 6*CHAR_INTERVAL + 700. Hide cursor at LIFT_AT-150. At LIFT_AT, lift overlay translateY(-100%) with transform 1.5s cubic-bezier(0.45,0,0.15,1) AND trigger the house rise. At LIFT_AT+1300, fade in hero text (opacity 0→1, translateY(-28px)→0, 0.7s cubic-bezier(0.22,1,0.36,1) 0.1s). At LIFT_AT+2100, set liftDone, disable overlay transition (parked off-screen), and hand house control to the scroll handler.

Section 2 — Fixed nav

Fixed top nav z-50, padding px-6 md:px-10 lg:px-16, py-5 md:py-6, flex justify-between. Left: Velar. in Syne text-xl, weight 700 letters / 900 dot, color = navColor. Right: hamburger — two stacked 28px×1px lines, top shrinks to w-5 on hover; when open swaps to Lucide X (size 24).

Scroll behavior: if any dark section (Section 5 dark band + Section 6 gallery) overlaps the viewport top (rect.top <= 0 && rect.bottom > 0), navColor = '#ffffff', else '#213138'. Transition color 0.35s ease.

Mobile menu: full-screen #f5f0ea overlay (z-40), centered, 4 stacked links — Residences, Story, Listings, Inquire — Syne text-4xl, font-light, tracking-widest, uppercase, black, hover text-gray-500. Click closes.

Section 3 — Hero

<section> position:relative; min-height:100vh; overflow:visible, BG_IMG as cover/center background. Hero text block z-index:10, hidden initially, fades+slides in per preloader timing.

• Top row .hero-heading-top (px-6 md:px-10 lg:px-16, flex items-end justify-between, margin-bottom:-0.04em): left LIVE IN (.hero-own-the, Syne 800, uppercase, black, letter-spacing:-0.03em, line-height:1); right desktop-only .hero-subtitle-desktop (Syne 700, clamp(10px,0.95vw,14px), max-width 300, opacity 0.7, right-aligned): "Stately homes built with vision, / scope, and architectural finesse."

…