/* ============================================================ Main app + custom cursor + magnetic buttons + scroll reveal ============================================================ */ const { useEffect: useEffectApp } = React; /* Tweakable defaults — host can rewrite this block */ const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{ "accentColor": "#F25C1F", "background": "cream", "showCursor": true, "displayFont": "bricolage", "heroVariant": "stacked" }/*EDITMODE-END*/; function App() { const t = window.useTweaks ? window.useTweaks(TWEAKS_DEFAULTS) : [TWEAKS_DEFAULTS, ()=>{}]; const tweaks = t[0]; const setTweak = t[1]; // apply tweaks to root useEffectApp(() => { document.documentElement.style.setProperty("--orange", tweaks.accentColor); document.documentElement.style.setProperty("--orange-hot", tweaks.accentColor); if (tweaks.background === "cream") { document.documentElement.style.setProperty("--cream", "#F4EDE0"); } else if (tweaks.background === "paper") { document.documentElement.style.setProperty("--cream", "#FBF7EE"); } else if (tweaks.background === "ink") { document.documentElement.style.setProperty("--cream", "#1A1714"); document.documentElement.style.setProperty("--ink", "#F4EDE0"); document.documentElement.style.setProperty("--paper", "#0F0D0B"); document.documentElement.style.setProperty("--ink-soft", "#D6CDB9"); } const fontMap = { bricolage: '"Bricolage Grotesque", system-ui, sans-serif', archivo: '"Archivo Black", system-ui, sans-serif', fraunces: '"Fraunces", "Times New Roman", serif', space: '"Space Grotesk", system-ui, sans-serif', }; document.documentElement.style.setProperty("--display", fontMap[tweaks.displayFont] || fontMap.bricolage); }, [tweaks.accentColor, tweaks.background, tweaks.displayFont]); // Custom cursor useEffectApp(() => { if (!tweaks.showCursor) return; const dot = document.querySelector(".cursor-dot"); const ring = document.querySelector(".cursor-ring"); if (!dot || !ring) return; let mx=0,my=0,rx=0,ry=0; const move = (e) => { mx=e.clientX; my=e.clientY; dot.style.left=mx+"px"; dot.style.top=my+"px"; }; const loop = () => { rx += (mx - rx) * 0.18; ry += (my - ry) * 0.18; ring.style.left = rx + "px"; ring.style.top = ry + "px"; requestAnimationFrame(loop); }; window.addEventListener("mousemove", move); loop(); // Hover state for interactive elements const targets = document.querySelectorAll("a, button, .magnetic, input, textarea"); const enter = () => { ring.classList.add("is-hover"); dot.classList.add("is-hover"); }; const leave = () => { ring.classList.remove("is-hover"); dot.classList.remove("is-hover"); }; targets.forEach(t => { t.addEventListener("mouseenter", enter); t.addEventListener("mouseleave", leave); }); return () => { window.removeEventListener("mousemove", move); targets.forEach(t => { t.removeEventListener("mouseenter", enter); t.removeEventListener("mouseleave", leave); }); }; }, [tweaks.showCursor]); // Magnetic buttons useEffectApp(() => { const els = document.querySelectorAll(".magnetic"); const handlers = []; els.forEach(el => { const move = (e) => { const r = el.getBoundingClientRect(); const x = e.clientX - (r.left + r.width/2); const y = e.clientY - (r.top + r.height/2); const strength = el.tagName === "INPUT" || el.tagName === "TEXTAREA" ? 0 : 0.18; el.style.transform = `translate(${x*strength}px, ${y*strength}px)`; }; const out = () => { el.style.transform = ""; }; el.addEventListener("mousemove", move); el.addEventListener("mouseleave", out); handlers.push({el, move, out}); }); return () => handlers.forEach(h => { h.el.removeEventListener("mousemove", h.move); h.el.removeEventListener("mouseleave", h.out); }); }); // Scroll reveal useEffectApp(() => { const els = document.querySelectorAll(".reveal"); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) e.target.classList.add("in"); }); }, { threshold: 0.15 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, []); return ( <> {tweaks.showCursor && <>
}