// cr-app.jsx — theming, tweaks, scroll reveal, mount
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"direction": "editorial",
"headline": "action",
"heroVisual": "both",
"accent": "balanced",
"rhythm": "balanced",
"animate": true,
"animSpeed": 0.9
}/*EDITMODE-END*/;
// rhythm -> which sections render on navy
const RHYTHM = {
light: { trip:"sec--light", primer:"sec--navy", showcase:"sec--paper", pillars:"sec--light", people:"sec--paper", cadence:"sec--light", work:"sec--paper", about:"sec--light" },
balanced: { trip:"sec--light", primer:"sec--navy", showcase:"sec--paper", pillars:"sec--paper", people:"sec--light", cadence:"sec--navy", work:"sec--paper", about:"sec--light" },
navy: { trip:"sec--navy", primer:"sec--paper", showcase:"sec--navy", pillars:"sec--light", people:"sec--paper", cadence:"sec--navy", work:"sec--paper", about:"sec--navy" },
};
const ACCENT = { subtle:0.62, balanced:1, bold:1.4 };
function useReveal(deps){
React.useEffect(() => {
let raf = 0;
const check = () => {
const trigger = window.innerHeight * 0.9;
document.querySelectorAll("[data-reveal]:not([data-in])").forEach(el => {
const r = el.getBoundingClientRect();
if(r.top < trigger && r.bottom > 0) el.setAttribute("data-in", "");
});
};
const onScroll = () => check();
// reveal above-the-fold immediately (rAF can be throttled in hidden frames)
check();
const t0 = setTimeout(check, 60);
const t1 = setTimeout(check, 240);
window.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("resize", onScroll);
return () => {
cancelAnimationFrame(raf); clearTimeout(t0); clearTimeout(t1);
window.removeEventListener("scroll", onScroll);
window.removeEventListener("resize", onScroll);
};
}, deps);
}
/* scroll progress bar + gentle parallax drift */
function useScrollFX(enabled){
React.useEffect(() => {
const bar = document.querySelector(".scroll-progress");
const px = Array.from(document.querySelectorAll("[data-parallax]"));
const run = () => {
const h = document.documentElement;
const max = h.scrollHeight - h.clientHeight;
const p = max > 0 ? Math.min(window.scrollY / max, 1) : 0;
if(bar) bar.style.transform = `scaleX(${p})`;
if(enabled){
for(const el of px){
const speed = parseFloat(el.dataset.parallax) || 0;
const r = el.getBoundingClientRect();
const center = r.top + r.height / 2 - window.innerHeight / 2;
el.style.transform = `translate3d(0, ${(center * speed * -0.04).toFixed(1)}px, 0)`;
}
} else {
for(const el of px) el.style.transform = "";
}
};
run();
window.addEventListener("scroll", run, { passive: true });
window.addEventListener("resize", run);
const t = setTimeout(run, 200);
return () => { window.removeEventListener("scroll", run); window.removeEventListener("resize", run); clearTimeout(t); };
}, [enabled]);
}
function App(){
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// apply theme to
React.useEffect(() => {
const r = document.documentElement;
r.setAttribute("data-direction", t.direction);
r.setAttribute("data-anim", t.animate ? "on" : "off");
r.style.setProperty("--accent-strength", String(ACCENT[t.accent] ?? 1));
r.style.setProperty("--anim-dur", `${t.animSpeed}s`);
}, [t.direction, t.animate, t.animSpeed, t.accent]);
useReveal([t.rhythm, t.direction]);
useScrollFX(t.animate);
const tones = RHYTHM[t.rhythm] || RHYTHM.balanced;
return (
<>
{/* Outcomes / Selected Work — on hold, to add later
*/}
setTweak("direction", v)} />
setTweak("headline", v)} />
setTweak("heroVisual", v)} />
setTweak("rhythm", v)} />
setTweak("accent", v)} />
setTweak("animate", v)} />
setTweak("animSpeed", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();