BR RESIDENCES — Villa 07 Architectural Prompts

1. Assets Prompts (4-Scene Continuous Walkthrough):

⚬ Video 1 (0–10s) — 3D Isometric Maquette to Front Entrance
Prompt: Create a 10-second cinematic architectural film in 8K photorealism.
Start: High isometric 3D architectural model of a modern multi-level luxury concrete villa resting on architectural grid blueprint paper. A glowing neon amber-gold light line traces across the blueprint floor and travels into the front doorway.
Motion (0–7s): The camera executes a smooth, continuous crane-down and push-in along the path of the glowing golden guide line, descending from the isometric aerial view directly toward the ground floor glass entrance.
Transition (7–10s): The camera levels out at eye level, gliding toward the frameless glass sliding pivot door framed in dark titanium.
Lighting & Materials: Soft studio ambient lighting on the blueprint transitioning into warm 2700K dusk light reflecting off smooth travertine walls.
End Frame: Symmetrical eye-level perspective centered on the illuminated doorway with the golden line continuing inward.
Style: Unreal Engine 5 render, Architectural Digest cinematography, ray-traced glass reflections, zero motion jitter, no people, no text.

---

⚬ Video 2 (10–20s) — Glass Portal to Travertine Living Suite
Prompt: Continue seamlessly from the previous video sequence. Maintain identical lighting, materials, and architectural layout.
Start: Camera starts at the glass pivot entrance portal from Video 1.
Motion (10–16s): Smooth forward dolly passing through the open sliding glass frame into a double-height minimalist living room. The glowing gold line runs cleanly across the polished light travertine flooring.
Details (16–20s): The camera glides alongside a modern low-profile modular gray sofa, suspended sculptural ring lighting, and a long recessed linear fireplace built into a raw limestone wall.
End Frame: Camera centers on the open glass wall at the far end of the living room looking out toward the outdoor oceanfront terrace.
Style: High-end architectural walkthrough, shallow depth of field, warm interior illumination, 8K resolution, no people, no logos.

---

⚬ Video 3 (20–30s) — Living Area to Sunset Infinity Pool
Prompt: Continue seamlessly from the previous shot.
Start: Camera starts at the living room transition opening toward the outdoor terrace.
Motion (20–25s): The camera glides forward through the floor-to-ceiling opened glass aperture onto a cantilevered limestone patio.
Details (25–30s): The golden path curves around luxury outdoor daybeds and extends along the perimeter of a serene, illuminated infinity pool overlooking an open ocean horizon at golden-hour sunset.
End Frame: Centered low-angle shot hovering just above the calm, azure pool water reflecting the dusk sky.
Style: Photorealistic water caustics, soft twilight sky, luxury coastal architecture, perfectly smooth gimbal movement, no text.

---

⚬ Video 4 (30–40s) — Infinity Pool to 3D Isometric Schematic Finale
Prompt: Continue seamlessly from the previous shot.
Start: Camera begins hovering over the infinity pool at twilight.
Motion (30–36s): The camera smoothly tilts upward and accelerates into a continuous crane-up and pull-back motion, rising high above the terrace.
Transition (36–40s): The photorealistic environment seamlessly transitions into a 3D isometric cutaway model of "Villa 07" resting on a clean architectural blueprint grid, with the golden path glowing throughout the entire layout.
End Frame: Centered high-angle isometric maquette of the complete villa ready for interactive HUD overlays.
Style: Architectural blueprint rendering, clean ambient occlusion, studio lighting, crisp geometry, 8K quality.

Build a cinematic single-page real estate website for BR RESIDENCES — Villa 07 using attached video. Make sure it looks like a continuous scroll in the website from start to end.

Tech stack:
- Next.js 15 App Router
- TypeScript
- Tailwind CSS
- GSAP + ScrollTrigger
- Lenis smooth scrolling
- Lucide React icons
- No external animation libraries beyond GSAP/Lenis

Primary asset:
- Use attached videos hotel-video-1 as 1st and hotel-video-4 as last as the 40-second master cinematic sequence.
- It contains four continuous 10-second scenes:
  1. 0–10s: Isometric blueprint maquette → front entrance
  2. 10–20s: Glass portal → double-height living suite
  3. 20–30s: Living suite → infinity pool at sunset
  4. 30–40s: Infinity pool → isometric blueprint finale
- Use video metadata/duration safely; provide a polished poster-image/loading fallback if the file is unavailable.

Core experience:
Create a full-screen, scroll-driven film experience where the page scroll controls video progression. The video remains pinned while the user moves through a long cinematic scroll range.
Implement `VideoScrubber` as a client component:
- Desktop: Use a muted, playsInline HTML5 video or canvas rendering pipeline.
- Synchronize `video.currentTime` to scroll progress, from 0 to video duration.
- Animate toward target time using requestAnimationFrame and lerp damping of 0.08 for a premium, smooth result.
- Never create scroll feedback loops.
- Preload metadata and render a first-frame/loading state.
- Respect `prefers-reduced-motion`: show standard video controls or static hero state rather than pinned scrubbing.
- On mobile, reduce scrub distance and simplify visual overlays for reliable performance.
- Use GSAP `ScrollTrigger` with a pinned section, scrubbed timeline, and responsive `matchMedia` breakpoints.
- Initialize and destroy Lenis, requestAnimationFrame loops, and ScrollTriggers cleanly.

Visual direction:
- Ultra-luxury architectural editorial aesthetic.
- Architectural Digest meets Aman Resorts meets a high-end property film.
- Quiet, precise, elegant, spacious, never flashy.
- Soft glassmorphism only where useful; avoid heavy blur and clutter.
- Use refined micro-interactions, subtle grain/noise, restrained parallax, filmic vignettes, and luxurious easing.
- Background should remain visually subordinate to the cinematic footage.

Design system:
- Travertine: `#F4EFEB`
- Sand: `#E5DFD7`
- Titanium: `#141416`
- Ambient gold: `#D4AF37`
- Warm amber: `#E5B869`
- Slate gray: `#6B6864`
- Headlines: Playfair Display or Cormorant Garamond, uppercase, light weight, generous letter spacing.
- UI/body: Inter or Plus Jakarta Sans, compact, clean, uppercase micro-labels with wide tracking.
- Load fonts through Next.js font optimization.

Page structure:
1. Fixed glassmorphic navbar
   - Left: “BR RESIDENCES” serif wordmark.
   - Center links: HOME, ABOUT, COMMUNITIES, CONTACT, PRESS.
   - Right: LOG IN, JOIN, and amber CTA: “BOOK A PRIVATE VIEWING”.
   - Desktop glass header with fine border and subtle gradient.
   - Mobile menu should be accessible and elegant.

2. Pinned cinematic video section
   - Full-viewport video/canvas with carefully layered overlays.
   - Add a restrained dark-to-transparent gradient so all text remains legible.
   - Add a subtle film grain overlay using CSS, not a heavy image asset.
   - Use an SVG golden path overlay that traces the architectural journey.
   - Animate its `strokeDashoffset` directly from overall scroll progress.
   - The golden line should feel like the guide line seen in the source film: elegant, thin, illuminated, and non-distracting.

3. Kinetic text choreography
   Animate headline and supporting copy in sync with the scroll sequence. Use fades, vertical drift, blur-to-sharp transitions, and controlled tracking expansion. Keep each message readable before transitioning away.
   Scroll progress milestones:
   - 0–20%:
     Eyebrow: “BR RESIDENCES · VILLA 07”
     Headline: “ONE LINE. AN ENTIRE HOME.”
     Detail: “A journey drawn from blueprint to horizon.”
     Animation: slow fade in, letter-spacing opens slightly, then dissolves.
   - 20–45%:
     Eyebrow: “THE ARRIVAL”
     Headline: “YOUR JOURNEY STARTS HERE.”
     Detail: “A threshold composed in stone, glass, and light.”
   - 45–70%:
     Eyebrow: “THE INTERIOR”
     Headline: “SPACE FOLLOWS THE JOURNEY.”
     Detail: “Travertine, limestone, and open air in quiet continuity.”
   - 70–88%:
     Eyebrow: “THE HORIZON”
     Headline: “THE VIEW WAS DESIGNED FIRST.”
     Detail: “Every room resolves toward the sea.”
     Show the interactive SUNSET / MIDNIGHT lighting toggle here.
   - 88–100%:
     Eyebrow: “VILLA 07”
     Headline: “YOUR ODYSSEY ENDS AT THE HORIZON.”
     Detail: “An architecture of arrival.”
     Transition smoothly into the blueprint finale/hotspot state.

4. Scroll HUD
   - Fixed minimal vertical progress indicator.
   - Show scene number, scene name, current progress, and a subtle “SCROLL TO EXPLORE” label near the beginning.
   - Example scene labels:
     01 / ARRIVAL
     02 / THE LOUNGE
     03 / THE HORIZON
     04 / VILLA 07
   - Keep HUD unobtrusive and hide/reposition it gracefully on mobile.

5. Bottom thumbnail navigation
   - Fixed floating glass bar near the bottom of the screen.
   - Four thumbnail controls: Overview, Lounge, Pool, Master Suite.
   - Use local placeholders from `/public` if image assets are supplied; otherwise create elegant neutral thumbnail states from video poster/frame styling.
   - Clicking a thumbnail should smoothly scroll to exact corresponding timeline positions:
     Overview: 0%
     Lounge: 25%
     Pool: 55%
     Master Suite / Finale: 88%
   - Include active state, hover state, keyboard support, and dot pagination.

6. Sunset / Midnight mode
   - Floating pill control visible from about 70% onward.
   - Buttons: SUNSET and MIDNIGHT.
   - Sunset is default: warm, golden, natural.
   - Midnight applies refined CSS filter/color grading and a layered ambient navy overlay to the video presentation; do not alter video source files.
   - Persist the selected mode during the page session.
   - Use smooth transitions and retain readable contrast.

7. Blueprint finale
   - At the final section, allow the video’s isometric maquette scene to dominate.
   - Add a restrained blueprint-grid overlay and elegant Villa 07 information panel.
   - Add clickable / keyboard-accessible hotspot pins:
     - “4 Bedrooms”
     - “5.5 Bathrooms”
     - “612 m² Interior”
     - “1,240 m² Total Plot”
     - “Infinity Edge Pool”
   - On interaction, pins reveal compact glassmorphic detail cards.
   - Centered final CTA: “BOOK A PRIVATE VIEWING”.

8. Booking modal
   - Opens from all CTA buttons.
   - Accessible dialog: focus trap, Escape close, overlay click close, semantic labels.
   - Fields: Name, Email, Phone, Preferred Viewing Date, Message.
   - Client-side validation and polished success state.
   - No real backend submission required; clearly structure the handler for future API integration.

Required component structure:
- `/components/Navbar.tsx`
- `/components/VideoScrubber.tsx`
- `/components/ScrollHUD.tsx`
- `/components/ThumbnailBar.tsx`
- `/components/TimeModeToggle.tsx`
- `/components/BlueprintFinale.tsx`
- `/components/BookingModal.tsx`
- `/components/ui/*` only where helpful
- `/app/page.tsx`
- `/app/globals.css`

Implementation requirements:
- Use TypeScript types throughout; avoid `any`.
- Keep browser-only animation logic inside client components.
- Avoid hydration errors.
- Use semantic HTML, visible focus states, ARIA labels, and keyboard navigation.
- Use `next/image` for image assets when applicable.
- Avoid excessive motion, text overlap, and scroll-jacking beyond the intentional pinned scrub experience.
- Use clean separation between scene data, animation config, and presentational components.
- Add concise comments only around non-obvious animation synchronization logic.
- Ensure all sections degrade gracefully when JavaScript, video autoplay, or media loading is limited.
- Do not use fake logos, external paid images, or excessive decorative content.