Chai Theory — Modern Indian Café Prompts

Chai Theory — Asset Mapping & Visual System Guidelines

1. MEDIA ASSETS PATH MAPPING:
Videos (/assets/video/):
- `hero-chai-pour.mp4`
- `filter-coffee-pour.mp4`
- `exploded-thali.mp4`
- `exploded-samosa.mp4`
- `sweets-macro.mp4`
- `lassi-matcha-pour.mp4`
- `finale-table-spread.mp4`

Images (/assets/images/):
- `img-kulhad-hero.jpg`, `img-filter-coffee.jpg`, `img-samosa.jpg`, `img-pani-puri.jpg`, `img-jalebi.jpg`, `img-gulab-jamun.jpg`, `img-mango-lassi.jpg`, `img-matcha-latte.jpg`, `img-spices-flatlay.jpg`, `img-tea-leaves.jpg`, `img-cutting-chai.jpg`, `img-poster.jpg`

*Note: Any missing file must be handled gracefully with a warm-white placeholder div labeled in code without breaking layout.

---

2. VISUAL SYSTEM & COLOR PALETTE:
- Background: Pure bright off-white (#FAFAF8) throughout. High-key daylight café feel (opposite of moody agency dark mode).
- Body Text: Warm Charcoal (#2B2320) — never pure black.
- Section Heading Accents (Popping off white background):
  * Hero title -> Chai Brown (#6B3F1D)
  * "Our Coffee" -> Roasted Tan (#8A5A2B)
  * "What We Serve" (Thali/Spice section) -> Saffron Orange (#E38A2C)
  * Samosa / Street-food section -> Chili Red (#C23B22)
  * Sweets section -> Turmeric Gold (#D9A441)
  * Cold & Fusion Drinks -> Split Matcha Green (#5C8A3A) / Mango Orange (#F2994A)
  * CTA / Footer -> Chili Red (#C23B22)
- Typography: Fraunces / Canela / Cormorant Garamond serif headings (6-10vw editorial sizing) paired with Inter / General Sans body copy. No cliché Devanagari or paisley fonts.
- Texture: 2-3% noise/grain overlay across canvas.

Build a premium, scroll-animated website for an Indian café called "Chai Theory — Built By Ruturaj". The website will be screen-recorded for an Instagram Reel, so every scroll moment needs to read as a "wow" beat within 1-2 seconds on camera.

==================================================
1. TECH STACK & ASSETS
==================================================
- Single-page HTML/CSS/JS or React with GSAP 3 + ScrollTrigger.
- Smooth Scroll: Lenis or GSAP ScrollSmoother for buttery inertia.
- Responsive for 1920x1080 desktop screen-recording.
- Media Assets (stored in /assets/video/ and /assets/images/):
  * `hero-chai-pour.mp4`, `filter-coffee-pour.mp4`, `exploded-thali.mp4`, `exploded-samosa.mp4`, `sweets-macro.mp4`, `lassi-matcha-pour.mp4`, `finale-table-spread.mp4`
  * `img-kulhad-hero.jpg`, `img-filter-coffee.jpg`, `img-samosa.jpg`, `img-pani-puri.jpg`, `img-jalebi.jpg`, `img-gulab-jamun.jpg`, `img-mango-lassi.jpg`, `img-matcha-latte.jpg`, `img-spices-flatlay.jpg`, `img-tea-leaves.jpg`, `img-cutting-chai.jpg`, `img-poster.jpg`

==================================================
2. VISUAL SYSTEM (HIGH-KEY DAYLIGHT BRAND)
==================================================
- Background: Pure off-white (#FAFAF8) throughout.
- Body Copy: Warm Charcoal (#2B2320).
- Accent Colors per Section:
  * Hero -> Chai Brown #6B3F1D
  * Coffee -> Roasted Tan #8A5A2B
  * Thali -> Saffron Orange #E38A2C
  * Street Food -> Chili Red #C23B22
  * Sweets -> Turmeric Gold #D9A441
  * Cold & Fusion -> Matcha Green #5C8A3A & Mango Orange #F2994A
  * Footer -> Chili Red #C23B22
- Typography: Fraunces / Cormorant Garamond serif headings + Inter sans body copy.
- Subtle 2-3% grain/noise canvas overlay.

==================================================
3. SECTION-BY-SECTION SPECIFICATION
==================================================

A. Preloader (<1.5s):
"CHAI THEORY - Built By Ruturaj" letter-by-letter fade in, thin saffron progress bar, smooth transition to hero.

B. Hero Section:
Full-viewport `hero-chai-pour.mp4` background video (autoplay/muted/loop). "CHAI THEORY" in Chai Brown serif with character-by-character SplitText stagger reveal synced to steam rising. Saffron kicker: "MASALA CHAI · FILTER COFFEE · STREET FOOD". Pulsing scroll indicator. Parallax zoom-out on scroll start.

C. "Our Coffee" — Filter Coffee Showcase:
Split-screen layout with `filter-coffee-pour.mp4` on one side, Roasted Tan heading + copy on the other. Staggered stat callouts ("Slow-brewed · South Indian style · Since 2026").

D. "What We Serve" — THE EXPLODED SCROLL MOMENT (HERO INTERACTION):
- Pinned section (`ScrollTrigger.create({ pin: true, scrub: 1 })`).
- Bind `video.currentTime = scrollProgress * video.duration` for `exploded-thali.mp4` (ingredients assemble on scroll down, explode on scroll up).
- Animate pop labels in Saffron Orange as food items settle ("MASALA DOSA", "SAMBAR", "MEDU VADA", "COCONUT CHUTNEY").
- Repeat pin+scrub treatment for `exploded-samosa.mp4` directly after with Chili Red heading: "STREET FOOD, ELEVATED."

E. "Our Sweets":
`sweets-macro.mp4` large panel with Turmeric Gold heading "OUR SWEETS". Horizontal scrub-linked card gallery featuring `img-jalebi.jpg` and `img-gulab-jamun.jpg`.

F. "Cold & Fusion Drinks":
Split panel with `lassi-matcha-pour.mp4`. Side-by-side headings: "MANGO LASSI" (Mango Orange) and "MATCHA CHAI FUSION" (Matcha Green).

G. Ingredient/Texture Gallery:
GSAP horizontal scroll gallery (`img-samosa.jpg`, `img-pani-puri.jpg`, `img-spices-flatlay.jpg`, `img-tea-leaves.jpg`, `img-cutting-chai.jpg`) with parallax movement and one-word captions.

H. Finale / CTA:
`finale-table-spread.mp4` background parallax. Large Chili Red button ("RESERVE YOUR TABLE") with fill hover effect. Minimal footer: "Built by Ruturaj | BR".

==================================================
4. REEL "STOP THE SCROLL" PRINCIPLES
==================================================
- Front-load the best interaction (Exploded Thali reachable within first 3-4 seconds).
- Zero dead scrolling: Every scroll increment must visibly trigger motion.
- Calming contrast beat before the Thali explosion payoff.
- Section-by-section accent color shifts as retention hooks.
- Micro-interactions: Magnetic button hover, custom ring cursor.