shvo-hotel-3d is a premium, immersive 3D website for the SHVO hotel. The product intent, taken directly from the requester's brief ("I want a 3D website, make a premium website for SHVO hotel"), is to present the SHVO hotel through a real-time three-dimensional, high-end brand experience that conveys exclusivity and architectural grandeur, and to let prospective guests take the next step toward a stay while giving hotel staff a quiet, legible surface to follow up on the interest that arrives.
The audience is twofold:
The website must be a 3D website and must feel premium in presentation; both are hard constraints from the source brief and shape every section of this document.
shvo-hotel-3d is delivered as a first-party web application with three runnable services:
Actors. The active human personas are exactly two: Hotel Guest / Prospective Visitor and Hotel Staff / Site Owner. The 3D scene renderer, the backend API, and the database are non-persona system actors.
Accepted behavior. Visitors anonymously experience an immersive premium 3D presentation of the hotel, review rooms, amenities and location, and submit a booking or enquiry request. Hotel staff, whose accounts are provisioned by the site owner before first sign-in, verify identity at Staff Login and review and follow up on guest booking and enquiry requests in Enquiries.
Ownership. All five destinations are first-party application surfaces. Public presentation and request submission are anonymous; the staff Enquiries surface is role-restricted and reachable only after staff sign-in. Staff identity is provisioned, not self-enrolled.
Narrow exclusions. No self-service staff registration, no guest accounts, no online payment or card capture, no third-party booking-engine integration, and no presentation of planning documents, success criteria or specifications on the site.
Removed from scope
The product is a premium 3D marketing and enquiry website, not a booking engine. Its public half is an immersive, cinematic presentation of the SHVO hotel — a real-time 3D architectural subject, editorial hotel content, and a single clear path to a booking or enquiry request. Its staff half is a deliberately calmer, tabular surface in the same charcoal-and-champagne palette where provisioned hotel staff read and follow up on the requests that arrive.
Delivery ownership. All five destinations are first-party and rendered by the React frontend against the shared FastAPI backend and MariaDB database. The 3D hero is rendered client-side in the browser (WebGL); no external 3D service is required.
Access ownership. The public surfaces — Landing, Hotel Details, Book & Enquire — are anonymous and require no identity. Staff Login is anonymously reachable and is the only place identity is established; Enquiries is role-restricted and reachable only by a signed-in staff member whose account was provisioned by the site owner. There is no self-service account creation for any persona.
Current vs. future. Everything described in this document is current. No future-horizon requirements are accepted at this time.
prefers-reduced-motion freezes the orbit, disables parallax and scroll-scrub, and swaps reveals for instant opacity.FR-1 — Premium 3D presentation of the SHVO hotel (explicit) As a Hotel Guest / Prospective Visitor, I should experience the SHVO hotel through an immersive, premium 3D website so that I form a high-end impression of the hotel.
prefers-reduced-motion freezes the orbit and disables parallax and scroll-scrub while keeping all content reachable by normal scroll.FR-2 — Review the hotel's rooms, amenities and location (required_inference) As a Hotel Guest / Prospective Visitor, I should review the hotel's rooms, amenities and location within the premium presentation so that I can decide whether the hotel suits my stay.
FR-3 — Submit a booking or enquiry request (required_inference) As a Hotel Guest / Prospective Visitor, I should submit a booking or enquiry request so that I can take the next step toward a stay.
FR-4 — Provisioned staff sign-in (required_inference) As a Hotel Staff / Site Owner, I should sign in with an account provisioned by the site owner so that I can reach the guest enquiries I am responsible for.
FR-5 — Review and follow up on guest enquiries (required_inference) As a Hotel Staff / Site Owner, I should review incoming booking and enquiry requests and record follow-up so that guest interest is handled promptly.
FR-6 — Maintain an accurate premium presentation (required_inference) As a Hotel Staff / Site Owner, I should keep the hotel's rooms, amenities and location content accurate so that the premium presentation reflects the hotel truthfully.
Muse: Zaha Hadid — "Fluid parametric grandeur for SHVO." Sweeping continuous surfaces, pearl-and-charcoal materiality, motion frozen in form. The emotional register is awe, calm control and exclusivity; the staff surface carries the same brand gravity in a quieter, legible register.
Mode: dark.
Colour tokens (exact hex, by role):
| Role | Hex | Usage |
|---|---|---|
| Background | #0E0F12 | Charcoal dominant ground, ~70% of every screen |
| Surface | #1A1C21 | Lifted panel for room cards and the staff enquiries table |
| Text | #F2EFE9 | Pearl-white, all readable type |
| Primary | #C9A96A | Champagne-gold — rules, active states, numerals, primary CTA outline only; never a fill behind body text |
| Accent | #B08D57 | Secondary gold for rim light and hover states |
| Muted | #8A8D94 | Metadata and labels only |
Gold on charcoal passes contrast at body size; gold is never used for small text on gold.
Typography:
clamp(52px, 9vw, 148px) for the hero wordmark, then 64 / 44 / 30 / 20 / 16 / 14.Shape language: Sweeping continuous curves — section boundaries are single asymmetric arcs (border-radius: 0 0 50% 0 / elliptical clip-path), never symmetric pills. Cards are soft-cornered 24px slabs with one sheared corner. Thin 1px champagne rules curve with the section arcs. No drop shadows; depth comes from the 3D scene and from layering pearl panels over charcoal.
Layout: Asymmetric editorial grid on a 12-column base. The hero 3D canvas bleeds full-viewport; the room list is a staggered two-column offset with the right column dropped 96px; the enquiry form sits in a 7-column measure with a 4-column gold-ruled metadata rail beside it. Staff enquiries use the same charcoal ground with a strict tabular 3-column layout and hairline rules. Vertical rhythm: 120px desktop, 56px mobile; everything collapses to a single column at 375px with arcs flattening to 16px radii.
Imagery: One crafted real-time 3D subject — a low-poly-but-smooth parametric SHVO tower with flowing floor plates in matte pearl and dark glass with a warm gold rim light on a charcoal void with a soft floor reflection. Supporting imagery: architectural stills of curved interiors, macro material shots (travertine, brushed brass, dark stone) and one dusk exterior, all colour-graded to charcoal/pearl/gold. Never stock people, never flat clip art.
Forbidden: blue/indigo/violet accents; white-ground SaaS heroes; rounded pill buttons; soft drop-shadow cards; hover-lift grids; sci-fi HUD overlays, glowing cyan data streams or particle fields; playful bouncy easing; toy colours; cartoon illustration; gradient-blob backgrounds; glassmorphism panels; stock photography of smiling people in the hero; presenting or linking to any planning document, success criteria or spec on the site; clipping the wordmark, headlines, labels or CTA against the 3D scene at any breakpoint.
Readable text and controls stay whole at 375px, 768px and 1280px — headlines, wordmarks, labels, numbers, card text and controls stay entirely inside the viewport and their container, wrapping or scaling to fit, and no other element covers any part of them. Imagery, decoration and motion may be cropped, bled, rotated, overlapped or cut as the direction asks, provided they cover no readable text or control.
The building is the navigation landmark. The public entry is a full-viewport charcoal (#0E0F12) WebGL stage. A single flowing parametric SHVO tower floats slightly right of centre at roughly 60% viewport height on desktop, lit pearl-white with a champagne rim, its reflection fading into the ground plane. The wordmark 'SHVO' is set in Josefin Sans Light at clamp(72px, 16vw, 220px), flush-left, sitting in the lower-left third and overlapping the tower's base line so type and architecture interlock on one plane. A hairline champagne rule runs from the wordmark to a small uppercase eyebrow 'HOTEL · 3D ARCHITECTURE' and a single outlined gold CTA 'Enter the hotel'. On mobile the tower centres behind a 52px wordmark stacked above the CTA; nothing is covered by the scene.
The concept recomposes only accepted content and controls: the hotel's identity, the eyebrow label, the single entry CTA, and the 3D architectural subject. It introduces no new behaviour or destination.
Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl
Landing Hero Motion Brief
cubic-bezier(0.22,1,0.36,1) upward reveals of pearl panels over charcoal; word-by-word type fade on the hero only; gold hairlines drawing left-to-right on scroll entry; single asymmetric elliptical arcs as section transitions.prefers-reduced-motion freezes the orbit to a still frame, disables parallax and scroll-scrub, and swaps reveals for instant opacity. All content remains reachable by normal scroll, and the camera chip shows a single static viewpoint label.Landing Hero 3D Scene Brief — DIRECTION-DERIVED
One crafted real-time object: a parametric SHVO tower with flowing floor plates, rendered in matte pearl and dark glass with a warm gold rim light, on a charcoal void with a soft floor reflection. The scene shows the product's defining state — the hotel as an architectural commission — and is the hero subject, not a background. It orbits on a 40-second cycle, responds to pointer parallax with 0.6 damping, and its camera dollies from exterior to lobby across the first 120vh of scroll. Under prefers-reduced-motion the scene renders a single still frame.
prefers-reduced-motion freezes the orbit, disables parallax and scroll-scrub, and swaps reveals for instant opacity; all content remains reachable by normal scroll. Rationale: accessibility.frontend, backend, and database. No additional infrastructure is required for the accepted workflows.prefers-reduced-motion state in which the orbit freezes, parallax and scroll-scrub are disabled, and reveals become instant.No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No completed page designs yet.
Completed design pages will appear here when they are ready to preview.
No comments yet. Be the first!