likova.space (a Moscow-area business-center marketing site) is a different genre entirely from the last two guides: a real-estate/architecture showcase built around an actual 3D model of the building, not a portfolio. Inspected directly: no framework at all, just hand-authored HTML/CSS with a custom JS bundle stack and raw Three.js.
What’s actually running under the hood
- No framework: no Webflow attributes, no Next.js/React markers. Plain static HTML/CSS with separate hand-named JS files (
threejs.js,shared.js,landing.js) — a hand-built site, not a page builder or SPA. - 3D: raw Three.js (not react-three-fiber this time) with GLTFLoader confirmed in the bundle — meaning it loads a real
.glb/.gltf3D model of the actual building, not a generic shape. That’s the single biggest lever in this pattern: the « wow » is a real asset of the real product, not a stock 3D render. - No GSAP detected in any of the loaded bundles — scroll-driven camera/model motion here is most likely hand-rolled with a scroll listener and
requestAnimationFrame, not a library. Worth knowing since it means this pattern doesn’t require GSAP to pull off. - Typography: « TT Norms Pro » (a premium grotesk), black text on white, no accent color anywhere except the 3D model’s own lighting/material.
The structure
A numbered sequence of full-bleed sections (labelled 1 through 9 directly on the page): hero with the live 3D building model and a bold claim → headline stats section (variable floor counts, big numbers) → location/proximity stats (distance to the airport, transit times) → master plan section → an architecture statement attributed to the actual named chief architect → several detail sections (lobby, offices, technology, infrastructure), each pairing a claim with 1-2 hard numbers rendered in huge type (ceiling height, elevator count, etc.) → amenities list → team credits.
The recurring device here isn’t a locked visual anchor like the Webflow pattern or an interactive centerpiece like the WebGL-portfolio pattern, it’s real numbers rendered huge, repeated at every section. That’s what makes a real-estate marketing site feel serious instead of like a brochure: specificity (12m ceilings, 16 elevators, 5 minutes to the airport) stated as the visual hero, not buried in paragraph copy.
The prompt to recreate this pattern
Written to be handed directly to Claude, Cursor, or any AI coding assistant. Describes the structure and technical approach, not likova.space’s actual project details, swap in your own.
You are building a scroll-narrative marketing site for a physical product (real estate, architecture, a large physical build) in the style of likova.space: a real 3D model of the actual building/product as the visual anchor, wrapped in numbered, full-bleed editorial sections. Stack: no framework required — plain HTML/CSS/JS works fine (this pattern doesn't need React/Next.js). Three.js with GLTFLoader to load and render a real 3D model (.glb/.gltf) of the actual product/building. No GSAP needed if you drive camera/model rotation directly via scroll position with vanilla JS (requestAnimationFrame + scroll listener), though GSAP ScrollTrigger is a fine alternative if you already use it elsewhere. Structure — a numbered sequence of full-bleed sections (label each with a large number, 1 through 8-9): 1. Hero: the 3D model (building/product) rendered live via Three.js, oversized headline making the core claim in a few words, one short supporting line. 2. Overview/stats: 2-3 headline numbers about the product (a count, a measurement, a capacity) in huge type, each with a one-line label. 3. Location/context: why this specific place/positioning matters, paired with a supporting stat (distance, time, proximity). 4. Master plan / big picture: a wide shot or diagram section, one clear CTA to see more detail. 5. Design/architecture: the design philosophy in a short quote-style statement, attributed to a named person (architect, designer, founder) for credibility. 6. Detail sections (repeat this pattern 2-4 times for different features/rooms/amenities): one headline claim + one supporting paragraph + 1-2 hard numbers in large type (ceiling height, elevator count, whatever is real and specific to your project). 7. Technology/systems: a plain bullet or tag list of technical features (no icons needed, just clean text tags). 8. Ecosystem/amenities: a simple list of what's nearby or included (retail, dining, services, etc.), no photos required. 9. Team/credits: names and roles, plain text. Design rules: - One accent-free palette: black text on white (or the inverse), the only "color" in the whole page is the 3D model's own material/lighting. - Numbers are the hero device here, not photography — always render key facts (a count, a measurement, a time) at 3-5x body text size. - Each section gets its own number label (matching the numbered structure above) so the page reads as a countable sequence, which works especially well for this genre since it implies thoroughness/completeness. - The 3D model should respond to scroll (rotate, reposition, or the camera moves around it) rather than sitting static — that's what makes the technical investment visible instead of just decorative. - Typography: one clean grotesk (TT Norms Pro or equivalent) in bold/black weights for headlines, regular weight for body, generous line-height, all-caps for headlines is a legitimate choice in this genre (reads as authoritative/architectural). Build it as: [describe your own project/product, the 3D model you have (or need to source/create), your actual stats and location details, your team]. Keep each section's body copy to 2-4 sentences max — this genre earns its "serious" tone from restraint and real numbers, not from long copy.
Why this pattern reads as « premium »
Three things: (1) a real 3D asset of the real product, not a stock render, immediately signals genuine production budget, (2) hard numbers rendered as the visual hero at every section, which reads as substantiated rather than promotional, and (3) the numbered-section device turns an otherwise-long scroll into something that feels complete and countable rather than endless. None of the three individually is hard to build, together they’re what separates this from a generic real-estate template.