// ============================================================ // HERO VARIANT 5 — "Scroll" — pinned scroll-cinema (4 acts) // Acts: intro → product lines → building → CTA // No React state for animation — zero React re-renders per frame. // ============================================================ function HeroScroll({ setRoute }) { const wrapRef = React.useRef(null); const [now, setNow] = React.useState(""); const revRef = React.useRef(null); const scrollPctRef = React.useRef(null); const progressDotRef = React.useRef(null); const act5Ref = React.useRef(null); const lineCardRefs = React.useRef([]); const windowRectsRef = React.useRef([]); React.useEffect(() => { const fmt = () => { const d = new Date(); const pad = n => String(n).padStart(2, "0"); setNow(`${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())} IST`); }; fmt(); const id = setInterval(fmt, 1000); return () => clearInterval(id); }, []); React.useEffect(() => { let raf = 0; const clamp = (v, lo = 0, hi = 1) => Math.max(lo, Math.min(hi, v)); const seg = (s, e, p) => clamp((p - s) / (e - s)); const update = () => { raf = 0; const el = wrapRef.current; if (!el) return; const rect = el.getBoundingClientRect(); const total = el.offsetHeight - window.innerHeight; const p = total > 0 ? clamp(-rect.top / total) : 0; // Timings — building gets full dwell before CTA const a1 = seg(0.00, 0.18, p); // title in const a2 = seg(0.15, 0.40, p); // product lines fly const a3 = seg(0.36, 0.60, p); // building rises const aWin = seg(0.42, 0.68, p); // windows light (trails building) const a5 = seg(0.72, 0.92, p); // CTA — leaves building fully visible 0.60–0.72 // CSS custom properties el.style.setProperty("--p", p.toFixed(4)); el.style.setProperty("--a1", a1.toFixed(4)); el.style.setProperty("--a2", a2.toFixed(4)); el.style.setProperty("--a3", a3.toFixed(4)); el.style.setProperty("--a5", a5.toFixed(4)); el.style.setProperty("--sub-op", clamp(clamp((a1-0.85)/0.15) * clamp(1-a2*1.6)).toFixed(4)); el.style.setProperty("--hint-op", clamp(clamp((a1-0.9)/0.1) * clamp(1-a2*2)).toFixed(4)); el.style.setProperty("--title-op", clamp(1-a5*0.4).toFixed(4)); el.style.setProperty("--act3-op", clamp(a3*1.2-a5).toFixed(4)); el.style.setProperty("--lines-op", clamp(a2*1.2).toFixed(4)); el.style.setProperty("--act5-stop",`${(100 - 70*a5).toFixed(1)}%`); // Text / pointer-events DOM updates if (revRef.current) revRef.current.textContent = `REV ${(27+Math.floor(p*9)).toString().padStart(2,"0")}`; if (scrollPctRef.current) scrollPctRef.current.textContent = `● SCROLL · ${Math.round(p*100)}%`; if (progressDotRef.current) progressDotRef.current.style.top = `${p*100}%`; if (act5Ref.current) act5Ref.current.style.pointerEvents = a5 > 0.4 ? "auto" : "none"; // Per-card transforms lineCardRefs.current.forEach((card, i) => { if (!card) return; const local = clamp((a2 - i*0.05) / 0.6); card.style.transform = `translateX(${((i%2===0?-600:600)*(1-local)).toFixed(1)}px) translateY(${(-160*a3).toFixed(1)}px)`; card.style.opacity = (clamp(local) * Math.max(0, 1-a3*1.5)).toFixed(3); }); // SVG window fills const W = windowRectsRef.current; const towers = [ { s:0, n:52, t:aWin*52 }, { s:52, n:48, t:aWin*48 }, { s:100, n:50, t:aWin*50 }, { s:150, n:34, t:aWin*34 }, { s:184, n:36, t:aWin*36 }, ]; towers.forEach(({ s, n, t }) => { for (let j = 0; j < n; j++) { const r = W[s+j]; if (r) r.setAttribute("fill", j < t ? "var(--accent)" : "var(--bg)"); } }); }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); }; update(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); const lines = [ { code:"CND", label:"Conduit Pipes", c:"var(--accent)" }, { code:"WRC", label:"Wires & Cables", c:"var(--ink)" }, { code:"SWS", label:"Switchgear", c:"var(--ink)" }, { code:"MCB", label:"MCB & RCCB", c:"var(--accent)" }, { code:"CBL", label:"Cable Trays", c:"var(--ink)" }, { code:"ENC", label:"Earthing Solution", c:"var(--ink)" }, { code:"ACC", label:"Accessories", c:"var(--ink)" }, { code:"LTG", label:"Lighting", c:"var(--accent)" }, ]; const regWin = React.useCallback((el, i) => { if (el) windowRectsRef.current[i] = el; }, []); return (
{/* Grid */}
{/* Header */}
DOC · PRS-HERO-04 REV 27 SHEET 01 / 04 ● SCROLL · 0% {now}
{/* Footer */}
↓ KEEP SCROLLING PRISM SALES CORPORATION · AHMEDABAD · EST. 2020 A1 · N.T.S
{/* Progress rail — hidden on mobile */}
{[0.18, 0.40, 0.60, 0.72].map((m,i) => (
))}
{/* ACT 1 — Title */}
◉ AUTHENTIC
STOCK · 2020
AHMEDABAD · OGNAJ · SINCE 2020

{["P","R","I","S","M"].map((ch,i) => ( {ch} ))}

SALES CORPORATION EST. 2020
↓ SCROLL TO INSPECT
{/* ACT 2 — Product line ribbons */}
{lines.map((ln,i) => (
{ lineCardRefs.current[i] = el; }} style={{ border:"1.5px solid var(--ink)", background:"var(--surface,var(--bg))", padding:"16px 18px", position:"relative", opacity:0, willChange:"transform,opacity", transform: i%2===0 ? "translateX(-600px)" : "translateX(600px)", }}>
LINE — {String(i+1).padStart(2,"0")}
{ln.label}
))}
{/* ACT 3 — Building */}
GROUND ↘ 0.00 m {/* Tower 1 — 52 windows */} {Array.from({length:13}).map((_,r) => Array.from({length:4}).map((_,c) => ( regWin(el,r*4+c)} x={188+c*20} y={188+r*18} width="12" height="10" fill="var(--bg)"/> )))} {/* Tower 2 — 48 windows */} {Array.from({length:16}).map((_,r) => Array.from({length:3}).map((_,c) => ( regWin(el,52+r*3+c)} x={300+c*22} y={128+r*19} width="14" height="11" fill="var(--bg)"/> )))} {/* Tower 3 — 50 windows */} {Array.from({length:10}).map((_,r) => Array.from({length:5}).map((_,c) => ( regWin(el,100+r*5+c)} x={398+c*22} y={248+r*18} width="14" height="10" fill="var(--bg)"/> )))} {/* Tower 4 — 34 windows */} {Array.from({length:17}).map((_,r) => Array.from({length:2}).map((_,c) => ( regWin(el,150+r*2+c)} x={540+c*22} y={108+r*19} width="14" height="11" fill="var(--bg)"/> )))} {/* Tower 5 — 36 windows */} {Array.from({length:12}).map((_,r) => Array.from({length:3}).map((_,c) => ( regWin(el,184+r*3+c)} x={618+c*20} y={208+r*18} width="12" height="10" fill="var(--bg)"/> )))} {[420,425,430].map((y,i) => ( ))}
{/* ACT 4 (was 5) — CTA */}
◉ READY WHEN YOU ARE

Send us
your BOQ.
Quote by sundown.

↓ CONTINUE FOR FULL DATASHEET
); } window.HeroScroll = HeroScroll;