/* App — theme state, scroll reveal, marquee, tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "herbarium",
"showBotanicals": true,
"italicHeadlines": true,
"accent": "#b9694a",
"animationsOn": true,
"heroBackdrop": true,
"heroBackdropOpacity": 90
}/*EDITMODE-END*/;
const App = () => {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [theme, setThemeState] = React.useState(tweaks.theme || "herbarium");
// Sync tweak <-> state for theme
const setTheme = (t) => {
setThemeState(t);
setTweak("theme", t);
};
React.useEffect(() => {
if (tweaks.theme && tweaks.theme !== theme) setThemeState(tweaks.theme);
}, [tweaks.theme]);
// Apply theme to
React.useEffect(() => {
document.documentElement.dataset.theme = theme;
}, [theme]);
// Apply botanical visibility
React.useEffect(() => {
document.documentElement.style.setProperty("--botanical-display", tweaks.showBotanicals ? "block" : "none");
document.body.classList.toggle("no-botanicals", !tweaks.showBotanicals);
}, [tweaks.showBotanicals]);
// Italic headlines tweak
React.useEffect(() => {
document.body.classList.toggle("no-italics", !tweaks.italicHeadlines);
}, [tweaks.italicHeadlines]);
// Accent override
React.useEffect(() => {
if (tweaks.accent) {
document.documentElement.style.setProperty("--accent", tweaks.accent);
}
}, [tweaks.accent]);
// Animations
React.useEffect(() => {
document.body.classList.toggle("no-anims", !tweaks.animationsOn);
}, [tweaks.animationsOn]);
// Hero backdrop
React.useEffect(() => {
document.body.classList.toggle("no-hero-bg", !tweaks.heroBackdrop);
document.documentElement.style.setProperty(
"--hero-bg-opacity",
String((tweaks.heroBackdropOpacity ?? 90) / 100)
);
}, [tweaks.heroBackdrop, tweaks.heroBackdropOpacity]);
// Scroll-reveal observer
React.useEffect(() => {
if (!tweaks.animationsOn) {
document.querySelectorAll(".reveal").forEach((el) => el.classList.add("in"));
return;
}
const obs = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("in");
obs.unobserve(e.target);
}
});
},
{ threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
);
// small delay to let React render
const t = setTimeout(() => {
document.querySelectorAll(".reveal:not(.in)").forEach((el) => obs.observe(el));
}, 50);
return () => {
clearTimeout(t);
obs.disconnect();
};
}, [tweaks.animationsOn, theme]);
return (
setTweak("accent", v)}
options={["#b9694a", "#e0c24a", "#c08648", "#7a8a44", "#c98a8a"]}
/>
setTweak("heroBackdrop", v)}
/>
setTweak("heroBackdropOpacity", v)}
/>
setTweak("showBotanicals", v)}
/>
setTweak("italicHeadlines", v)}
/>
setTweak("animationsOn", v)}
/>
);
};
ReactDOM.createRoot(document.getElementById("root")).render();