// app.jsx — root component, Tweaks panel, scroll-rise observer.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"track": "a",
"display": "serif",
"headline": "finance",
"density": "regular"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
// Apply tweaks to data-attrs so CSS variables flip.
React.useEffect(() => {
document.body.setAttribute('data-track', t.track);
document.body.setAttribute('data-display', t.display);
document.body.setAttribute('data-density', t.density);
}, [t.track, t.display, t.density]);
// Fade-and-rise on scroll.
React.useEffect(() => {
const els = document.querySelectorAll('.rise:not(.in)');
if (!('IntersectionObserver' in window)) {
els.forEach(el => el.classList.add('in'));
return;
}
const io = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('in');
io.unobserve(e.target);
}
});
}, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
els.forEach(el => io.observe(el));
return () => io.disconnect();
}, []);
return (
<>
setTweak('track', v)}
/>
setTweak('display', v)}
/>
setTweak('density', v)}
/>
setTweak('headline', v)}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();