// App.jsx — Main shell + Tweaks const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "atmosphere": "Nebula", "signalIntensity": 70, "typeWeight": "Refined" }/*EDITMODE-END*/; // ── Context ────────────────────────────────────────────────────────────────── const TweakCtx = React.createContext(TWEAK_DEFAULTS); const useTweakCtx = () => React.useContext(TweakCtx); // ── Atmosphere config ───────────────────────────────────────────────────────── const ATMOSPHERES = { Void: { heroBg: 'radial-gradient(ellipse 60% 40% at 50% 30%, #0d1422 0%, #0B1222 80%)', heroOrb: 'rgba(59,130,246,0.05)', gridOpacity: 0.02, nebulaOverlay: null, pageBg: '#0B1222', }, Nebula: { heroBg: 'radial-gradient(ellipse 80% 60% at 50% 30%, #0f1d3a 0%, #0B1222 70%)', heroOrb: 'rgba(59,130,246,0.12)', gridOpacity: 0.04, nebulaOverlay: 'radial-gradient(ellipse 100% 80% at 70% 20%, rgba(99,40,180,0.07) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 20% 80%, rgba(59,130,246,0.06) 0%, transparent 50%)', pageBg: '#0B1222', }, Aurora: { heroBg: 'radial-gradient(ellipse 90% 70% at 50% 20%, #0a1f18 0%, #0B1222 65%)', heroOrb: 'rgba(100,200,80,0.10)', gridOpacity: 0.03, nebulaOverlay: 'radial-gradient(ellipse 120% 60% at 50% 10%, rgba(100,200,80,0.07) 0%, rgba(59,130,246,0.05) 50%, transparent 75%)', pageBg: '#090f0d', }, }; // ── Signal intensity → lime color derived values ────────────────────────────── const getSignal = (intensity) => { // intensity 0–100 const alpha = 0.08 + (intensity / 100) * 0.92; const glowSpread = 10 + (intensity / 100) * 50; const glowOpacity = 0.08 + (intensity / 100) * 0.42; const limeOpacity = 0.5 + (intensity / 100) * 0.5; return { alpha, glowSpread, glowOpacity, limeOpacity }; }; // ── Type weight config ──────────────────────────────────────────────────────── const TYPE_CONFIGS = { Ghost: { weight: 200, tracking: '0.01em', scale: 1.04 }, Refined: { weight: 300, tracking: '-0.02em', scale: 1.0 }, Impact: { weight: 500, tracking: '-0.04em', scale: 0.96 }, }; // ── NavBar ──────────────────────────────────────────────────────────────────── const NavBar = () => { const [scrolled, setScrolled] = React.useState(false); const { signalIntensity } = useTweakCtx(); const sig = getSignal(signalIntensity); React.useEffect(() => { const handler = () => setScrolled(window.scrollY > 60); window.addEventListener('scroll', handler, { passive: true }); return () => window.removeEventListener('scroll', handler); }, []); return ( ); }; // ── Atmosphere overlay injected into body ───────────────────────────────────── const AtmosphereLayer = () => { const { atmosphere } = useTweakCtx(); const cfg = ATMOSPHERES[atmosphere] || ATMOSPHERES.Nebula; if (!cfg.nebulaOverlay) return null; return (
); }; // ── App ─────────────────────────────────────────────────────────────────────── const App = () => { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const { atmosphere } = tweaks; const cfg = ATMOSPHERES[atmosphere] || ATMOSPHERES.Nebula; return (
{/* Tweaks Panel */} setTweak('atmosphere', v)} /> setTweak('signalIntensity', v)} /> setTweak('typeWeight', v)} />
); }; const root = ReactDOM.createRoot(document.getElementById('root')); root.render();