/* Scroll-driven wedding events story. Pinned stage, scenes transition as user scrolls. Illustrations are line-art on crimson, matching the reference card. */ const { useState: sUseState, useEffect: sUseEffect, useRef: sUseRef, useMemo: sUseMemo } = React; const SC_CREAM = "#fbf3e1"; const SC_GOLD = "#e8c97a"; const SC_GOLD2 = "#c9a961"; /* ============================================================ SCENE ILLUSTRATIONS — one per event, line-art on transparent ============================================================ */ /* 1 · Ganesh Pujan — Ganesh icon with offerings */ function SceneGanesh() { return ( ); } /* 2 · Haldi — pot with turmeric, hands, splashes */ function SceneHaldi() { return ( ); } /* 3 · Mehendi — open palm with henna paisley patterns */ function SceneMehendi() { return ( ); } /* 4 · Sangeet — musicians + dancing silhouettes */ function SceneSangeet() { return ( ); } /* 5 · Baraat — groom on horse with band procession */ function SceneBaraat() { return ( ); } /* 6 · Pheras — mandap with sacred fire and couple */ function ScenePheras() { return ( ); } /* 7 · Reception — couple under floral arch + champagne */ function SceneReception() { return ( ); } /* ============================================================ SCENE DEFINITIONS ============================================================ */ const SCENES = [ { key: "ganesh", day: "Day 1 · 9 AM", name: "Ganesh Pujan", hindi: "गणेश पूजन", blurb: "We begin with Lord Ganesha — the remover of obstacles. A small puja, incense in the morning light, the first diya of the wedding.", Component: SceneGanesh, bg: "#7a1818", accent: "#e8c97a", }, { key: "haldi", day: "Day 1 · 11 AM", name: "Haldi", hindi: "हल्दी", blurb: "Turmeric, mustard oil and laughter. Family takes turns applying haldi for the bride and groom's glow. Expect a yellow mess. Expect joy.", Component: SceneHaldi, bg: "#8a1f1f", accent: "#ffc857", }, { key: "mehendi", day: "Day 1 · 1:30 PM", name: "Mehendi", hindi: "मेहंदी", blurb: "Henna for the bride, palms-out joy for everyone. Dholki under the canopy, masala chai, a long catch-up that runs into evening.", Component: SceneMehendi, bg: "#7c2222", accent: "#e8c97a", }, { key: "sangeet", day: "Day 1 · 7:30 PM", name: "Sangeet", hindi: "संगीत", blurb: "Choreographed numbers, family roasts, open dance floor. The kind of night photographs can never quite capture, but everyone remembers.", Component: SceneSangeet, bg: "#681616", accent: "#e8c97a", }, { key: "baraat", day: "Day 2 · 4 PM", name: "Baraat", hindi: "बारात", blurb: "Madhurendra arrives — horse, band, baaja, and a procession of dancers refusing to take the next street faster than fifteen minutes.", Component: SceneBaraat, bg: "#8c1d1d", accent: "#e8c97a", }, { key: "pheras", day: "Day 2 · 6:30 PM", name: "Pheras", hindi: "विवाह", blurb: "Seven sacred vows around the holy fire. The whole reason we're all here. Quiet, important, beautiful.", Component: ScenePheras, bg: "#5e1212", accent: "#ffc857", }, { key: "reception", day: "Day 2 · 9 PM", name: "Reception", hindi: "स्वागत समारोह", blurb: "Dinner, photos with the new couple, a kulfi station, a dessert table that does not believe in moderation. Dance until your feet hurt.", Component: SceneReception, bg: "#7a1818", accent: "#e8c97a", }, ]; /* ============================================================ SCROLL STORY COMPONENT ============================================================ */ function ScrollStory() { const wrapRef = sUseRef(null); const [active, setActive] = sUseState(0); const [progress, setProgress] = sUseState(0); // 0..scenes.length // scroll listener — compute which scene is active sUseEffect(() => { let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const el = wrapRef.current; if (!el) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight; // Total scrollable range = height - vh const totalScroll = el.offsetHeight - vh; if (totalScroll <= 0) return; const scrolled = Math.max(0, Math.min(totalScroll, -r.top)); const t = scrolled / totalScroll; const p = t * SCENES.length; setProgress(p); const idx = Math.min(SCENES.length - 1, Math.floor(p)); setActive(idx); }); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); }; }, []); const jumpToScene = (i) => { const el = wrapRef.current; if (!el) return; const totalScroll = el.offsetHeight - window.innerHeight; const targetTop = el.offsetTop + (totalScroll * (i + 0.5)) / SCENES.length; window.scrollTo({ top: targetTop, behavior: "smooth" }); }; // height = one viewport per scene const totalHeight = `${SCENES.length * 100}vh`; return (

{/* progress rail */}

{/* progress bar */}

{/* scenes stack — all rendered, one visible */}

{SCENES.map((s, i) => { const dist = i - progress; // -inf..+inf, 0 = exactly on const visible = Math.abs(dist) < 1.05; // each scene fades in/out and translates const opacity = visible ? Math.max(0, 1 - Math.abs(dist) * 1.4) : 0; const ty = dist * 60; // vertical drift in px const scale = 0.94 + (1 - Math.min(1, Math.abs(dist))) * 0.06; const rotZ = dist * -2; return (

{/* floating petals overlay specific to scene */}

{s.day}

{s.name}

{s.hindi}

{s.blurb}

{String(i + 1).padStart(2, "0")} / {String(SCENES.length).padStart(2, "0")}

); })}

{/* scroll hint shown only on first scene */} {progress < 0.3 && (

scroll to walk through the days

)}

); } Object.assign(window, { SceneGanesh, SceneHaldi, SceneMehendi, SceneSangeet, SceneBaraat, ScenePheras, SceneReception, ScrollStory, SCENES, }); /* ============================================================ EVENTS TIMELINE TABS — flat reference of all events ============================================================ */ function EventsTabs() { const [active, setActive] = sUseState(0); const S = SCENES[active]; const Illu = S.Component; return (

The Two Days

Timeline at a glance

Pick an event to peek at — or scroll back up to walk through them one by one.

{SCENES.map((s, i) => ( ))}

{S.day}

{S.name}

{S.hindi}

{S.blurb}

{String(active + 1).padStart(2, "0")} / {String(SCENES.length).padStart(2, "0")}

); } Object.assign(window, { EventsTabs });