// HOME page — hero photo + category list + crossfade slideshow const { useState, useEffect, useRef, useCallback } = React; window.Home = function Home({ navigate, lang, hoverBehavior = 'crossfade-zoom' }) { const t = STRINGS[lang]; const data = window.PORTFOLIO_DATA; const [hovered, setHovered] = useState(null); const [mobilePreview, setMobilePreview] = useState(null); const [slideIdx, setSlideIdx] = useState(0); const timer = useRef(null); const isTouchDevice = useRef(typeof window !== 'undefined' && 'ontouchstart' in window); // ── Liquid reveal ────────────────────────────────────── const mousePos = useRef({ x: -2000, y: -2000 }); const lag2 = useRef({ x: -2000, y: -2000 }); const lag3 = useRef({ x: -2000, y: -2000 }); const elReveal2 = useRef(null); const elReveal3 = useRef(null); const rafId = useRef(null); const stageEl = useRef(null); const hasEntered = useRef(false); const activeId = hovered || mobilePreview; // Slide rotation timer useEffect(() => { if (!activeId) { setSlideIdx(0); if (timer.current) { clearInterval(timer.current); timer.current = null; } return; } setSlideIdx(0); timer.current = setInterval(() => setSlideIdx(i => i + 1), 3000); return () => { if (timer.current) clearInterval(timer.current); }; }, [activeId]); // Smooth organic blob — Catmull-Rom → cubic bezier, no sharp corners const blobPath = (cx, cy, r, t, pts = 14) => { const points = []; for (let i = 0; i < pts; i++) { const a = (i / pts) * Math.PI * 2; const n = 1 + Math.sin(a * 2 + t) * 0.11 + Math.sin(a * 3 - t * 0.7) * 0.08 + Math.cos(a * 5 + t * 1.1) * 0.05; points.push({ x: cx + Math.cos(a) * r * n, y: cy + Math.sin(a) * r * n }); } const len = points.length; let d = `M ${points[0].x.toFixed(1)},${points[0].y.toFixed(1)}`; for (let i = 0; i < len; i++) { const p0 = points[(i - 1 + len) % len]; const p1 = points[i]; const p2 = points[(i + 1) % len]; const p3 = points[(i + 2) % len]; const cp1x = (p1.x + (p2.x - p0.x) / 6).toFixed(1); const cp1y = (p1.y + (p2.y - p0.y) / 6).toFixed(1); const cp2x = (p2.x - (p3.x - p1.x) / 6).toFixed(1); const cp2y = (p2.y - (p3.y - p1.y) / 6).toFixed(1); d += ` C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x.toFixed(1)},${p2.y.toFixed(1)}`; } d += ' Z'; return `path('${d}')`; }; // RAF loop — lerp + organic blob shape for liquid feel useEffect(() => { if (isTouchDevice.current) return; const lerp = (a, b, t) => a + (b - a) * t; const tick = () => { if (!hasEntered.current) { rafId.current = requestAnimationFrame(tick); return; } // Layer 2 — large blob, very slow (heavy liquid feel) lag2.current.x = lerp(lag2.current.x, mousePos.current.x, 0.045); lag2.current.y = lerp(lag2.current.y, mousePos.current.y, 0.045); // Layer 3 — small blob, snappier (inner highlight catches up faster) lag3.current.x = lerp(lag3.current.x, mousePos.current.x, 0.16); lag3.current.y = lerp(lag3.current.y, mousePos.current.y, 0.16); const now = Date.now() * 0.0009; const x2 = lag2.current.x, y2 = lag2.current.y; const x3 = lag3.current.x, y3 = lag3.current.y; const path2 = blobPath(x2, y2, 370, now, 14); const path3 = blobPath(x3, y3, 195, now + 1.8, 14); // Soft radial mask — large opaque center, 3-stop gradient for gradual fade const mask2 = `radial-gradient(circle 400px at ${x2.toFixed(0)}px ${y2.toFixed(0)}px, black 58%, rgba(0,0,0,0.35) 82%, transparent 100%)`; const mask3 = `radial-gradient(circle 215px at ${x3.toFixed(0)}px ${y3.toFixed(0)}px, black 52%, rgba(0,0,0,0.3) 80%, transparent 100%)`; if (elReveal2.current) { elReveal2.current.style.clipPath = path2; elReveal2.current.style.webkitClipPath = path2; elReveal2.current.style.maskImage = mask2; elReveal2.current.style.webkitMaskImage = mask2; } if (elReveal3.current) { elReveal3.current.style.clipPath = path3; elReveal3.current.style.webkitClipPath = path3; elReveal3.current.style.maskImage = mask3; elReveal3.current.style.webkitMaskImage = mask3; } rafId.current = requestAnimationFrame(tick); }; rafId.current = requestAnimationFrame(tick); return () => { if (rafId.current) cancelAnimationFrame(rafId.current); }; }, []); const onStageMouseMove = useCallback((e) => { if (!stageEl.current) return; hasEntered.current = true; const r = stageEl.current.getBoundingClientRect(); mousePos.current = { x: e.clientX - r.left, y: e.clientY - r.top }; }, []); const onStageMouseLeave = useCallback(() => { hasEntered.current = false; mousePos.current = { x: -2000, y: -2000 }; // Collapse blobs instantly when mouse leaves const hide = 'polygon(0px 0px)'; const hideMask = 'radial-gradient(circle 0px at -2000px -2000px, black 0%, transparent 0%)'; if (elReveal2.current) { elReveal2.current.style.clipPath = hide; elReveal2.current.style.webkitClipPath = hide; elReveal2.current.style.maskImage = hideMask; elReveal2.current.style.webkitMaskImage = hideMask; } if (elReveal3.current) { elReveal3.current.style.clipPath = hide; elReveal3.current.style.webkitClipPath = hide; elReveal3.current.style.maskImage = hideMask; elReveal3.current.style.webkitMaskImage = hideMask; } lag2.current = { x: -2000, y: -2000 }; lag3.current = { x: -2000, y: -2000 }; }, []); // ── Touch handlers (mobile liquid reveal) ────────────── const onTouchCapture = useCallback((e) => { if (!stageEl.current) return; const r = stageEl.current.getBoundingClientRect(); const t = e.touches[0]; hasEntered.current = true; mousePos.current = { x: t.clientX - r.left, y: t.clientY - r.top }; }, []); const onTouchEndCapture = useCallback(() => { hasEntered.current = false; mousePos.current = { x: -2000, y: -2000 }; lag2.current = { x: -2000, y: -2000 }; lag3.current = { x: -2000, y: -2000 }; const hide = 'polygon(0px 0px)'; const hideMask = 'radial-gradient(circle 0px at -2000px -2000px, black 0%, transparent 0%)'; if (elReveal2.current) { elReveal2.current.style.clipPath = hide; elReveal2.current.style.webkitClipPath = hide; elReveal2.current.style.maskImage = hideMask; elReveal2.current.style.webkitMaskImage = hideMask; } if (elReveal3.current) { elReveal3.current.style.clipPath = hide; elReveal3.current.style.webkitClipPath = hide; elReveal3.current.style.maskImage = hideMask; elReveal3.current.style.webkitMaskImage = hideMask; } }, []); // ── Category slideshow ───────────────────────────────── const cat = activeId ? data.categories.find(c => c.id === activeId) : null; const slides = cat ? cat.slides : []; const activeSlide = slides.length ? slides[slideIdx % slides.length] : null; const handleCatClick = (c) => { if (isTouchDevice.current) { if (mobilePreview !== c.id) setMobilePreview(c.id); } else { navigate({ name: 'category', id: c.id }); } }; return (
{/* Layer 1 — base photo */}
{/* Layer 2 — liquid reveal, large slow blob */}
{/* Layer 3 — liquid reveal, small fast inner highlight */}
{/* Touch capture layer — mobile only, sits above layers but below overlay */}
{/* Category crossfade slideshow (category hover) */}
{data.categories.map(c => ( c.slides.map((s, i) => { const isVisible = (hovered === c.id || mobilePreview === c.id) && (i === (slideIdx % c.slides.length)); const slideSrc = (isTouchDevice.current && s.mobileSrc) ? s.mobileSrc : s.src; return (
); }) ))}
{/* Slideshow caption */}
{activeSlide && ( <>
{cat.label[lang]} / {String(slideIdx % slides.length + 1).padStart(2, '0')}
{activeSlide.label}
)}
{/* Category list */}
{t.catLabel} / 04
{data.categories.map(c => ( ))}
{/* Mobile preview bar */} {mobilePreview && (
{data.categories.find(c => c.id === mobilePreview)?.label[lang]}
)}
{/* Intro tagline */}
{t.photoLabel}

{lang === 'pt' ? <>Há mais de 15 anos criando universos. : <>Over 15 years creating universes. }

{t.portfolio} {t.based}
{t.available}
); };