/* ============================================================
NOVRIX — App (tweaks + language + assembly)
============================================================ */
const { useState: useStateA, useEffect: useEffectA } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroVariant": "A",
"accent": "#3b6bff",
"motion": true,
"lang": "fr"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [lang, setLang] = useState(t.lang || "fr");
// keep lang tweak and in-page toggle in sync
useEffect(() => { if (t.lang && t.lang !== lang) setLang(t.lang); }, [t.lang]);
const dict = window.I18N[lang];
// apply accent + motion to
useEffect(() => {
document.documentElement.style.setProperty("--accent", t.accent);
document.documentElement.setAttribute("data-motion", t.motion ? "on" : "off");
document.documentElement.lang = lang;
}, [t.accent, t.motion, lang]);
// Arm entrance animations ONLY if the animation timeline actually advances.
// (Some sandboxes freeze CSS transitions — if so we leave content visible.)
useEffect(() => {
const html = document.documentElement;
if (!t.motion || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
html.classList.remove("anim-ok");
return;
}
const t0 = document.timeline ? document.timeline.currentTime : null;
let r2;
const r1 = requestAnimationFrame(() => {
r2 = requestAnimationFrame(() => {
const t1 = document.timeline ? document.timeline.currentTime : null;
if (t1 != null && t0 != null && t1 > t0) html.classList.add("anim-ok");
});
});
return () => { cancelAnimationFrame(r1); cancelAnimationFrame(r2); };
}, [t.motion]);
useScrollReveal();
const Hero = t.heroVariant === "B" ? HeroB : HeroA;
return (
<>
setTweak("heroVariant", v)}
/>
setTweak("accent", v)}
/>
{ setLang(v); setTweak("lang", v); }}
/>
setTweak("motion", v)} />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();