// app.jsx — compose everything, palette/motion tweaks, mount
const { useEffect: useEf } = React;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"palette": "studio",
"motion": true,
"accent": "coral"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
useReveal();
useEf(() => {
const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
if (mq.matches) setTweak('motion', false);
const onChange = (e) => setTweak('motion', !e.matches);
mq.addEventListener('change', onChange);
return () => mq.removeEventListener('change', onChange);
}, []);
useEf(() => {
const boot = document.getElementById('boot');
if (!boot) return;
boot.style.transition = 'opacity .5s';
boot.style.opacity = '0';
const id = setTimeout(() => boot.remove(), 520);
return () => clearTimeout(id);
}, []);
// apply palette + motion to
useEf(() => {
document.documentElement.setAttribute('data-palette', t.palette);
document.documentElement.setAttribute('data-motion', t.motion ? 'on' : 'off');
}, [t.palette, t.motion]);
// optional accent override (hue of --primary) on top of palette
useEf(() => {
const map = {
coral: null, // use palette default
blush: '#E6A8B4',
amber: '#E3B98A',
sage: '#9DBCA8',
};
const v = map[t.accent];
if (v) document.documentElement.style.setProperty('--primary', v);
else document.documentElement.style.removeProperty('--primary');
}, [t.accent, t.palette]);
return (
setTweak('palette', v)} />
{
const inv = { '#E89B9B': 'coral', '#E6A8B4': 'blush', '#E3B98A': 'amber', '#9DBCA8': 'sage' };
setTweak('accent', inv[v] || 'coral');
}} />
setTweak('motion', v)} />
);
}
ReactDOM.createRoot(document.getElementById('root')).render();