); } // ─── Aurora gradient blobs, slow drift, light variant ─────────── function Aurora({ palette = ['#e8e3d8', '#dfe4e0', '#e6dedd', '#eee9dc'] }) { const blobs = React.useMemo(() => ( palette.map((c, i) => ({ c, size: 60 + i * 12, x: [15, 75, 35, 85][i % 4], y: [20, 30, 70, 60][i % 4], delay: i * 2.5, dur: 24 + i * 4, })) ), [palette]); return (

{blobs.map((b, i) => (

))}

); } // ─── Floating orbs (fine, small dots drifting up) ─────────────── function Orbs({ count = 18, color = 'rgba(20,20,20,0.4)' }) { const orbs = React.useMemo(() => ( Array.from({ length: count }, (_, i) => ({ x: Math.random() * 100, size: 2 + Math.random() * 4, dur: 18 + Math.random() * 22, delay: -Math.random() * 30, })) ), [count]); return (

{orbs.map((o, i) => (

))}

); } // ─── Animated diagonal/grid lines that draw in on scroll ──────── function GridLines({ density = 8, color = 'rgba(10,10,10,0.08)' }) { const cols = Array.from({ length: density }, (_, i) => i); return (

{cols.map((i) => (

))}

); } // ─── Reveal on scroll: IntersectionObserver within a root ─────── // Usage: ... function useReveal(root, options = {}) { const ref = React.useRef(null); const [shown, setShown] = React.useState(false); React.useEffect(() => { if (!ref.current) return; const el = ref.current; // root can be null → viewport, fine for standalone pages too const io = new IntersectionObserver((entries) => { for (const e of entries) { if (e.isIntersecting) { setShown(true); io.unobserve(e.target); } } }, { root: root || null, threshold: 0.15, rootMargin: '0px 0px -10% 0px', ...options }); io.observe(el); return () => io.disconnect(); }, [root]); return [ref, shown]; } function Reveal({ children, root, delay = 0, y = 24, as: As = 'div', style = {}, ...rest }) { const [ref, shown] = useReveal(root); return ( {children} ); } // ─── Parallax on scroll — y offset = depth * scrollTop ────────── function useParallax(root, depth = 0.2) { const ref = React.useRef(null); React.useEffect(() => { const scroller = root || window; const getTop = () => (root ? root.scrollTop : window.scrollY); let raf = 0; const tick = () => { raf = 0; if (ref.current) { const y = getTop() * depth; ref.current.style.transform = `translate3d(0, ${-y}px, 0)`; } }; const onScroll = () => { if (!raf) raf = requestAnimationFrame(tick); }; scroller.addEventListener('scroll', onScroll, { passive: true }); tick(); return () => { scroller.removeEventListener('scroll', onScroll); cancelAnimationFrame(raf); }; }, [root, depth]); return ref; } // ─── 3D tilt on hover ─────────────────────────────────────────── function Tilt({ children, max = 8, style = {}, ...rest }) { const ref = React.useRef(null); const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width - 0.5; const y = (e.clientY - r.top) / r.height - 0.5; el.style.transform = `perspective(900px) rotateX(${-y * max}deg) rotateY(${x * max}deg) translate3d(0,0,0)`; }; const onLeave = () => { if (ref.current) ref.current.style.transform = ''; }; return (

{children}

); } // ─── Magnet cursor — one per artboard, constrained to its rect ── function MagnetCursor({ root }) { const dotRef = React.useRef(null); const ringRef = React.useRef(null); React.useEffect(() => { if (!root) return; const dot = dotRef.current, ring = ringRef.current; let rafId = 0; let tx = 0, ty = 0, rx = 0, ry = 0; let dx = 0, dy = 0; // dot target let hover = false; const tick = () => { rafId = 0; rx += (tx - rx) * 0.18; ry += (ty - ry) * 0.18; dx += (tx - dx) * 0.55; dy += (ty - dy) * 0.55; if (ring) ring.style.transform = `translate3d(${rx}px, ${ry}px, 0) translate(-50%,-50%) scale(${hover ? 1.6 : 1})`; if (dot) dot.style.transform = `translate3d(${dx}px, ${dy}px, 0) translate(-50%,-50%)`; }; const schedule = () => { if (!rafId) rafId = requestAnimationFrame(tick); }; const onMove = (e) => { const r = root.getBoundingClientRect(); tx = e.clientX - r.left; ty = e.clientY - r.top; hover = !!e.target.closest('[data-magnet]'); schedule(); }; const onEnter = () => { if (dot) dot.style.opacity = '1'; if (ring) ring.style.opacity = '1'; }; const onLeave = () => { if (dot) dot.style.opacity = '0'; if (ring) ring.style.opacity = '0'; }; root.addEventListener('mousemove', onMove); root.addEventListener('mouseenter', onEnter); root.addEventListener('mouseleave', onLeave); return () => { root.removeEventListener('mousemove', onMove); root.removeEventListener('mouseenter', onEnter); root.removeEventListener('mouseleave', onLeave); cancelAnimationFrame(rafId); }; }, [root]); return ( <>

); } // ─── Animated underline link (magnet target) ──────────────────── function NavLink({ children, href = '#' }) { return ( { const u = e.currentTarget.querySelector('i'); if (u) u.style.transform = 'scaleX(1)'; }} onMouseLeave={(e) => { const u = e.currentTarget.querySelector('i'); if (u) u.style.transform = 'scaleX(0)'; }} > {children} ); } // ─── Placeholder image (striped SVG w/ monospace caption) ─────── function Placeholder({ label = 'product shot', ratio = 16/9, style = {}, dark = false }) { const bg = dark ? '#0a0a0a' : '#eae5dc'; const fg = dark ? '#fff' : '#0a0a0a'; return (

◇ {label}

); } // ─── useIsMobile — single-source-of-truth viewport check (≤768px) ──── function useIsMobile(breakpoint = 768) { const [isMobile, setIsMobile] = React.useState( typeof window !== 'undefined' ? window.innerWidth <= breakpoint : false ); React.useEffect(() => { const mq = window.matchMedia(`(max-width: ${breakpoint}px)`); const handler = (e) => setIsMobile(e.matches); mq.addEventListener ? mq.addEventListener('change', handler) : mq.addListener(handler); return () => mq.removeEventListener ? mq.removeEventListener('change', handler) : mq.removeListener(handler); }, [breakpoint]); return isMobile; } Object.assign(window, { Grain, Aurora, Orbs, GridLines, Reveal, useReveal, useParallax, Tilt, MagnetCursor, NavLink, Placeholder, useIsMobile, });