// ==================== THREE COVER VARIANTS ==================== // All share: marsala/gold/ivory · couple-3 photo · "Save the date — we're getting married" // · balanced ornaments · lush intro animation // // IMPORTANT: every responsive size is derived from container width (via // useContainerWidth), NOT from `vw`. The variants render inside arbitrary-sized // design-canvas artboards, so vw would be wildly wrong. const COVER_DATE = 'Saturday, 9 May 2026 · 9:35 A.M'; const COVER_VENUE = 'Anvitha Gardens · Karimnagar'; const COVER_TAGLINE = "Save the date — we're getting married"; function useContainerWidth() { const ref = React.useRef(null); const [w, setW] = React.useState(1280); React.useLayoutEffect(() => { if (!ref.current) return; // initial sync measurement so first paint uses real width, not the 1280 default setW(ref.current.getBoundingClientRect().width); const ro = new ResizeObserver(entries => { for (const e of entries) setW(e.contentRect.width); }); ro.observe(ref.current); return () => ro.disconnect(); }, []); return [ref, w]; } // scale a value range linearly between two container widths function scale(w, [minW, maxW], [minV, maxV]) { const t = Math.max(0, Math.min(1, (w - minW) / (maxW - minW))); return minV + (maxV - minV) * t; } function useIntro() { const [phase, setPhase] = React.useState(0); React.useEffect(() => { const ts = [ setTimeout(() => setPhase(1), 150), setTimeout(() => setPhase(2), 900), setTimeout(() => setPhase(3), 1700), setTimeout(() => setPhase(4), 2500), ]; return () => ts.forEach(clearTimeout); }, []); return phase; } // ============================================================ // VARIANT A: CINEMATIC FULL-BLEED // ============================================================ function CoverCinematic({ onEnter, embedded = false }) { const phase = useIntro(); const [ref, w] = useContainerWidth(); const narrow = w < 560; const nameSize = scale(w, [320, 1280], [54, 138]); const ampSize = scale(w, [320, 1280], [56, 130]); const taglineSize = scale(w, [320, 1280], [16, 24]); return (
{/* PHOTO */}
= 1 ? 'scale(1.0)' : 'scale(1.15)', transition:'transform 4s cubic-bezier(.2,.7,.2,1)', filter:'saturate(1.05) contrast(1.02)', }}/> {/* MARSALA VIGNETTE — heavier bottom scrim on narrow so names read clearly */}
{/* GOLD GRAIN PATTERN */}
{/* CORNER ORNAMENTS */} {['tl','tr','bl','br'].map((pos, i) => { const transforms = { tl:'rotate(0deg)', tr:'scaleX(-1)', bl:'scaleY(-1)', br:'scale(-1,-1)' }; const positions = { tl:{top: narrow?12:24, left: narrow?12:24}, tr:{top: narrow?12:24, right: narrow?12:24}, bl:{bottom: narrow?12:24, left: narrow?12:24}, br:{bottom: narrow?12:24, right: narrow?12:24}, }; const sz = narrow ? 56 : 84; return ( = 1 ? 1 : 0.6})`, opacity: phase >= 1 ? .7 : 0, transition: `opacity 1.2s ease ${0.2 + i*0.1}s, transform 1.2s ease ${0.2 + i*0.1}s`, filter:'drop-shadow(0 0 12px rgba(212,175,107,.4))', pointerEvents:'none', }}/> ); })} {/* CENTER CONTENT — pushed lower on narrow so names sit on the bottom curtain */}
{/* mandala glow — on narrow its CENTER aligns with "The Wedding" divider */} {(() => { const size = narrow ? Math.min(440, w * 0.98) : Math.min(680, w * 0.9); // "The Wedding" divider sits ~150px from the bottom on narrow // (padding-bottom 70 + date 13 + 16 gap + tagline 22 + 22 gap + divider center ≈ 150) return (
= 1 ? 0 : -25}deg)`, backgroundImage:'url(../../assets/ornaments/mandala.svg)', backgroundSize:'contain', backgroundRepeat:'no-repeat', backgroundPosition:'center', opacity: phase >= 1 ? .14 : 0, transition:'all 4s cubic-bezier(.2,.7,.2,1)', filter:'invert(1) sepia(1) saturate(2)', pointerEvents:'none', }}/> ); })()}

= 2 ? 1 : 0, transform: phase >= 2 ? 'translateX(0)' : 'translateX(-30px)', transition:'all 1.4s cubic-bezier(.2,.7,.2,1)', }}> Keerthi

= 3 ? 1 : 0, transform: phase >= 3 ? 'scale(1) rotate(0)' : 'scale(0.5) rotate(-8deg)', transition:'all 1.6s cubic-bezier(.2,.7,.2,1)', }}> &

= 2 ? 1 : 0, transform: phase >= 2 ? 'translateX(0)' : 'translateX(30px)', transition:'all 1.4s cubic-bezier(.2,.7,.2,1) .15s', }}> Gopichand

= 4 ? 1 : 0, transform: phase >= 4 ? 'scaleX(1)' : 'scaleX(.4)', transition:'all 1s cubic-bezier(.2,.7,.2,1)', }}>
The Wedding
= 4 ? 1 : 0, transition:'opacity 1.2s ease .2s', }}> we're getting married
= 4 ? 1 : 0, transition:'opacity 1.2s ease .35s', }}> {COVER_DATE}
{COVER_VENUE}
{onEnter && ( )} {/* Save the Date — transparent pill with double-rule gold border */}
); } // ============================================================ // VARIANT B: REGAL MANDALA ARCH // ============================================================ function CoverRegal({ onEnter, embedded = false }) { const phase = useIntro(); const [ref, w] = useContainerWidth(); const narrow = w < 560; const nameSize = scale(w, [320, 1280], [34, 76]); const ampSize = scale(w, [320, 1280], [34, 64]); const taglineSize = scale(w, [320, 1280], [15, 22]); const photoSize = narrow ? Math.min(130, w * 0.4) : 180; const archMaxW = Math.min(560, w - 48); return (
{[ { pos:{top: narrow?12:18, left: narrow?12:18}, t:'rotate(0deg)' }, { pos:{top: narrow?12:18, right: narrow?12:18}, t:'scaleX(-1)' }, { pos:{bottom: narrow?12:18, left: narrow?12:18}, t:'scaleY(-1)' }, { pos:{bottom: narrow?12:18, right: narrow?12:18}, t:'scale(-1,-1)' }, ].map((c,i) => ( = 1 ? .55 : 0, transition:`opacity 1.2s ease ${i*0.08}s`, }}/> ))}
{/* photo medallion */}
= 1 ? 1 : 0, transform: phase >= 1 ? 'scale(1)' : 'scale(.6)', transition:'all 1.2s cubic-bezier(.2,.7,.2,1)', }}/>
= 2 ? 1 : 0, transition:'opacity 1s ease .1s', }}> ✦   Save the Date   ✦
{/* THE ARCH */}
= 1 ? 0 : 2200} style={{ transition:'stroke-dashoffset 2.4s cubic-bezier(.4,.1,.2,1)' }} /> = 1 ? 0 : 2200} opacity=".6" style={{ transition:'stroke-dashoffset 2.4s cubic-bezier(.4,.1,.2,1) .15s' }} /> = 2 ? 1 : 0} style={{transition:'opacity .8s ease .8s'}}/> = 2 ? 1 : 0} style={{transition:'opacity .8s ease .8s'}}/> = 2 ? .7 : 0} style={{transition:'opacity 1s ease 1s'}}/> = 2 ? 1 : 0} style={{transition:'opacity 1s ease 1.1s'}}/> {/* Names overlaid inside arch */}
= 3 ? 1 : 0, transition:'opacity .8s ease', }}> The Marriage of

= 3 ? 1 : 0, transform: phase >= 3 ? 'translateY(0)' : 'translateY(8px)', transition:'all 1s cubic-bezier(.2,.7,.2,1)', }}> Keerthi

= 3 ? 1 : 0, transform: phase >= 3 ? 'rotate(0)' : 'rotate(-8deg)', transition:'all 1.2s cubic-bezier(.2,.7,.2,1) .1s', }}> &

= 3 ? 1 : 0, transform: phase >= 3 ? 'translateY(0)' : 'translateY(-8px)', transition:'all 1s cubic-bezier(.2,.7,.2,1) .2s', }}> Gopichand

= 4 ? .9 : 0, transition:'opacity 1s ease', }}> కీర్తి & గోపి
= 4 ? 1 : 0, transition:'opacity 1s ease .2s', textAlign:'center', padding:'0 12px', }}> {COVER_TAGLINE}
= 4 ? 1 : 0, transition:'opacity 1s ease .35s', }}> {COVER_DATE}
= 4 ? 1 : 0, transition:'opacity 1s ease .45s', }}> {COVER_VENUE}
{onEnter && ( )}
); } // ============================================================ // VARIANT C: EDITORIAL SPLIT // Wide: 2-col split (marsala names | photo). Narrow: stacked (photo on top, names below). // ============================================================ function CoverEditorial({ onEnter, embedded = false }) { const phase = useIntro(); const [ref, w] = useContainerWidth(); const narrow = w < 720; const nameSize = scale(w, [320, 1280], [40, 156]); const wedsSize = scale(w, [320, 1280], [32, 96]); const taglineSize = scale(w, [320, 1280], [15, 22]); return (
{/* PHOTO PANEL — first in narrow mode (top), second in wide (right) */}
= 1 ? 'scale(1)' : 'scale(1.15)', transition:'transform 4s cubic-bezier(.2,.7,.2,1)', }}/>
= 1 ? 1 : 0, transition:'opacity 1.4s ease .4s', pointerEvents:'none', }}/> {!narrow && [ { pos:{top:32, left:32}, t:'rotate(0deg)' }, { pos:{top:32, right:32}, t:'scaleX(-1)' }, { pos:{bottom:32, left:32}, t:'scaleY(-1)' }, { pos:{bottom:32, right:32}, t:'scale(-1,-1)' }, ].map((c,i) => ( = 2 ? .85 : 0, transition:`opacity 1s ease ${.5 + i*0.1}s`, filter:'drop-shadow(0 2px 8px rgba(0,0,0,.4))', }}/> ))} {/* monogram seal — only show on wide */} {!narrow && (
= 4 ? 1 : 0, transform: `translateX(-50%) scale(${phase >= 4 ? 1 : .4}) rotate(${phase >= 4 ? 0 : -180}deg)`, transition:'all 1.4s cubic-bezier(.2,.7,.2,1)', }}>
K&G
)}
{/* MARSALA NAME PANEL */}
= 1 ? .12 : 0, transform: `rotate(${phase >= 1 ? 0 : -45}deg)`, transition:'all 3s cubic-bezier(.2,.7,.2,1)', filter:'invert(1) sepia(1) saturate(2)', }}/> {/* TOP eyebrow */} {!narrow && (
= 2 ? 1 : 0, transform: phase >= 2 ? 'translateY(0)' : 'translateY(-8px)', transition:'all 1s ease', }}> ✦   Save the Date
= 2 ? .8 : 0, transition:'opacity 1s ease .1s', }}> Vol. I  ·  № 09.05.26
)} {/* CENTER stacked names */}
{narrow && (
= 2 ? 1 : 0, transition:'opacity 1s ease', }}> ✦   Save the Date   ✦
)}

= 2 ? 1 : 0, transform: phase >= 2 ? 'translateX(0)' : 'translateX(-30px)', transition:'all 1.4s cubic-bezier(.2,.7,.2,1)', }}> Keerthi

= 3 ? 1 : 0, transform: phase >= 3 ? 'scaleX(1)' : 'scaleX(.3)', transformOrigin: narrow ? 'center' : 'left', transition:'all 1.2s cubic-bezier(.2,.7,.2,1)', }}>
weds

= 2 ? 1 : 0, transform: phase >= 2 ? 'translateX(0)' : 'translateX(30px)', transition:'all 1.4s cubic-bezier(.2,.7,.2,1) .15s', }}> Gopichand

= 4 ? .85 : 0, transition:'opacity 1s ease', }}> కీర్తి & గోపి
{/* BOTTOM tagline + meta */}
= 4 ? 1 : 0, transform: phase >= 4 ? 'translateY(0)' : 'translateY(12px)', transition:'all 1s ease', }}>
{COVER_TAGLINE}
{COVER_DATE}
{COVER_VENUE}
{onEnter && ( )}
); } // ============================================================ // VARIANT D: RING CEREMONY (mandap photo, full-bleed) // ============================================================ function CoverMandap({ onEnter, embedded = false }) { const phase = useIntro(); const [ref, w] = useContainerWidth(); // Treat anything below 760 as "narrow" so portrait phones/tablets get the // stacked layout (photo on top, solid marsala panel for text below). const narrow = w < 760; const eyebrowSize = scale(w, [320, 1280], [10, 13]); const nameSize = scale(w, [320, 1280], [44, 112]); const ampSize = scale(w, [320, 1280], [40, 88]); const dateSize = scale(w, [320, 1280], [13, 18]); const venueSize = scale(w, [320, 1280], [10, 12]); const cornerSize = scale(w, [320, 1280], [44, 96]); const padX = scale(w, [320, 1280], [18, 64]); const padY = scale(w, [320, 1280], [22, 56]); // Photo crop. On narrow viewports the visible window is much taller than // the landscape photo's aspect, so we shift X past 50% to favour the right // side (bride) — both faces stay in view. On wide viewports center is fine. const photoPos = narrow ? '62% 38%' : '50% 42%'; // Tagline content const Eyebrow = (
✦   Save the date — we're getting married   ✦
); const Names = (
= 2 ? 1 : 0, transform: phase >= 2 ? 'translateY(0)' : 'translateY(12px)', transition:'opacity .9s ease-out, transform 1s ease-out', }}>
Keerthi
&
Gopichand
); const Meta = ( <>
= 3 ? 1 : 0, transition:'opacity .8s ease-out', }}/>
= 3 ? 1 : 0, transform: phase >= 3 ? 'translateY(0)' : 'translateY(6px)', transition:'all .8s ease-out', textShadow:'0 2px 10px rgba(0,0,0,.5)', }}> {COVER_DATE}
= 3 ? 1 : 0, transition:'opacity 1s ease-out', textShadow:'0 2px 10px rgba(0,0,0,.6)', }}> {COVER_VENUE}
{!embedded && (
= 4 ? 1 : 0, transform: phase >= 4 ? 'translateY(0)' : 'translateY(8px)', transition:'all .7s ease-out', }}>
)} ); // ───────── NARROW LAYOUT — photo on top, marsala panel below ───────── if (narrow) { return (
{/* Photo half */}
= 1 ? 'scale(1.04)' : 'scale(1.14)', transition: 'transform 4s cubic-bezier(.2,.8,.2,1), opacity 1.2s', opacity: phase >= 1 ? 1 : 0, }}/> {/* feather into the marsala panel below */}
{/* eyebrow on top */}
= 2 ? 1 : 0, transform: phase >= 2 ? 'translateY(0)' : 'translateY(-8px)', transition:'opacity .9s ease-out, transform .9s ease-out', }}> {Eyebrow}
{/* Marsala name panel */}
{/* Subtle kolam texture */}
{/* Gold corners on the panel */} {[ { top: 10, left: 10, transform: 'none' }, { top: 10, right: 10, transform: 'scaleX(-1)' }, { bottom: 10, left: 10, transform: 'scaleY(-1)' }, { bottom: 10, right: 10, transform: 'scale(-1,-1)' }, ].map((pos, i) => ( = 2 ? .55 : 0, transition:'opacity 1.1s ease-out', pointerEvents:'none', ...pos, }}/> ))}
{Names} {Meta}
); } // ───────── WIDE LAYOUT — full-bleed cinematic ───────── return (
{/* Hero photo */}
= 1 ? 'scale(1.04)' : 'scale(1.14)', transition: 'transform 4s cubic-bezier(.2,.8,.2,1), opacity 1.2s', opacity: phase >= 1 ? 1 : 0, }}/> {/* Top gradient */}
{/* Bottom marsala curtain */}
{/* Soft kolam pattern */}
{/* Gold corner ornaments */} {[ { top: padY, left: padX, transform: 'none' }, { top: padY, right: padX, transform: 'scaleX(-1)' }, { bottom: padY, left: padX, transform: 'scaleY(-1)' }, { bottom: padY, right: padX, transform: 'scale(-1,-1)' }, ].map((pos, i) => ( = 2 ? .82 : 0, transition:'opacity 1.1s ease-out', filter:'drop-shadow(0 2px 6px rgba(0,0,0,.45))', pointerEvents:'none', ...pos, }}/> ))} {/* Top eyebrow */}
= 2 ? 1 : 0, transform: phase >= 2 ? 'translateY(0)' : 'translateY(-8px)', transition:'opacity .9s ease-out, transform .9s ease-out', }}> {Eyebrow}
{/* Bottom name block */}
{Names} {Meta}
); } window.CoverCinematic = CoverCinematic; window.CoverRegal = CoverRegal; window.CoverEditorial = CoverEditorial; window.CoverMandap = CoverMandap;