The Aurelia — luxury hotel prompts

Google Flow :- MASTER HOTEL DESCRIPTION (paste into every prompt)
A modern international 5-star luxury hotel with contemporary architecture: a sleek glass curtain-wall facade combined with warm sandstone and dark teak wood cladding, clean minimalist geometric lines, a flat or gently low-pitched roofline, an elegant modern porte-cochère entrance with a sculptural water feature, floor-to-ceiling glass windows, polished marble floors and brass accent fixtures throughout the interior, warm wood paneling, contemporary Indian art pieces on the walls, minimalist landscaped gardens with manicured hedges and palm trees

🔒 GOLDEN HOUR LIGHT BLOCK (paste alongside the description)
Golden hour lighting throughout, warm low-angle sunlight streaming in soft amber and rose tones, long soft shadows, gentle lens flare, no darkness or shadow-heavy moodiness, everything glowing warmly, cinematic color grade, photorealistic, shot on 35mm anamorphic lens

🎬 VIDEO PROMPTS (6 clips × ~10 sec — the full journey)

VIDEO 1A — DRAPED HOTEL, CLOTH LIFTING AWAY (the scroll-scrubbed reveal itself)
[Paste Golden Hour Light Block] Wide establishing shot of a modern 5-star luxury hotel building, its contemporary architectural form — clean flat roofline, glass curtain-wall facade, geometric massing — clearly visible underneath because it is entirely draped in a single continuous sheet of natural cotton cloth, like a dust-sheet over a monument, the fabric closely following and revealing the building's shape beneath it, gently rippling in the breeze. Around the building, the surrounding grounds are fully visible and NOT covered: minimalist landscaped gardens, a stone driveway, palm trees, a modern water feature, warm golden hour sunlight and long shadows across the lawns, clear warm sky. Slowly and smoothly, the cotton cloth lifts upward and away from the building from bottom to top, as if rising off it, gradually revealing the real glass-and-stone facade underneath — floor-to-ceiling windows, warm sandstone cladding, a sleek modern entrance canopy — while the grounds around it remain completely unchanged throughout. The cloth's motion is slow, continuous, and linear from start to finish, fully lifting clear of the building by the end of the clip. Camera locked off, wide static shot, no camera movement — the cloth lifting is the only motion. Cinematic, magical, warm. No text, no logos, no watermark, no people.

Site use: THE hero mechanic — the hotel structure is visible through/under the draped cloth from frame one, the outdoor grounds are never covered at all, and the lift is slow and perfectly linear so it scroll-scrubs cleanly: pin the hero section and bind the video's currentTime to scroll progress, so scrolling down physically lifts the cloth off the hotel, and scrolling back up drapes it again.

VIDEO 1B — INTO THE LOBBY (plays once the cloth is fully lifted)

Use the last frame of Video 1A as this video's first frame to continue seamlessly.

[Paste Golden Hour Light Block] [Paste Master Hotel Description]. Continuing from a wide view of the fully revealed hotel facade at golden hour — glass and sandstone, floor-to-ceiling windows, a sleek modern entrance canopy, manicured grounds around it — the camera begins a slow, smooth forward glide toward the entrance, passing through automatic glass doors into a vast marble lobby with a soaring double-height ceiling, a sculptural brass chandelier, and warm golden light pouring through the glass walls. Continuous unbroken camera movement, steadicam-smooth, no cuts. Cinematic, awe-inspiring, warm. No text, no logos, no watermark, no people.

Site use: Plays automatically (or continues the same scroll-scrub) right after Video 1A's cloth fully lifts — the "move slowly inside it" part of your brief.

VIDEO 2 — LOBBY → BAR RACK → BAR LOUNGE

Use the last frame of Video 1B as this video's first frame to continue the camera move seamlessly.

[Paste Golden Hour Light Block] [Paste Master Hotel Description]. Continuing a smooth unbroken forward glide through the marble lobby, the camera moves past a sleek backlit glass-and-brass bar counter, a tall illuminated shelving rack lined with rows of amber and dark spirit bottles catching the warm golden light, the camera tracking slowly alongside the rack. It then continues gliding past the counter, revealing the full luxury bar lounge beyond — low modern leather and velvet seating, brass side tables, warm golden hour light pouring through tall floor-to-ceiling windows. Continuous camera movement throughout, no cuts. Warm, inviting, sophisticated. No text, no logos, no watermark, no people.

Site use: "The Bar" section — the rack-then-lounge motion is your "place it in the rack, then move to the section" idea, achieved through one continuous camera glide.

VIDEO 3 — BAR LOUNGE → CORRIDOR → GYM

Use the last frame of Video 2 as this video's first frame.

[Paste Golden Hour Light Block] [Paste Master Hotel Description]. Continuing the same smooth unbroken glide, the camera moves from the bar lounge through an open modern corridor lined with floor-to-ceiling glass on one side, golden light streaming through as the camera passes. The corridor opens into a bright luxury hotel gym: sleek dark wood and brass-accented equipment, a wall of glass windows flooding the space with warm golden hour light, a neatly folded stack of white towels on a marble bench catching the light as the camera glides past them toward the center of the room. Continuous camera movement, no cuts. Bright, premium, energizing yet warm. No text, no logos, no watermark, no people.

Site use: "Wellness & Fitness" section — the towel-on-the-bench beat gives the same "place an object, arrive at the space" moment for the gym.

VIDEO 4 — DINING TABLE SETTING → FULL DINING HALL REVEAL
[Paste Golden Hour Light Block] [Paste Master Hotel Description]. The shot opens in extreme close-up on an elegantly set dining table: fine gold-rimmed china, a folded ivory linen napkin, brass cutlery, and a small brass vase of marigold flowers, warm golden hour light raking low across the table setting. The camera slowly pulls back and rises in one continuous smooth movement, revealing first the full table, then the entire modern dining hall around it — a soaring glass-walled ceiling, warm wood-paneled walls, rows of beautifully set tables, golden hour light flooding in from floor-to-ceiling windows along one side. Continuous camera movement, no cuts. Elegant, warm, inviting. No text, no logos, no watermark, no people.

Site use: "Dining" section — table-detail-to-full-room reveal, a strong standalone pull-back shot.

VIDEO 5 — POOLSIDE → UNDERWATER → RISE BACK UP
[Paste Golden Hour Light Block] [Paste Master Hotel Description, adapted for exterior: replace interior marble floor references with a sandstone infinity pool deck]. The shot begins with a wide golden hour view of a modern luxury infinity pool deck surrounded by minimalist stone loungers and a sleek glass railing, the pool's surface glowing amber and gold with the reflected sunset, steam or mist gently rising at the water's edge. The camera glides forward and smoothly descends beneath the water's surface, transitioning into a clear underwater shot: sunlight beams pierce down through the water in warm golden shafts, gently rippling caustic light patterns dance across the pool floor tiles. The camera then rises back up through the surface, breaking into the golden hour air again with water droplets catching the light, revealing the full sunset view across the infinity pool edge toward the horizon. Continuous camera movement throughout, no cuts. Breathtaking, warm, serene. No text, no logos, no watermark, no people.

Site use: "The Pool" section — because it's one continuous descend/rise, it scrubs beautifully with scroll: scrolling down takes the visitor underwater, scrolling further brings them back up.

# CLAUDE CODE BUILD PROMPT — "THE AURELIA" Hotel
### Next.js · Tailwind v4 · Framer Motion · Lenis · 6 videos, zero stock images
### Copy everything below the line into Claude Code.

---

Build me a premium, single-page, scroll-animated website for a modern 5-star luxury hotel called **THE AURELIA**. This is a portfolio/demo piece meant to look like a $25k agency build — it will be screen-recorded for an Instagram Reel, so every scroll moment must land as a visible "wow" beat within 1–2 seconds on camera.

**If a `ui-ux-pro` skill (or equivalent design skill) is available in this environment, read and apply it before writing any component code.**

## 0. MY ASSETS — THIS IS ALL I HAVE
Six golden-hour video files. **No images, no stock photos, no icon illustrations.** Every visual on this site comes from these six videos or from CSS/type. Do not invent asset references I don't have.

```
public/videos/
  Hotel_draped_in_cloth_revealed_202607262205.mp4   → HERO (cloth lifts off the hotel)
  Hotel_facade_to_marble_lobby_202607262228.mp4     → ARRIVAL (glide from facade into lobby)
  Luxury_bar_lounge_interior_1080p_202607262230.mp4 → THE BAR
  Elegant_dining_hall_golden_hour_202607262231.mp4  → DINING
  Hotel_suite_with_modern_amenities_202607262241.mp4→ THE SUITES
  Infinity_pool_at_sunset_1080p_202607262235.mp4    → THE POOL (finale)
```

Create `src/lib/assets.ts` exporting these as named constants so filenames appear exactly once in the codebase and I can swap them without hunting.

### 0.1 — First, prep the videos (do this before any UI work)
Write me a `scripts/prep-videos.sh` using ffmpeg that, for each source file:
1. **Re-encodes with dense keyframes** (`-g 15 -keyint_min 15 -sc_threshold 0`) — without this, scroll-scrubbing stutters badly. This is the single most important prep step.
2. Strips audio (`-an`), caps at 1080p, targets ~4 Mbps H.264 with `-movflags +faststart`.
3. Also emits a **WebM/VP9** version for better compression.
4. **Extracts a poster frame** (first frame for most; for the hero, extract frame 0 so the poster shows the hotel still fully draped) as an optimized `.webp` into `public/posters/`.

Output to `public/videos/optimized/` and `public/posters/`. Print the before/after file sizes. Since I have no images, these extracted poster frames are also my only fallback and OG-image source — generate an OG image from the hero's final frame (hotel revealed) at 1200×630.

## 1. TECH STACK
Node 20+, npm. Scaffold properly:

```
npx create-next-app@latest aurelia --typescript --tailwind --eslint --app --src-dir
cd aurelia
npm install motion lenis
npm install -D prettier prettier-plugin-tailwindcss
```

- **Next.js (App Router)** + TypeScript. Static export is fine — this is a marketing page, no backend.
- **Tailwind CSS v4** via the `@tailwindcss/vite`/PostCSS plugin that `create-next-app` wires up. Use the **v4 CSS-first approach**: `@import "tailwindcss";` plus an `@theme { }` block for design tokens. **Do not create a `tailwind.config.js`** — that's the v3 pattern.
- **Framer Motion — install the current `motion` package and import from `motion/react`** (the library rebranded from `framer-motion`; `motion` is the current name). Use `useScroll`, `useTransform`, `useMotionValueEvent`, and `useSpring`.
- **Lenis** for smooth inertia scrolling, wired so Framer Motion's scroll values stay in sync (drive Lenis off `requestAnimationFrame` and let Framer read native scroll — do NOT double-smooth, or the scrub will feel laggy).
- Prettier with `prettier-plugin-tailwindcss`.
- Deploy target Vercel; `npm run build` must be clean with zero TS errors.

## 2. THE CORE INTERACTION — SCROLL-SCRUBBED VIDEO (build this first, it's the whole site)
Every video section uses the same primitive. Build **one reusable `` component** and use it six times — don't hand-write the logic per section.

```tsx
// Behavior spec for 
// props: src, poster, children (overlay content), scrubLength ("short" | "long"), pin
```

- Wrap in a tall spacer section (e.g. `h-[300vh]`) with a `sticky top-0 h-screen` inner container holding the video — this is the pin.
- `const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end end"] })`
- On `useMotionValueEvent(scrollYProgress, "change", ...)`, set `video.currentTime = progress * video.duration`.
- **Critical guards:**
  - Wait for `loadedmetadata` before touching `currentTime`; store duration in a ref.
  - Throttle writes to one per animation frame via `requestAnimationFrame` — never write `currentTime` directly in the event callback.
  - Set `playsInline`, `muted`, `preload="auto"`, and `poster`. Never call `.play()` on scrubbed videos.
  - Guard against `NaN`/`Infinity` duration (Safari reports this briefly).
- **Honest risk — flag it to me if it happens:** programmatic `currentTime` scrubbing is unreliable on iOS Safari and can stutter on low-end devices even with dense keyframes. If it's not smooth after the ffmpeg re-encode, **stop and tell me** rather than silently simplifying. The fallback is a canvas + extracted image-sequence approach, which I'd rather decide on deliberately.
- **Mobile fallback:** below `md`, if scrubbing is janky, degrade gracefully to an autoplaying muted looping video with the same overlay animations. Detect with a media query, not user-agent sniffing.

## 3. SECTION-BY-SECTION SPEC

### A. Preloader
Percentage counter 0–100 in the display serif, thin hairline progress rule. Tie real progress to video metadata + font loading — don't fake it. On complete, the counter scales up and wipes away. Under 1.5s.

### B. HERO — the cloth reveal (`Hotel_draped_in_cloth_revealed`)
- `` — give this the most scroll distance (`h-[350vh]`) so the cloth lift feels slow and deliberate.
- Scrolling down lifts the cloth off the hotel; scrolling up re-drapes it. **This is the hook shot — it must be flawless.**
- Overlay: **"THE AURELIA"** in giant display serif, character-by-character stagger reveal on mount (Framer Motion `staggerChildren`).
- Kicker above in wide-tracked uppercase sans: `A MODERN SANCTUARY — GOLDEN HOUR, EVERY HOUR`
- As `scrollYProgress` advances, `useTransform` the title's opacity/blur/y so it **fades and lifts away as the cloth lifts** — the type gets out of the way for the reveal.
- Thin pulsing scroll cue, bottom-center, fading out after first scroll.

### C. ARRIVAL (`Hotel_facade_to_marble_lobby`)
- `` — scroll drives the glide from facade through the doors into the lobby.
- Overlay copy fades in at ~40% progress, out by ~85%: heading "ARRIVAL", one restrained paragraph.
- Use `useTransform` on scroll progress for the text, not `whileInView` — the copy should feel tied to the camera move.

### D. STATEMENT SECTION (no video — typographic breather)
- Full-viewport warm-ivory section, one large centered pull-quote in the display serif about the property's philosophy. Words reveal on a stagger via `whileInView`.
- **This section exists deliberately as a contrast beat** — a moment of stillness so the next reveal hits harder. Don't cut it for being "empty."

### E. THE BAR (`Luxury_bar_lounge_interior`)
- ``. Overlay heading "THE BAR" in deep bronze, plus 3 short detail lines (e.g. `RARE SPIRITS · 200 LABELS · SUNSET SERVICE`) animating in on a stagger as the camera passes the rack.

### F. DINING (`Elegant_dining_hall_golden_hour`)
- ``. As the camera pulls back to reveal the hall, `useTransform` the heading **scale down** slightly in counter-motion to the camera's pull-back — a small touch that makes the section feel choreographed rather than captioned.

### G. THE SUITES (`Hotel_suite_with_modern_amenities`)
- `` with an overlaid **amenities list** — items reveal one by one as scroll progresses, each a thin hairline-divided row. No icons (I have no icon assets) — use type and rules only.

### H. THE POOL (`Infinity_pool_at_sunset`) — finale
- ``, `h-[350vh]`. This is the closing showpiece.
- As the camera descends underwater, `useTransform` a subtle cool-blue overlay tint in and back out — reinforces the submersion in the UI itself.
- Heading "THE POOL" fades out during submersion and a different line fades in as the camera surfaces.

### I. BOOKING / CTA
- Warm-ivory section. Large heading, a minimal 3-column rate table (Suite / Pool Villa / Penthouse) with hairline dividers, rows staggering in.
- Primary CTA **"RESERVE YOUR STAY"** — bronze button with a gold fill-sweep hover (animate a pseudo-element or a Framer `motion.span`, not a plain color change).
- Footer: **`BR | Built By Ruturaj`** typographically confident (not a tiny afterthought), plus social links, Instagram primary.

## 4. DESIGN SYSTEM
Define all of this as Tailwind v4 `@theme` tokens — a real system, not scattered hex values.

- Background: warm ivory `#FBF6EE` (never stark white — it must match the videos' golden-hour warmth)
- Body text: warm charcoal-brown `#3A2A1F`
- Primary/headings: deep bronze `#6B4A2E`
- Accent: antique brass `#B8863B`
- Secondary accent (sparing): warm terracotta `#C1683D`
- **Typography:** a high-contrast display serif for headings (**Fraunces** or **Instrument Serif** via `next/font/google`, self-hosted automatically) at confident sizes — hero `clamp(3.5rem, 12vw, 11rem)`. Clean sans (**Inter**) for body and UI. Wide tracking (`0.2em`) uppercase for kickers and labels.
- Subtle CSS/SVG noise grain overlay at 2–3% opacity site-wide so flat ivory doesn't look sterile. **No raster texture files** — generate it with `feTurbulence`.
- Hairline dividers at 12–15% opacity. No border-radius except on buttons.
- Video overlays: use a soft bottom-up gradient scrim (`from-black/40`) behind overlay text so it stays legible over golden-hour footage — check contrast on the brightest frames, not the darkest.

## 5. THE "STOP THE SCROLL" LAYER
- **Front-load the payoff.** The cloth lift must be visibly moving within 2 seconds of a recording starting. Keep the preloader tight.
- **No dead scroll zones.** If 200px of scroll produces no visible motion, tighten that section.
- **Micro-interactions:** custom cursor (small dot growing to a ring near interactive elements), underline-draw on links, magnetic CTA button, a thin fixed scroll-progress rule at the top.
- **Everything reverses cleanly.** Scrubbed sections must look deliberate scrolled backward — never glitchy.

## 6. PERFORMANCE / ACCESSIBILITY
- Lazy-mount offscreen videos (`IntersectionObserver`); only the hero preloads eagerly. Six 1080p videos will tank Lighthouse otherwise.
- Poster frames on every video so there's never a blank flash.
- `will-change` only on actively animating elements, removed after.
- Respect `prefers-reduced-motion`: static poster frames + fade-only transitions, all content still readable.
- Semantic HTML, real heading hierarchy, visible focus states, keyboard-navigable CTA.
- Report actual Lighthouse scores when done. Target 90+ on desktop; tell me honestly if video weight makes that impossible rather than gaming the number.

## 7. BUILD ORDER
**(1)** Scaffold + Tailwind v4 `@theme` tokens + fonts + `assets.ts`; **(2)** the ffmpeg prep script, run it, confirm output; **(3)** Lenis + the reusable `` primitive; **(4)** the hero cloth-reveal section — riskiest and most important, verify smoothness before continuing; **(5)** remaining five video sections; **(6)** statement + booking + footer; **(7)** polish pass on cursor, micro-interactions, reduced-motion.

Confirm `npm run dev` builds cleanly at each stage. If scroll-scrubbing doesn't feel smooth after the ffmpeg re-encode, stop and tell me — that interaction is the entire site, and I'd rather change approach than ship a janky version.