// ACT 3 — Pinned craft section with numbered steps const CRAFT_FRAME_NUMBERS = [1,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,145,150,155,160,165,170,175,180,185,190]; const CRAFT_FRAME_SRCS = CRAFT_FRAME_NUMBERS.map(n => `images/maalem-stitching/frame-${String(n).padStart(3,'0')}.webp`); function ActCraft({ lang }) { const content = window.CONTENT[lang].craft; const sectionRef = useRef(null); const canvasRef = useRef(null); const videoRef = useRef(null); const frameCacheRef = useRef(new Map()); const lastDrawnFrameRef = useRef(null); const mountedRef = useRef(false); const rawP = useStickyProgress(sectionRef); const [p, setP] = useState(0); const [cacheTick, setCacheTick] = useState(0); const [videoReadyTick, setVideoReadyTick] = useState(0); const isRTL = lang === 'ar'; const { isPhone, isTablet } = useResponsive(); const isCompact = isTablet; const craftIntro = easeInOut(clamp(p / 0.18, 0, 1)); const craftExit = isCompact ? easeInOut(clamp((p - 0.78) / 0.18, 0, 1)) : 0; const craftContentOpacity = (1 - craftExit) * (1 - craftExit); useEffect(() => { mountedRef.current = true; return () => { mountedRef.current = false; }; }, []); useEffect(() => { let raf; const tick = () => { setP(current => { const next = current + (rawP - current) * 0.16; return Math.abs(next - current) < 0.0005 ? rawP : next; }); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [rawP]); // The first craft frame is visible immediately so the section never opens blank. const activeStep = p < 0.34 ? 1 : p < 0.64 ? 2 : 3; const frameFloat = clamp(p / 0.9, 0, 1) * (CRAFT_FRAME_SRCS.length - 1); const frameBaseIndex = Math.floor(frameFloat); const craftVideoProgress = clamp(p / 0.9, 0, 1); const finishingReveal = clamp((p - 0.6) / 0.22, 0, 1); const baseStageOpacity = lerp(0.58, 0.84, finishingReveal); const stageBrightness = lerp(lerp(0.62, 0.76, finishingReveal), 0.48, craftExit); const stageVignette = lerp(lerp(1, 0.72, finishingReveal), 1.18, craftExit); const stageScale = lerp(1.04, isPhone ? 1.18 : 1.1, craftExit); useEffect(() => { if (!isCompact) return; const video = videoRef.current; if (!video || !Number.isFinite(video.duration) || video.duration <= 0) return; video.pause(); const target = craftVideoProgress * Math.max(0, video.duration - 0.04); if (Math.abs(video.currentTime - target) > 0.02) { video.currentTime = target; } }, [isCompact, craftVideoProgress, videoReadyTick]); useEffect(() => { if (!isCompact) return; videoRef.current?.load(); }, [isCompact]); useEffect(() => { if (isCompact) return; let cancelled = false; const cache = frameCacheRef.current; const loadFrame = (i) => new Promise((resolve) => { const existing = cache.get(i); if (existing?.ready) { resolve(); return; } const img = new Image(); img.decoding = 'async'; cache.set(i, { img, ready: false }); const markReady = () => { const record = cache.get(i); if (mountedRef.current && record && !record.ready) { record.ready = true; setCacheTick(tick => tick + 1); } resolve(); }; img.onerror = resolve; img.onload = markReady; img.src = CRAFT_FRAME_SRCS[i]; if (img.decode) img.decode().then(markReady).catch(() => {}); }); const preload = async () => { const priority = Array.from( { length: CRAFT_FRAME_SRCS.length }, (_, i) => i ).sort((a, b) => Math.abs(a - frameBaseIndex) - Math.abs(b - frameBaseIndex)); for (const i of priority) { if (cancelled) return; await loadFrame(i); await new Promise(requestAnimationFrame); } }; preload(); return () => { cancelled = true; }; }, [isCompact, frameBaseIndex]); useEffect(() => { if (isCompact) return; const cache = frameCacheRef.current; const current = cache.get(frameBaseIndex); const nextIndex = Math.min(CRAFT_FRAME_SRCS.length - 1, frameBaseIndex + 1); const next = cache.get(nextIndex); const fallback = current?.ready ? current.img : lastDrawnFrameRef.current || [...cache.values()].find(record => record.ready)?.img; if (current?.ready) { lastDrawnFrameRef.current = current.img; } drawCraftFrame( canvasRef.current, fallback, current?.ready && next?.ready ? next.img : null, clamp(frameFloat - frameBaseIndex, 0, 1), baseStageOpacity * craftIntro ); }, [isCompact, frameBaseIndex, frameFloat, baseStageOpacity, craftIntro, cacheTick]); return (
{/* Left: pinned title column */}
{content.eyebrow}

{content.h1}
{content.h2}

{/* Step indicators */}
{content.steps.map((s, i) => { const active = activeStep === i + 1 || (activeStep > 3 && i === 2); return (
{s.n} {s.t}
); })}
{/* Right: content pane with transitioning panels */}
{isCompact ? ( <>
); } function drawCraftFrame(canvas, currentImg, nextImg, blend, opacity) { if (!canvas || !currentImg || !currentImg.complete || !currentImg.naturalWidth) return; const rect = (canvas.parentElement || canvas).getBoundingClientRect(); if (!rect.width || !rect.height) return; const dpr = Math.min(window.devicePixelRatio || 1, 2); const width = Math.round(rect.width * dpr); const height = Math.round(rect.height * dpr); if (canvas.width !== width || canvas.height !== height) { canvas.width = width; canvas.height = height; } const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, width, height); ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high'; ctx.globalAlpha = nextImg ? opacity * (1 - blend) : opacity; drawCoverImage(ctx, currentImg, width, height); if (nextImg && nextImg.complete && nextImg.naturalWidth) { ctx.globalAlpha = opacity * blend; drawCoverImage(ctx, nextImg, width, height); } ctx.globalAlpha = 1; } function drawCoverImage(ctx, img, width, height) { const scale = Math.max(width / img.naturalWidth, height / img.naturalHeight); const drawWidth = img.naturalWidth * scale; const drawHeight = img.naturalHeight * scale; const x = (width - drawWidth) / 2; const y = (height - drawHeight) / 2; ctx.drawImage(img, x, y, drawWidth, drawHeight); } window.ActCraft = ActCraft;