/* Parallax hero — illustrations recreated from the reference card. All SVGs are original line-art compositions in cream + gold on deep crimson. */ const { useState: pUseState, useEffect: pUseEffect, useRef: pUseRef, useCallback: pUseCallback } = React; const C_CREAM = "#f3e2c4"; const C_CREAM_2 = "#fbf3e1"; const C_GOLD = "#c9a961"; const C_GOLD_2 = "#e8c97a"; const C_REDDOT = "#a02323"; /* ============================================================ HANGING BEADS (top-left) Diamond lattice of pearl-strings + small floral clusters, with three long tassels of beads hanging down. ============================================================ */ function HangingBeads({ width = 460, height = 460 }) { const cols = 8, rows = 7; const cellW = width / cols; const cellH = 56; const dots = []; for (let r = 0; r <= rows; r++) { for (let c = 0; c <= cols; c++) { const x = c * cellW; const y = r * cellH; dots.push({ x, y, r }); } } // floral clusters on alternating intersections const flowers = []; for (let r = 0; r <= rows; r++) { for (let c = 0; c <= cols; c++) { if ((r + c) % 2 === 0 && r < rows && c < cols) { flowers.push({ x: c * cellW + cellW / 2, y: r * cellH + cellH / 2 }); } } } // tassels at the bottom of the lattice const tassels = [ { x: cellW * 1.5, drop: 180 }, { x: cellW * 3.5, drop: 230 }, { x: cellW * 5.5, drop: 160 }, ]; return ( ); } /* ============================================================ GANESH SWIRL (top center) Stylised Om / Ganesh trunk inside a red circle. ============================================================ */ function GaneshSwirl({ size = 180 }) { return ( ); } /* ============================================================ LEAF BRANCH (top right) — branch with teardrop leaves on a red sun. ============================================================ */ function LeafBranch({ size = 260 }) { return ( ); } /* ============================================================ PALACE SILHOUETTE (bottom left) Mughal palace / ghat line art with domes, columns, reflection. ============================================================ */ function PalaceLineArt({ width = 520, height = 320 }) { return ( ); } /* ============================================================ FLOATING DIYA (oil lamp) — cream line art with gold flame ============================================================ */ function LineDiya({ size = 56, lit = true }) { return ( ); } /* ============================================================ LOTUS BOUQUET (bottom right) — open lotus + buds + pads ============================================================ */ function LotusBouquet({ size = 360 }) { return ( ); } /* ============================================================ BOTTOM FRIEZE — decorative border band, central lotus icon. ============================================================ */ function BottomFrieze({ width = 1200 }) { return ( ); } /* ============================================================ FLYING BIRDS — tiny V strokes scattered. ============================================================ */ function BirdSwarm({ count = 6, area = { w: 200, h: 80 } }) { const birds = Array.from({ length: count }).map((_, i) => ({ x: (i / count) * area.w + Math.random() * 20, y: Math.random() * area.h, s: 0.8 + Math.random() * 0.6, })); return ( ); } /* ============================================================ PARALLAX HERO ============================================================ */ function ParallaxHero({ groomName, brideName, dateDisplay, location }) { const stageRef = pUseRef(null); const [scrollY, setScrollY] = pUseState(0); const [tilt, setTilt] = pUseState({ x: 0, y: 0 }); const [sparkles, setSparkles] = pUseState([]); const [tappedKey, setTappedKey] = pUseState(null); // scroll-driven parallax pUseEffect(() => { let raf = 0; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { if (!stageRef.current) return; const r = stageRef.current.getBoundingClientRect(); const seen = Math.max(0, Math.min(1, -r.top / Math.max(1, r.height))); setScrollY(seen); }); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); }; }, []); // mouse 3D tilt + touch + gyroscope pUseEffect(() => { const el = stageRef.current; if (!el) return; const onMove = (e) => { const r = el.getBoundingClientRect(); const t = e.touches ? e.touches[0] : e; const dx = (t.clientX - r.left - r.width / 2) / r.width; const dy = (t.clientY - r.top - r.height / 2) / r.height; setTilt({ x: dx, y: dy }); }; const onOrient = (e) => { if (e.gamma == null) return; setTilt({ x: Math.max(-0.5, Math.min(0.5, e.gamma / 60)), y: Math.max(-0.5, Math.min(0.5, e.beta / 90)) }); }; el.addEventListener("mousemove", onMove); el.addEventListener("touchmove", onMove, { passive: true }); window.addEventListener("deviceorientation", onOrient); return () => { el.removeEventListener("mousemove", onMove); el.removeEventListener("touchmove", onMove); window.removeEventListener("deviceorientation", onOrient); }; }, []); // sparkle on tap of any illustration const sparkleAt = pUseCallback((clientX, clientY, key) => { if (!stageRef.current) return; const r = stageRef.current.getBoundingClientRect(); const x = clientX - r.left, y = clientY - r.top; const id = Math.random(); const newOnes = Array.from({ length: 9 }).map((_, i) => { const a = (i / 9) * Math.PI * 2 + Math.random() * 0.6; return { id: id + i, x, y, dx: Math.cos(a) * (40 + Math.random() * 60), dy: Math.sin(a) * (40 + Math.random() * 60), rot: Math.random() * 360, size: 4 + Math.random() * 6, kind: i % 3, }; }); setSparkles((s) => [...s, ...newOnes]); setTappedKey(key); setTimeout(() => setTappedKey(null), 600); setTimeout(() => setSparkles((s) => s.filter((p) => !newOnes.find((n) => n.id === p.id))), 1500); }, []); const onElemTap = (e, key) => { e.stopPropagation(); const t = e.touches ? e.touches[0] : (e.changedTouches ? e.changedTouches[0] : e); sparkleAt(t.clientX, t.clientY, key); }; // background taps do nothing — only direct illustration taps sparkle // helper for layer transform combining scroll + tilt const layerStyle = (depth, opts = {}) => { // depth: 0 = closest, 1 = farthest. Higher depth -> slower scroll move, larger background offset const scrollAmt = (1 - depth) * 280 * scrollY; // foreground moves more const farAmt = depth * 80 * scrollY; // background moves slightly opposite/down const tx = tilt.x * (1 - depth) * 28; const ty = tilt.y * (1 - depth) * 18; const rZ = tilt.x * (1 - depth) * 2; return { transform: `translate3d(${(opts.tx || 0) + tx}px, ${(opts.ty || 0) + farAmt - scrollAmt}px, 0) rotate(${rZ}deg) scale(${1 - depth * 0.04})`, willChange: "transform", ...(opts.style || {}), }; }; return (

{/* texture overlay */}

{/* === FAR BACK LAYER === */}

{/* === BACK: PALACE === */}

onElemTap(e, "palace")} onTouchEnd={(e) => onElemTap(e, "palace")} role="button" tabIndex={0} aria-label="Palace illustration" >

{/* === MID: LEAF BRANCH + SUN (top-right) === */}

onElemTap(e, "branch")} onTouchEnd={(e) => onElemTap(e, "branch")} role="button" tabIndex={0} aria-label="Leaf branch with rising sun" >

{/* === MID-FRONT: GANESH SWIRL === */}

onElemTap(e, "ganesh")} onTouchEnd={(e) => onElemTap(e, "ganesh")} role="button" tabIndex={0} aria-label="Ganesh blessing" >

{/* === FRONT: LOTUS BOUQUET === */}

onElemTap(e, "lotus")} onTouchEnd={(e) => onElemTap(e, "lotus")} role="button" tabIndex={0} aria-label="Lotus pond" >

{/* === FRONT: DIYAS row === */}

{[0, 1, 2, 3, 4].map((i) => ( ))}

{/* === COPY === */}

Save the Date

{groomName} & {brideName}

{dateDisplay}

{location}

Open the Story Where

{/* === BOTTOM FRIEZE === */}

{/* sparkles */} {sparkles.map((s) => ( ))}

); } Object.assign(window, { HangingBeads, GaneshSwirl, LeafBranch, PalaceLineArt, LineDiya, LotusBouquet, BottomFrieze, BirdSwarm, ParallaxHero, });