/* global React, ReactDOM */
/* global VolHeader, Hero, Showreel, Gallery, StudioTrack, CreatorTrack, WhyVolograms, FinalCTA, VolFooter */
/* global useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakSlider */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"heroVariant": "split",
"gradient": "rhythmic",
"motion": "subtle",
"accent": "grad",
"font": "montserrat",
"gallery": "bento"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Reflect tweaks onto data-attrs so CSS can react
React.useEffect(() => {
const body = document.body;
body.dataset.motion = t.motion;
body.dataset.grad = t.gradient;
body.dataset.accent = t.accent;
body.dataset.font = t.font;
body.dataset.gallery = t.gallery;
body.dataset.hero = t.heroVariant;
}, [t.motion, t.gradient, t.accent, t.font, t.gallery, t.heroVariant]);
return (
setTweak("heroVariant", v)}/>
setTweak("gradient", v)}/>
setTweak("accent", v)}/>
setTweak("motion", v)}/>
setTweak("font", v)}/>
setTweak("gallery", v)}/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();