Novosel — Residential Complex Concept Site

The brief

Show what a premium homebuilder’s website should look like — not “a render gallery + a phone number,” but a functional showcase with a real floor-plan catalogue, a working mortgage calculator, and legal transparency (the Russian 214-FZ law, escrow, project declaration).

The “Premium Urban Living” concept: a deep navy #081425 as a metaphor for the night sky over the city, a gold accent #efbd8a — the warm light in apartment windows. Serif Playfair Display headings for emotion and status, clean Inter for functional blocks.

The solution

The starting point was a custom “Premium Urban Living” design system: seven surface tokens (from #040e1f to #2a3548), a gold primary scale with a deep variant, a lavender-blue #bec6e0 accent for details, a Playfair Display 500–800 (headings, italic emphases) + Inter 400–700 (body) type pair, 4–24px radii, shadows with a gold undertone on hover. Four concept screens were designed against that system (home, floor plans, catalogue, contacts). From there — manual assembly into a complete one-pager with advanced interactivity.

Floor-plan catalogue with SVG diagrams

6 apartments from a 32 m² studio to a 120 m² penthouse. Each card features an SVG floor-plan diagram (walls, partitions, room labels) instead of placeholder photos. A rooms chip filter (All / Studios / 1–4 bedrooms) — one change handler toggles flat-hidden. When nothing matches — a friendly empty state.

Live mortgage calculator

Not “leave your phone and a manager will tell you,” but a real calculation via the annuity formula:

• Price — 4.5–20 mln ₽ slider, step 100,000
• Down payment — 10–80% slider (shown in both % and rubles)
• Term — 5–30 years slider
• Programme — Family 6% / IT 5% / Standard 14.5%

Formula: loan × r × (1+r)^n / ((1+r)^n − 1) where r = rate/100/12, n = years × 12. Any change — instant recalculation of monthly payment, loan amount, and total interest. All amounts formatted via toLocaleString('ru-RU'). The result panel sticks to the right.

Location map with infrastructure

A map placeholder with a pulsing gold complex marker (CSS animate-ping + radial fill) and 6 infrastructure cards — school, kindergarten, park, embankment, mall, hospital — with distances in metres/kilometres. Each card has a card-lift hover (rises, outline turns gold).

Author-grade background animation

The defining feature vs. typical developer sites — every section’s backdrop “breathes” differently and on-theme. No “orange dots” like most landings:

• Aurora gradient — a global background layer with three radial gradients (gold + lavender-blue + gold) slowly drifting on a 24-second cycle
• Blueprint grid — a barely visible architectural 80×80px grid drifting diagonally (40 s), faded by a radial mask at the edges
• Rising light beams — vertical light streaks rise from below in Location and Stages (like windows lighting up in high-rises)
• Spotlights — two vertical “spotlights” with different phases sweep on the right and the left at 36° (18 s)
• City skyline — an SVG silhouette of the urban skyline at the bottom edge of About and Stages
• Window lights in the hero — gold dots float upward at varying speeds, imitating apartment windows lighting up

All disabled under @media (prefers-reduced-motion: reduce).

Hero with extended choreography

“Residential complex” assembles character by character with 70 ms delays. “Tyumen Quarter” runs in italics with a gold shimmer gradient (linear-gradient + background-position, 6 s cycle). Behind the content — Ken Burns on an architectural render with floor-to-ceiling glazing, 36 gold light particles drifting upward. The content follows the cursor (mouse parallax ±14 px). The CTA carries a pulse-glow keyframe with an expanding gold halo.

Construction stages

4 cards across quarters from Q4 2025 to Q4 2027. Badges “Completed” (solid gold fill) and “In progress” (gold at 40% opacity). Each card has a stage description, date range, scroll-reveal stagger with 100 ms delays.

Legal transparency

In the hero — a “214-FZ” badge with a verified glyph and “Escrow with Sberbank, project declaration, DDU”. On contacts — a link to “Project declaration PDF”. In the footer — a mention of EISJS. Everything premium-segment buyers look for first.

The outcome

The site is live at novosel.nazarov-evgeniy.pro over HTTPS (Let’s Encrypt), loading in milliseconds (~72 KB index.html). No backend — this is a concept demo. For production: hook the form to amoCRM or Bitrix24 (standard Russian real-estate CRMs), integrate a live catalogue from 1C or Profitbase, add a proper 3D apartment tour and a real interactive Yandex.Map with infrastructure.

Architecturally ready to scale: pages per floor plan (/floor-plans/2-bedroom-62m/), a detailed Mortgage section with calculation discounts, a “Novosel Premium” loyalty programme — the structure and styles allow this without a refactor.

Tech stack

• Frontend: Vanilla HTML5 + Tailwind CSS (CDN, no build) + Vanilla JS
• Animations: CSS @keyframes (Ken Burns, blob pulse, letter reveal, gold shimmer, window lights float-up, aurora drift, blueprint drift, rising beams, sweeping spotlights, animate-ping on the map marker), IntersectionObserver for scroll-reveal and stat counters, easeOutCubic easing, toLocaleString('ru-RU') formatting
• Typography: Playfair Display 500–800 (headings + italic emphases), Inter 400–700 (body), Material Symbols (icons)
• Imagery: AI art for the hero render + Unsplash for architectural illustrations, SVG for floor plans and the skyline silhouette
• UX patterns: live mortgage calculator with the annuity formula, chip catalogue filters without reload, sticky result panel, map with a pulsing marker, multi-step booking form
• Design stage: in-house “Premium Urban Living” design system (navy + gold palette, serif typography, shadows, radii, spacing tokens) for a premium-developer brand concept
• Hosting: own VPS, Nginx + Let’s Encrypt SSL