Agent skill · design visual · nexu-io
velar-luxury-real-estate
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.
Why this skill is useful
Provides a complete, executable HTML template with specific animations and design elements that are not commonly found in public resources.
What it needs
About 5k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
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 (HOUSEIMG, originally res.cloudinary.com/.../buildingbzziky.png) as an inlined data:image/webp;base64,… URI — keep it exactly as-is. The 5 cloudfront gallery .mp4 videos and the BGIMG 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: GRASSGREEN = '#213138' (preloader bg + default logo color), FULLTEXT = 'Velar.', HOUSEIMG (inlined data URI in the seed), BGIMG (higgs.ai hero bg), and the 5 cloudfront gallery videos (in order — keep them). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/velar-luxury-real-estate