/* REVOLUTION TIMELINE - "מי שלא מצטרף ל-AI יישאר מאחורה" Scroll-driven video from frames_v3/ with bottom-anchored timeline (2020→2027), 5 phase statements with distinct entry animations, and a climax CTA. Visually distinct from Hero (floating cards) and LoopSequence (HUD activation). */ function RevolutionTimeline() { const sectionRef = React.useRef(null); const canvasRef = React.useRef(null); const framesRef = React.useRef([]); const [framesReady, setFramesReady] = React.useState(false); const [loadPct, setLoadPct] = React.useState(0); const progress = useSectionProgress(sectionRef); const progressRef = React.useRef(0); React.useEffect(() => { progressRef.current = progress; }, [progress]); const isMobile = useIsMobile(); const isMobileInitial = React.useRef(isMobile); // ── Frame loader (same pattern as LoopSequence, points to frames_v3/) ─ React.useEffect(() => { let cancelled = false; const TOTAL_AVAILABLE = 301; const STEP = isMobileInitial.current ? 6 : 3; const MAX_W = isMobileInitial.current ? 600 : 960; const folder = isMobileInitial.current ? 'frames_v3_mobile' : 'frames_v3'; const indices = []; for (let i = 1; i <= TOTAL_AVAILABLE; i += STEP) indices.push(i); (async () => { const frames = new Array(indices.length); let loaded = 0; const loadOne = (n, idx) => new Promise((resolve) => { const img = new Image(); img.decoding = 'async'; img.onload = () => { const scale = Math.min(1, MAX_W / img.naturalWidth); const W = Math.round(img.naturalWidth * scale); const H = Math.round(img.naturalHeight * scale); const c = document.createElement('canvas'); c.width = W; c.height = H; c.getContext('2d').drawImage(img, 0, 0, W, H); frames[idx] = c; loaded++; if (!cancelled) setLoadPct(loaded / indices.length); resolve(); }; img.onerror = () => { loaded++; if (!cancelled) setLoadPct(loaded / indices.length); resolve(); }; img.src = `${folder}/frame_${String(n).padStart(4, '0')}.jpg`; }); const CONC = 8; let cur = 0; const workers = Array.from({ length: CONC }, async () => { while (cur < indices.length && !cancelled) { const i = cur++; await loadOne(indices[i], i); } }); await Promise.all(workers); framesRef.current = frames.filter(Boolean); if (!cancelled) setFramesReady(true); })(); return () => { cancelled = true; }; }, []); // ── Smoothed paint loop ──────────────────────────────────────────── const smoothedRef = React.useRef(0); React.useEffect(() => { if (!framesReady) return; const cv = canvasRef.current; if (!cv) return; const ctx = cv.getContext('2d'); let raf = 0; let lastIdx = -1; const resize = () => { const dpr = Math.min(window.devicePixelRatio || 1, 2); cv.width = Math.round(window.innerWidth * dpr); cv.height = Math.round(window.innerHeight * dpr); cv.style.width = window.innerWidth + 'px'; cv.style.height = window.innerHeight + 'px'; lastIdx = -1; }; const paint = () => { const total = framesRef.current.length; if (!total) return; const target = progressRef.current; const diff = target - smoothedRef.current; smoothedRef.current = Math.abs(diff) < 0.0002 ? target : smoothedRef.current + diff * 0.16; const p = smoothedRef.current; const idx = clamp(Math.round(p * (total - 1)), 0, total - 1); if (idx !== lastIdx) { const cw = cv.width, ch = cv.height; const fr = framesRef.current[idx]; if (!fr) return; const scale = Math.max(cw / fr.width, ch / fr.height); const dw = fr.width * scale, dh = fr.height * scale; const dx = (cw - dw) / 2, dy = (ch - dh) / 2; ctx.globalCompositeOperation = 'copy'; ctx.drawImage(fr, dx, dy, dw, dh); ctx.globalCompositeOperation = 'source-over'; lastIdx = idx; } }; const tick = () => { paint(); raf = requestAnimationFrame(tick); }; resize(); window.addEventListener('resize', resize); raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, [framesReady]); // ── Phase windows + visibility ───────────────────────────────────── const W = { s2020: { in0: 0.08, in1: 0.13, out0: 0.22, out1: 0.26 }, s2023: { in0: 0.26, in1: 0.31, out0: 0.40, out1: 0.44 }, s2025: { in0: 0.44, in1: 0.49, out0: 0.58, out1: 0.62 }, s2026: { in0: 0.62, in1: 0.69, out0: 0.78, out1: 0.82 }, s2027: { in0: 0.82, in1: 0.89, out0: 1.10, out1: 1.20 }, }; const vis = (w) => Math.min(smoothstep(w.in0, w.in1, progress), 1 - smoothstep(w.out0, w.out1, progress)); const v2020 = vis(W.s2020); const v2023 = vis(W.s2023); const v2025 = vis(W.s2025); const v2026 = vis(W.s2026); const v2027 = vis(W.s2027); const climaxP = smoothstep(0.86, 0.96, progress); const bootP = smoothstep(0.00, 0.06, progress); let phaseIdx = 0; if (progress >= 0.08) phaseIdx = 1; if (progress >= 0.26) phaseIdx = 2; if (progress >= 0.44) phaseIdx = 3; if (progress >= 0.62) phaseIdx = 4; if (progress >= 0.82) phaseIdx = 5; return (
{/* VIDEO */} {/* LOADER */} {!framesReady && (
טוען קו זמן
{Math.round(loadPct*100)}%
)} {/* CINEMATIC LETTERBOX - different from Hero (warm spotlight) and LoopSequence (tunnel sides) */}
{/* AMBIENT SPARKS - slow drift on right edge */} {/* INTRO KICKER */}
▸ קו הזמן · 2020–2027
{/* PHASE COUNTER */}
STAGE · {String(Math.max(phaseIdx, 1)).padStart(2,'0')} / 05
{/* STATEMENTS */} {/* CLIMAX CTA */} {/* BOTTOM TIMELINE */}
); } /* ───────────────────────────────────────────────────────────────────── SUBCOMPONENTS ───────────────────────────────────────────────────────────────────── */ function Sparks() { const isMobile = useIsMobile(); const count = isMobile ? 4 : 7; const sparks = React.useMemo(() => Array.from({ length: count }, () => ({ left: 65 + Math.random() * 32, delay: Math.random() * 10, duration: 9 + Math.random() * 6, size: 2 + Math.random() * 2.5, })), [count]); return (
{sparks.map((s, i) => ( ))}
); } /* Common centered stage for the upper area, leaving the bottom for timeline */ function StageWrap({ visible, children, top }) { return (
{children}
); } function TypewriterStatement({ visible, progress, W, text }) { if (visible <= 0.01) return null; const typeP = smoothstep(W.in0, W.in1, progress); const shown = Math.floor(typeP * text.length); const visibleText = text.slice(0, shown); const isTyping = typeP > 0 && typeP < 1; return (
{visibleText} {isTyping && ( )}
); } function SlideStatement({ visible, text }) { if (visible <= 0.01) return null; return (
{text}
 ); } function DropStatement({ visible, text }) { if (visible <= 0.01) return null; return (
{text}
); } function GlitchHaloStatement({ visible, text }) { if (visible <= 0.01) return null; return (
{/* Soft persistent halo */}
{text}
); } function StampImpactStatement({ visible, text }) { if (visible <= 0.01) return null; return (
{text}
); } function ClimaxCTA({ climaxP }) { const isMobile = useIsMobile(); if (climaxP <= 0.01) return null; const arcW = isMobile ? 260 : 340; const arcH = isMobile ? 72 : 96; return (
0.5 ? 'auto' : 'none', zIndex:8, padding:'0 16px', opacity: climaxP, transform: `scale(${lerp(0.78, 1, climaxP)})`, transition:'transform 280ms cubic-bezier(0.34,1.56,0.64,1)', }}>
{'> WINDOW.CLOSING'}
{/* Orbiting arc */}
{/* Pulsing halo */}
); } function Timeline({ progress, phaseIdx, bootP, climaxP }) { const isMobile = useIsMobile(); const years = [ { year: 2020, pos: 4 }, { year: 2023, pos: 28 }, { year: 2025, pos: 52 }, { year: 2026, pos: 76 }, { year: 2027, pos: 96 }, ]; const markerPos = lerp(4, 96, clamp(progress, 0, 1)); return (
{/* line wrapper */}
{/* full unfilled track */}
{/* filled portion behind marker */}
{/* year ticks */} {years.map((y, i) => { const passed = i < phaseIdx; const active = i === phaseIdx - 1; return (
); })} {/* marker - diamond + downward triangle */}
{/* NOW badge under marker */}
NOW
{/* year labels */}
{years.map((y, i) => { const active = i === phaseIdx - 1; const passed = i < phaseIdx - 1; return (
{y.year}
); })}
{/* climax ticker - replaces no other UI; appears at bottom of timeline area */}
0.3 ? 'rt-ticker-pulse 1.8s ease-in-out infinite' : 'none', transition:'opacity 280ms', }}> המהפכה כבר התחילה ▸ עכשיו · עכשיו · עכשיו
); } window.RevolutionTimeline = RevolutionTimeline;