/* HERO - frame-perfect scroll video using pre-extracted JPG frames. Loads frames/ezgif-frame-XXX.jpg, downscales into an offscreen canvas, then paints on scroll. No mp4 decode, no browser seeking jitter. */ function Hero() { 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 isMobile = useIsMobile(); // Capture isMobile once for loader (don't re-decode if user resizes mid-scroll) const isMobileInitial = React.useRef(isMobile); // If we're rendered inside the SiteShowcase iframe, skip frame loading entirely. const inIframe = typeof window !== 'undefined' && window !== window.top; React.useEffect(() => { if (inIframe) { // Mark frames ready without loading anything so the loader overlay disappears. setFramesReady(true); return; } let cancelled = false; const TOTAL_AVAILABLE = 301; const STEP = isMobileInitial.current ? 6 : 2; const MAX_W = isMobileInitial.current ? 600 : 960; const folder = isMobileInitial.current ? 'frames_v1_mobile' : 'frames_v1'; 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 = (i, 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(i).padStart(4, '0')}.jpg`; }); const CONCURRENCY = 8; let cursor = 0; const workers = Array.from({ length: CONCURRENCY }, async () => { while (cursor < indices.length && !cancelled) { const idx = cursor++; await loadOne(indices[idx], idx); } }); await Promise.all(workers); framesRef.current = frames.filter(Boolean); if (!cancelled) setFramesReady(true); })(); return () => { cancelled = true; }; }, []); const progressRef = React.useRef(0); React.useEffect(() => { progressRef.current = progress; }, [progress]); 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; // force redraw after resize }; const paint = () => { const total = framesRef.current.length; if (!total) return; // Critically-damped easing toward target progress: smooths wheel/trackpad jitter const target = progressRef.current; const diff = target - smoothedRef.current; // snap on tiny diffs to avoid endless micro-animation 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) { // still update transform/filter below, but skip redrawing same frame } else { const cw = cv.width, ch = cv.height; const fr = framesRef.current[idx]; if (!fr) return; const fw = fr.width, fh = fr.height; const scale = Math.max(cw / fw, ch / fh); const dw = fw * scale, dh = fh * scale; const dx = (cw - dw) / 2, dy = (ch - dh) / 2; // 'copy' fully replaces the destination - no ghosting from prior frames ctx.globalCompositeOperation = 'copy'; ctx.drawImage(fr, dx, dy, dw, dh); ctx.globalCompositeOperation = 'source-over'; lastIdx = idx; } // Drive canvas transform/filter directly from smoothed p (bypasses React render/CSS transition fight) const sc = lerp(1.05, 1.0, clamp(p * 3, 0, 1)); cv.style.transform = `scale(${sc})`; cv.style.filter = `saturate(${lerp(1.05, 1.15, p)}) contrast(1.06)`; }; const tick = () => { paint(); raf = requestAnimationFrame(tick); }; resize(); window.addEventListener('resize', resize); raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, [framesReady]); const titleOpacity = clamp(1 - progress * 4.5, 0, 1); const titleY = -progress * 180; const titleScale = lerp(1, 1.08, clamp(progress * 3, 0, 1)); const kickerOpacity = clamp(1 - (progress - 0.92) * 12, 0, 1); const ctaShow = smoothstep(0.92, 0.99, progress); const ctaY = lerp(40, 0, ctaShow); const cards = [ { tag: 'TXT01', t: 'לא צריך לדעת לתכנת.', s: 'אתה מתאר מה אתה רוצה - קלוד בונה את הכל.' }, { tag: 'TXT02', t: '17 פרקים. 94 שיעורים.', s: 'מהיסודות ועד מערכת מלאה שעולה לאוויר.' }, { tag: 'TXT03', t: 'לא תיאוריה.', s: 'CRM, סוכן AI, מפעל תוכן, פרסומות - דברים אמיתיים שמכניסים כסף.' }, { tag: 'TXT04', t: 'גם שיווק, גם בנייה.', s: 'איתור נישה, מחקר מתחרים, פרסומות, השקה - חבילה אחת שלמה.' }, ]; const window0 = 0.22, window1 = 0.90; const span = window1 - window0; const each = span / cards.length; return (
{!framesReady && (
טוען חוויה
{Math.round(loadPct*100)}%
)}
הקורס המלא בעברית · AI ו-Claude Code · 2026

אתה חושב. Claude מבצע.

94 שיעורים בעברית עם Claude Code. מערכות אמיתיות, לקוחות משלמים - בלי לכתוב שורת קוד אחת.

{cards.map((c, i) => { const start = window0 + i * each; const end = start + each; const inP = smoothstep(start, start + each * 0.06, progress); const outP = 1 - smoothstep(end - each * 0.06, end, progress); const visible = Math.min(inP, outP); const dy = lerp(14, 0, inP) + lerp(0, -14, 1 - outP); const blurAmt = lerp(4, 0, inP) + lerp(0, 4, 1 - outP); return (
0.1 ? `blur(${blurAmt}px)` : 'none', transition: 'opacity 180ms linear, transform 180ms linear, filter 180ms linear', }}>
); })}
0.5 ? 'auto' : 'none'}}>
מוכנים להתחיל לבנות?
גלול להמשך
); } function FloatingCard({ tag, title, sub, idx }) { const isMobile = useIsMobile(); const desktopOffsets = [ {top:'18%', left:'10%', right:'auto', maxW:520, align:'right'}, {top:'22%', left:'auto', right:'8%', maxW:540, align:'right'}, {top:'58%', left:'12%', right:'auto', maxW:500, align:'right'}, {top:'52%', left:'auto', right:'10%', maxW:560, align:'right'}, ]; // Mobile: all cards centered horizontally, with slight vertical offset for visual variety const mobileOffsets = [ {top:'34%', left:16, right:16, align:'right'}, {top:'38%', left:16, right:16, align:'right'}, {top:'46%', left:16, right:16, align:'right'}, {top:'42%', left:16, right:16, align:'right'}, ]; const offsets = isMobile ? mobileOffsets : desktopOffsets; const o = offsets[idx % offsets.length]; return (
- {tag}
{title}
{sub}
); } window.Hero = Hero;