/* ============ HERO — Illustrated Forest Scene (Cozy Hollow style) ============ */ /* LCG for deterministic tree placement */ function lcg(seed) { let s = seed >>> 0; return () => { s = (Math.imul(s, 1664525) + 1013904223) >>> 0; return s / 4294967296; }; } /* PROPER multi-tier pine tree silhouette — trunk + 3 stacked triangular tiers */ function pineTree(cx, base, h, hw) { const tw = Math.max(3, hw * 0.1); const th = base - h * 0.15; // where trunk meets lowest tier const r = (x, y) => `${Math.round(x)},${Math.round(y)}`; // left side going up, right side mirrored going down return [ `M${r(cx - tw, base)}`, `L${r(cx - tw, th)}`, // trunk top-left `L${r(cx - hw, th)}`, // tier 3 base-left (widest) `L${r(cx - hw * 0.40, base - h * 0.47)}`, // tier 3 peak → notch in `L${r(cx - hw * 0.66, base - h * 0.41)}`, // tier 2 base-left (step out = overlap) `L${r(cx - hw * 0.27, base - h * 0.69)}`, // tier 2 peak → notch in `L${r(cx - hw * 0.45, base - h * 0.64)}`, // tier 1 base-left (step out) `L${r(cx, base - h)}`, // apex `L${r(cx + hw * 0.45, base - h * 0.64)}`, `L${r(cx + hw * 0.27, base - h * 0.69)}`, `L${r(cx + hw * 0.66, base - h * 0.41)}`, `L${r(cx + hw * 0.40, base - h * 0.47)}`, `L${r(cx + hw, th)}`, `L${r(cx + tw, th)}`, `L${r(cx + tw, base)} Z`, ].join(' '); } /* Simple triangle rows for distant/mid background trees */ function genTrees(seed, baseY, count, minH, maxH, hw) { const rand = lcg(seed); const step = (1440 + 160) / count; let d = `M-80,${baseY + 80}`; for (let i = 0; i < count; i++) { const cx = -40 + i * step + (rand() - 0.5) * step * 0.4; const h = minH + rand() * (maxH - minH); const w = hw * (0.55 + rand() * 0.9); d += ` L${Math.round(cx - w)},${baseY} L${Math.round(cx)},${Math.round(baseY - h)} L${Math.round(cx + w)},${baseY}`; } return d + ` L1520,${baseY + 80} L1520,700 L-80,700 Z`; } /* Left and right curtain trees — LARGE, viewBox 460×780 */ const LEFT_TREES = [ pineTree(260, 780, 700, 155), // tallest: wide trunk, deep tiers pineTree( 60, 780, 540, 118), // secondary, half off-screen left pineTree(390, 780, 360, 82), // inward accent ]; const RIGHT_TREES = [ // mirrored layout pineTree(200, 780, 700, 155), pineTree(400, 780, 540, 118), pineTree( 70, 780, 360, 82), ]; function Hero() { const S = window.SITE; const contentRef = useRef(null); const bgRef = useRef(null); const fgLRef = useRef(null); const fgRRef = useRef(null); useEffect(() => { let raf; const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(() => { const y = window.scrollY; if (contentRef.current) { contentRef.current.style.transform = `translateY(${y * 0.18}px)`; contentRef.current.style.opacity = Math.max(0, 1 - y / 560).toString(); } if (bgRef.current) bgRef.current.style.transform = `translateY(${y * 0.10}px)`; // Left trees slide OUT to the left + fade const slideX = y * 0.55; const treeOp = Math.max(0, 1 - y / 340).toFixed(3); if (fgLRef.current) { fgLRef.current.style.transform = `translateX(-${slideX}px) translateY(${y * 0.12}px)`; fgLRef.current.style.opacity = treeOp; } // Right trees slide OUT to the right + fade if (fgRRef.current) { fgRRef.current.style.transform = `translateX(${slideX}px) translateY(${y * 0.12}px)`; fgRRef.current.style.opacity = treeOp; } }); }; window.addEventListener("scroll", onScroll, { passive: true }); return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); }; }, []); const waLink = `https://wa.me/${S.contact.whatsapp}?text=${encodeURIComponent("Hi! I'd love to know about availability at The Last Stop Backpackers Hostel.")}`; const scrollTo = (id) => (e) => { e.preventDefault(); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 76, behavior: "smooth" }); }; /* Distant/mid background tree rows */ const t1 = genTrees(7, 335, 34, 22, 58, 15); const t2 = genTrees(17, 362, 26, 40, 92, 25); const t3 = genTrees(31, 386, 20, 64, 138, 37); /* Clouds — 4 layers, different sizes and speeds */ const clouds = [ { w: 140, top: "48%", delay: "0s", dur: "64s" }, { w: 110, top: "54%", delay: "-26s", dur: "80s" }, { w: 170, top: "44%", delay: "-46s", dur: "98s" }, { w: 120, top: "58%", delay: "-16s", dur: "72s" }, ]; return (
{/* ── Sky ── */}
{/* ── Stars (dark) ── */}
{Array.from({ length: 80 }).map((_, i) => ( ))}
{/* ── Aurora (dark) ── */}
{/* ── Sun / Moon ── */}
{/* ── Full illustrated clouds (overflow visible = no clipping) ── */} {clouds.map((c, i) => { const H = Math.round(c.w * 0.58); return (
); })} {/* ── Birds (light) ── */} {[{l:"12%",t:"24%"},{l:"23%",t:"18%"},{l:"38%",t:"27%"},{l:"56%",t:"20%"},{l:"71%",t:"14%"}].map((b, i) => ( ))} {/* ── Background forest: mountains + distant/mid rows ── */} {/* ── Left forest curtain — large multi-tier pine trees ── */} {/* ── Right forest curtain — mirrored ── */} {/* ── Fireflies (dark) ── */}
{Array.from({ length: 18 }).map((_, i) => ( ))}
{/* ── Content ── */}
{S.location} The Last Stop
before your next adventure. Stay. Explore. Connect. Immerse in Auroville’s spiritual energy, rooftop café evenings, and a community of seekers, nomads and adventurers. Book Now Explore Rooms WhatsApp Us
scroll
); } Object.assign(window, { Hero });