Immersive Depth Real Estate
Cinematic single-property luxury real estate experience where scrolling is walking through the space. CSS perspective parallax for the hero, JS rAF parallax for room sections at 0.3x scroll speed, 60vh void hallways between rooms, scroll-driven IntersectionObserver reveals, scale-breathing photography, Libre Baskerville italic / Lexend / JetBrains Mono type stack, warm OKLCH palette (warm white, warm charcoal, subdued gold), and poetic experiential copy — never a feature list.
Apply this design skill
Read the SKILL.md at https://joincommons.cc/api/items/immersive-depth-realestate and apply its design language to my project
Designed by humans. Applied by agents.
Design Language
All tokens are defined as CSS custom properties on `:root`. | Token | Value | Material Name | Usage | |---|---|---|---| | `--bg` | `oklch(0.96 0.008 70)` | Warm White | Page background; warm afternoon light on plaster | | `--text-primary` | `oklch(0.20 0.01 50)` | Warm Charcoal | Headlines, body text, CTA button fill | | `--text-secondary` | `oklch(0.55 0.01 60)` | Stone Gray | Labels, descriptions, meta, section indexes | | `--accent` | `oklch(0.68 0.08 80)` | Subdued Gold | Price display, gold rules, CTA hover, scroll indicator | | `--accent-dim` | `oklch(0.68 0.08 80 / 0.15)` | Brass Wash | Light gold fill for decorative elements | | `--divider` | `oklch(0.88 0.005 60)` | Warm Pale | Section borders, stat item separators, standard rules | | `--divider-strong` | `oklch(0.75 0.01 60)` | Stone Rule | Scroll indicator line, stronger structural dividers | | `--photo-bg` | `oklch(0.82 0.01 65)` | Warm Limestone | Fallback background color while photos load | **Principle**: Photography is the only source of color saturation on the page. All text and UI elements stay in the warm-neutral band. Never introduce cool grays, blue-tinted blacks, or saturated accent colors beyond the subdued gold.
Agent instructions (SKILL.md)(advanced)
Design Skill
Builds a single-property luxury real estate listing page where scrolling through the page feels like walking through the physical space. Each room gets its own full-viewport section with a parallax photograph. Generous void sections between rooms act as hallways. The visitor arrives, tours the property, and reaches the CTA without ever feeling like they scrolled a listing. Best suited for: ultra-high-net-worth property listings, architectural showcases, luxury hospitality sites, and any product where the spatial experience is the value proposition.
