// ──────────────────────────────────────────────────────────────────────── // agenda.jsx — Wedding Day Agenda on an aged-IVORY parchment SCROLL that // unrolls downward as the page scrolls. Real HTML/CSS — no baked image. // // • top bronze rod appears first; a soft fold-shadow sits under it where the // paper emerges; the ivory parchment unrolls (clip-path) revealing the // compact header, then each agenda row fades/slides in as the opening edge // passes it, the location buttons last, and the bottom rod settles when the // scroll is fully open. // • two compact location buttons FLIP on click / tap / keyboard to addresses. // • clean & modern: ivory paper, restrained gold accents, no heavy flourishes. // ──────────────────────────────────────────────────────────────────────── (function () { const { useState, useEffect, useRef, useCallback } = React; // ── palette ── const GOLD = '#C9A24B'; // antique gold const GOLD_LT = '#d8b46a'; const GOLD_HI = '#f0d493'; const GOLD_DK = '#9c7a32'; const MAROON = '#6B1D1D'; // deep maroon const MAROON_D = '#4a1414'; const IVORY = '#F3E4C6'; // parchment ivory const BROWN = '#6f4a22'; // warm brown const INK = '#3A2410'; // warm brown text const ICON = '#f0d493'; const cl = (v, a, b) => Math.max(a, Math.min(b, v)); const sm = (t) => {t = cl(t, 0, 1);return t * t * (3 - 2 * t);}; // ── ceremonial gold line/figure icons ────────────────────────────────── function Glyph({ name }) { const g = { fill: ICON }; const d = MAROON_D; switch (name) { case 'gopuram':return ( ); case 'mandap':return ( ); case 'family':return ( ); case 'meal':return ( ); case 'camera':return ( ); case 'hall':return ( ); default:return null; } } // compact maroon disc holding a gold glyph function IconDisc({ name, size = 'clamp(32px,7.6vw,44px)' }) { return (
); } // ── antique parchment scroll rod (photographic asset). Fills its // container width; the parchment body is inset so the bronze finials // always overhang the paper and are NEVER clipped. ── function ScrollRod({ reveal = 1, flip = false }) { const op = sm(reveal); const A = (q) => window.asset ? window.asset(q) : q; const src = flip ? 'assets/scroll-rod-bottom-fixed.png' : 'assets/scroll-rod-top-fixed.png'; return ( ); } // slim ornamental divider function MiniDivider({ width = 120 }) { const OD = window.OrnamentalDivider; return ; } // ── one agenda row — compact ivory ticket ────────────────────────────── const AgendaItem = React.forwardRef(function AgendaItem( { time, ampm, title, desc, icon, show, first, last }, ref) { return (
{/* time */}
{time}
{ampm}
{/* timeline column: subtle gold line + disc */}
{/* card */}

{title}

{desc}

); }); // ── compact horizontal flip-card location button ─────────────────────── // Short fixed height (no tall reserved address block); flips on tap to // reveal a 2-line address. Both faces are a tidy [icon | text] row so the // front state has no empty dead space. function FlipButton({ icon, label, address }) { const [flipped, setFlipped] = useState(false); const [hover, setHover] = useState(false); const toggle = useCallback(() => setFlipped((v) => !v), []); const onKey = useCallback((e) => { if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();toggle();} }, [toggle]); const lift = hover && !flipped ? -3 : 0; const H = 'clamp(58px,15vw,70px)'; // NOTE: these buttons live inside the parchment, which has a clip-path — // that flattens any 3D context, so a rotateY flip is neutralised. We use a // plain opacity cross-fade between two stacked faces instead (robust here). const faceBase = { position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 'clamp(9px,2.4vw,13px)', padding: '8px clamp(13px,3.2vw,20px)', borderRadius: 13, overflow: 'hidden', transition: 'opacity .35s ease' }; const frontFace = { ...faceBase, border: `1px solid ${GOLD_LT}`, background: 'linear-gradient(165deg, #7e2424 0%, #6B1D1D 52%, #4a1414 100%)', boxShadow: 'inset 0 1px 0 rgba(255,214,160,0.18), inset 0 -2px 5px rgba(40,8,8,0.34)' }; const backFace = { ...faceBase, border: `1px solid ${GOLD}`, background: 'linear-gradient(165deg, #fff8ea 0%, #f6ecd4 55%, #efe0c0 100%)', boxShadow: 'inset 0 1px 0 rgba(255,253,247,0.8)' }; return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ flex: '1 1 240px', maxWidth: 340, minWidth: 0, cursor: 'pointer', outline: 'none', transform: `translateY(${lift}px)`, transition: 'transform .3s ease', borderRadius: 13, boxShadow: hover ? '0 12px 22px -13px rgba(60,26,8,0.5), 0 0 0 1px rgba(217,178,94,0.5), 0 0 16px rgba(217,178,94,0.3)' : '0 7px 16px -12px rgba(60,26,8,0.42), 0 2px 5px -3px rgba(60,26,8,0.24)' }}>
{/* front — maroon plaque: glyph + label/hint */}
{label} View address
{/* back — ivory card: disc + label/address */}
{label} {address.map((ln, i) => {ln})}
); } // ── agenda items ─────────────────────────────────────────────────────── const ITEMS = [ { time: '8:30', ampm: 'AM', title: 'Guest Arrival at Kovil', icon: 'gopuram', desc: 'Please arrive early for a warm welcome and blessings.' }, { time: '9:00', ampm: 'AM', title: 'Wedding Ceremony', icon: 'mandap', desc: 'The sacred ceremony begins with the blessings of our families.' }, { time: '10:30', ampm: 'AM', title: 'Family Blessings & Photos', icon: 'family', desc: 'Special blessings and photographs with close family members.' }, { time: '12:30', ampm: 'PM', title: 'Lunch at Hall', icon: 'meal', desc: 'Join us for a delicious traditional wedding feast.' }, { time: '2:00', ampm: 'PM', title: 'Photos & Memories', icon: 'camera', desc: 'Capturing joyful moments to cherish forever.' }]; function AgendaScroll() { const sectionRef = useRef(null); const paperRef = useRef(null); const itemRefs = useRef([]); const [reveal, setReveal] = useState(0); const [paperH, setPaperH] = useState(1000); const [fracs, setFracs] = useState(ITEMS.map((_, i) => 0.4 + i * 0.09)); // measure paper + item positions const measure = useCallback(() => { const paper = paperRef.current; if (!paper) return; const h = paper.scrollHeight || 1000; setPaperH(h); setFracs(itemRefs.current.map((el) => el ? el.offsetTop / h : 0)); }, []); useEffect(() => { measure(); const ro = new ResizeObserver(measure); if (paperRef.current) ro.observe(paperRef.current); window.addEventListener('resize', measure); const t = setTimeout(measure, 400); return () => {ro.disconnect();window.removeEventListener('resize', measure);clearTimeout(t);}; }, [measure]); // scroll-linked unroll progress useEffect(() => { let raf = 0; const onScroll = () => { if (raf) return; raf = requestAnimationFrame(() => { raf = 0; const el = sectionRef.current; if (!el) return; const r = el.getBoundingClientRect(); const vh = window.innerHeight; // Unroll over a comfortable scroll distance so the paper visibly // opens downward as you scroll — not already-open on arrival. const span = cl(paperH * 0.9, vh * 0.72, vh * 1.15); const p = cl((vh * 0.82 - r.top) / span, 0, 1); setReveal(p); }); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => {window.removeEventListener('scroll', onScroll);window.removeEventListener('resize', onScroll);}; }, [paperH]); const clipR = cl(reveal * 1.06, 0, 1); // paper grows slightly ahead of content const hidePct = (1 - clipR) * 100; const edgeY = paperH * clipR; const rodTop = sm(reveal / 0.05); const rodBot = sm((reveal - 0.92) / 0.07); const showEdge = reveal > 0.02 && reveal < 0.98; const itemShow = (i) => sm((clipR - fracs[i] - 0.01) / 0.1); const A = (q) => window.asset ? window.asset(q) : q; // Container = the ROD's footprint. Parchment body is inset to the // cylinder's span so the bronze finials always overhang the paper. const SCROLL_W = 'min(90vw, 560px)'; const BODY_W = '83.7%'; const TUCK = `calc(${SCROLL_W} * -0.030)`; return (
{/* soft vignette behind the scroll */}
{/* TOP ROD — foreground, full container width, never clipped */} {/* PARCHMENT BODY — inset & centred beneath the rod's cylinder. Only THIS wrapper is clipped during the unroll; the rods sit outside it so their finials/end-caps are never masked. */}
{/* fine, even paper grain */}
); } window.AgendaScroll = AgendaScroll; })();