// MC Tweaks — motion controls for the Marina Capella home page.
// Mounts an isolated React root; the panel only appears when the host
// activates Tweaks mode. Effects are applied as classes on , which
// the vanilla interactive.js reads at runtime.
const MC_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"hero": "New model of medicine",
"headlineFont": "Spectral",
"bodyFont": "Hanken Grotesk",
"motion": "balanced",
"parallax": true,
"tilt": true,
"autoDemo": true
}/*EDITMODE-END*/;
const MC_HERO = {
'New model of medicine': 'newmodel',
'Reimagining medicine': 'reimagining',
'Healing the healer (round 1)': 'healer'
};
const MC_DISPLAY_STACKS = {
'Spectral': "'Spectral', Georgia, 'Times New Roman', serif",
'Source Serif 4': "'Source Serif 4', Georgia, 'Times New Roman', serif",
'Newsreader': "'Newsreader', Georgia, 'Times New Roman', serif",
'Fraunces': "'Fraunces', Georgia, 'Times New Roman', serif"
};
const MC_BODY_STACKS = {
'Hanken Grotesk': "'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif",
'Figtree': "'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif",
'Mulish': "'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif"
};
function MCTweaks() {
const [t, setTweak] = useTweaks(MC_TWEAK_DEFAULTS);
React.useEffect(function () {
const hero = document.querySelector('.hero');
if (hero && MC_HERO[t.hero]) hero.setAttribute('data-hero', MC_HERO[t.hero]);
}, [t.hero]);
React.useEffect(function () {
const s = document.documentElement.style;
if (MC_DISPLAY_STACKS[t.headlineFont]) s.setProperty('--font-display', MC_DISPLAY_STACKS[t.headlineFont]);
if (MC_BODY_STACKS[t.bodyFont]) s.setProperty('--font-body', MC_BODY_STACKS[t.bodyFont]);
}, [t.headlineFont, t.bodyFont]);
React.useEffect(function () {
const c = document.documentElement.classList;
c.toggle('calm-motion', t.motion === 'calm');
c.toggle('no-parallax', !t.parallax || t.motion === 'calm');
c.toggle('no-tilt', !t.tilt || t.motion === 'calm');
c.toggle('no-demo', !t.autoDemo);
}, [t.motion, t.parallax, t.tilt, t.autoDemo]);
return (
);
}
(function () {
const root = document.getElementById('mc-tweaks-root');
if (root && window.ReactDOM && ReactDOM.createRoot) {
ReactDOM.createRoot(root).render();
}
})();