velar-luxury-real-estate

Stars81,716

Forks9,449

UpdatedJuly 14, 2026 at 08:43

Use this plugin when the user wants a high-end luxury real-estate / architecture landing page with cinematic scroll choreography: a typewriter preloader that lifts away, a scroll-driven house image that rises from below and scales up while pinning to a dark statement section, a sticky dark stats band with count-up numbers, and a hover-expand video gallery that slides up over the dark section. Invoke for 'luxury real estate landing page', 'architecture brand site', 'scroll-driven hero with rising building', or when the user references the Velar template.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Source

nexu-io

nexu-io/open-design

View GitHub Repository View Creator Repositories

Download

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

File Explorer

3 files

SKILL.md

readonly

More from this repository

same repository

humanize-ppt

nexu-io/open-design

A presentation system for agent-made PPTs — born for the talk, not just the template. It turns raw material into an AST (audience-state-transfer) outline with per-page visual-enhancement decisions (image / SVG diagram / video), hands a production brief to a downstream renderer (HTML-PPT skills or native PPTX), then runs a capped 3-round presentation checkup (演讲体检) on the rendered deck. It never renders slides itself. Use before generating PPT/HTML slides from raw material, and after rendering when the user says things like "给这份 deck 做演讲体检" or "PPT 渲染质检". If all you want is one beautiful template page with no outline and no checkup, a rendering skill alone is enough.

2026-07-2181.7k

html-ppt-course-module

nexu-io/open-design

A first-30-days onboarding module for new hospitality hires — the behaviors, the practice, the checks, and the manager follow-up. Built as a decision-grade professional training deck for new hires, managers.

2026-07-1881.7k

html-ppt-graphify-dark-graph

nexu-io/open-design

Open Design's feature business case for the plugin marketplace: the user pain, options, tradeoffs, and the measure of success. Built as a decision-grade product management deck for PM, eng, design, leadership.

2026-07-1881.7k

html-ppt-hermes-cyber-terminal

nexu-io/open-design

Open Design + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.

2026-07-1881.7k

html-ppt-knowledge-arch-blueprint

nexu-io/open-design

Open Design's incident retro: the daemon-restart data bug, the root cause, the fix, and the systemic follow-ups. Built as a decision-grade product management deck for engineering, SRE, leadership.

2026-07-1881.7k

html-ppt-obsidian-claude-gradient

nexu-io/open-design

Open Design's enterprise AI-adoption brief: local-first agents at work, the risk controls, the ROI, and the rollout plan. Built as a decision-grade AI literacy deck for leadership, IT, security.

2026-07-1881.7k

name	velar-luxury-real-estate
description	Use this plugin when the user wants a high-end luxury real-estate / architecture landing page with cinematic scroll choreography: a typewriter preloader that lifts away, a scroll-driven house image that rises from below and scales up while pinning to a dark statement section, a sticky dark stats band with count-up numbers, and a hover-expand video gallery that slides up over the dark section. Invoke for 'luxury real estate landing page', 'architecture brand site', 'scroll-driven hero with rising building', or when the user references the Velar template.
version	0.1.0
od	{"mode":"prototype","surface":"web","scenario":"design","preview":{"type":"html","entry":"example.html"},"design_system":{"requires":false}}

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."
Headline row (wrapped in overflow:hidden): IRREPLACEABLE (.hero-extraordinary, Syne 800, uppercase, black, letter-spacing:-0.03em, px-6 md:px-10 lg:px-16).
.hero-subtitle-mobile (px-6, Syne 600, clamp(12px,3vw,15px), opacity 0.65, margin-top:0.9em): "Premium real estate with vision, / depth, and architectural clarity."

Responsive type sizes are locked — copy the three @media blocks verbatim from the seed (<=639, 640–1023, >=1024); they swap desktop/mobile subtitles, set padding-top, and size .hero-own-the / .hero-extraordinary.

Section 4 — Scroll-driven house animation (centerpiece)

position:fixed wrapper z-index:22, pointer-events:none, will-change:transform, default bottom:0; left:50%; transform:translateX(-50%); width:100%; min-width:1400px. Inner div entrance: starts translateY(102vh), transitions to translateY(0) via transform 1.5s cubic-bezier(0.45,0,0.15,1) 0.4s when lifting becomes true; once liftDone the transition is removed so the scroll handler takes over. Renders HOUSE_IMG at width:100%, aria-hidden.

After liftDone, updateHousePosition (scroll+resize) computes — locked math:

baseW = max(innerWidth, 1400).
triggerPoint = -(heroH * 0.30); endPoint = heroRect.top - (darkRect.bottom - vh); progress = clamp((heroRect.top - triggerPoint)/(endPoint - triggerPoint), 0, 1).
t = smoothstep(smoothstep(progress)), smoothstep(x)=x*x*(3-2x) applied twice.
startX=(vw-baseW)/2, startY=vh-imgH; finalScale=1.45, finalX=(vw-baseW*finalScale)/2, mobileOffset = vw<1024 ? -250 : 4, finalY = darkRect.bottom - imgH*finalScale + 500 + mobileOffset.
Interpolate currentX/Y/Scale linearly via t.
progress <= 0 → reset to resting (bottom-centered, scale 1). Else top:0; left:0; transform: translate(currentX,currentY) scale(currentScale); transform-origin: top left.

Section 5 — Dark statement + stats (sticky)

Outer position:relative; height:200vh; z-index:20. A 4vh #1a1a1a spacer, then inner .s2-section position:sticky; top:0; height:100vh; background:#1a1a1a; overflow:hidden. Content .s2-content flex column, px-6 md:px-10 lg:px-16, padding-top:clamp(30px,4vw,60px), padding-bottom:clamp(60px,8vw,120px).

.s2-statement (Inter 300, #e8e4df, letter-spacing:-0.02em, line-height:1.35, white-space:nowrap, clamp(22px,2.6vw,42px)); wrapper max-width:1200px, centered, padding-left:25%. Four hard-broken lines: "Every estate we present is hand-chosen / through a frame of permanence, refinement, / and timeless detail. Standards are not / a flourish. It is our discipline."
.s2-stats-row (same max-width/centered/padding-left:25%, margin-top:clamp(48px,6vw,80px)): 3 flex columns, flex:1, left border 1px solid rgba(255,255,255,0.2) between items, padding-left:clamp(20px,2.5vw,40px) on items 2–3:
1. 120+ — Portfolio Holdings
2. 12 — Global Locations
3. 98% — Patron Loyalty Rate
Numbers: Inter 300, white, clamp(36px,4.5vw,72px), line-height:1.1. CountUp: when the element first crosses 30% into viewport (IntersectionObserver), animate 0→end over 2000ms, easing 1-(1-t)^3, render Math.round(eased*end)+suffix.
Labels: Inter 400, rgba(255,255,255,0.6), clamp(12px,1.1vw,16px), margin-top:clamp(4px,0.5vw,8px), letter-spacing:0.01em.
<=767px: drop the 25% left padding to 0. 768–1023px: padding-left 15%, min-height:70vh.

Section 6 — Hover-expand gallery (slides over Section 5)

.s3-gallery-section position:relative; z-index:25; margin-top:-100vh; background:#1a1a1a; height:100vh; overflow:hidden — the negative margin + higher z slides it up over the sticky dark section. Background ticker .s3-ticker-wrap (inset:0, flex center, overflow:hidden, z-index:0, pointer-events:none) with .ticker-track of two copies of a giant repeating Velar. word-mark; each span Syne 800, clamp(100px,14vw,220px), white, low opacity, white-space:nowrap, letter-spacing:-0.02em, user-select:none, padding-right:0.3em.

Gallery content .s3-gallery-content (z-index:1, flex center, full height, clamp(24px,4vw,60px)). Row .gallery-expand-row (flex, gap:6px, height 70%, max-width 1200px). Each .gallery-expand-item (flex:1 1 0%, full height, border-radius:12px, overflow:hidden, cursor:pointer, transition: flex 0.5s cubic-bezier(0.4,0,0.2,1)) holds its video (autoplay, loop, muted, playsInline, object-fit:cover). On hover the hovered item grows to flex:4, others shrink (accordion expand).

<=1023px: copy the mobile grid rules verbatim from the seed — s3-gallery-section becomes height:auto; min-height:100vh; overflow:visible; ticker becomes sticky; row becomes a 1fr 1fr grid with aspect-ratio:4/5 items and a centered full-width last-odd item; <=479px tightens padding/gap.

Tech notes

Only react, react-dom, lucide-react, Tailwind, Vite. No other libraries.
All animation logic in a single App.tsx. Use Supabase only if persistence is later needed; this page has no data layer.

Color Rules — hard

Warm off-white #f5f0ea page; deep teal #213138 for preloader + default logo; dark #1a1a1a for the statement/gallery sections; statement text #e8e4df; hero text black. Do not introduce other accent hues — the palette is intentionally monochromatic-luxury.