skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

velar-luxury-real-estate

Generate cinematic single-page luxury real-estate landing pages with scroll-driven animations and interactive video galleries.

93.2k|10.8k|Updated Apr 28, 2026
Search Tags:#web-design#landing-page#real-estate#ARCHITECTURE#luxury#scroll-animation#reAct
One-click install
npx skills add https://github.com/nexu-io/open-design --skill velar-luxury-real-estate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: velar-luxury-real-estate
Source: https://github.com/nexu-io/open-design/tree/main/plugins/_official/examples/velar-luxury-real-estate
Command: npx skills add https://github.com/nexu-io/open-design --skill velar-luxury-real-estate

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react, react-dom, lucide-react, and includes assets (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating high-end, performant, and visually complex landing pages that require precise scroll-choreography and cinematic transitions without the need for heavy external animation libraries.

Core Features & Use Cases

  • Cinematic Choreography: Implements a typewriter preloader, scroll-driven building scaling, and sticky dark-mode statistics sections.
  • Interactive Gallery: Features a hover-expand video gallery that slides over content, optimized for luxury brand storytelling.
  • Use Case: Ideal for architects, luxury real estate agents, or high-end design agencies needing a polished, single-page web presence that emphasizes visual impact and smooth user interaction.

Quick Start

Generate a luxury real estate landing page for the Velar brand using the provided cinematic scroll-driven animation specifications.

Frequently Asked Questions about velar-luxury-real-estate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement the scroll-driven house animation?▼

The house animation uses a fixed-position wrapper and a scroll listener that computes a progress value based on viewport position. This progress is passed through a double-smoothstep function to interpolate scale and translation values for the building silhouette.

Can I use external animation libraries like Framer Motion?▼

The implementation is strictly limited to vanilla React hooks (useState, useEffect, useRef) and CSS transitions to maintain performance and minimize bundle size. Do not add external animation libraries to the project.

How are the gallery videos handled for performance?▼

Gallery videos are loaded from stable CDN URLs (cloudfront) and configured with autoplay, loop, muted, and playsInline attributes to ensure smooth playback within the hover-expand accordion tiles.

What is the purpose of the inlined data URI for the house image?▼

The house silhouette is inlined as a base64 data URI to ensure the centerpiece asset loads instantly and remains stable during the scroll-driven animation, preventing layout shifts or broken images in the preview sandbox.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

writing-wireframe-copy

Write raw wireframe copy for content slots from Information Architecture documents.

Official
Advanced
jtucker9jtucker9

domain-ssl

Configure domain DNS records and TLS certificates for hosting deployments.

Community
Intermediate
mahou-labsmahou-labs
1

optimize

Identifies bottlenecks in web interfaces and implements targeted optimizations for measurable improvements.

Official
Advanced
finsilabsfinsilabs
44

content-commerce

Embed shoppable product cards with UTM revenue tracking in CMS platforms.

Official
Intermediate