// Layout.jsx — Header, Footer, OrbitBackdrop, Wordmark. const { Eyebrow, Button, MonogramIcon, A11yToggle, Ico, Icons } = window; // ---- Wordmark (text-based, can scale) ---- // Matches the SVG wordmark: O ruby, 8 imperial, ∞ gradient (ruby → imperial // → bayside → emerald via CSS background-clip). function Wordmark({ size = 72 }) { return ( O 8 ∞ ); } // ---- Star field (deterministic) ---- function StarField({ count = 80, height = 600 }) { const stars = React.useMemo(() => { const out = []; let s = 9301; const rng = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; }; for (let i = 0; i < count; i++) { out.push({ x: rng() * 100, y: rng() * 100, r: rng() * 1.1 + 0.25, o: rng() * 0.7 + 0.15 }); } return out; }, [count]); return ( {stars.map((st, i) => )} ); } // ---- OrbitBackdrop — Orion constellation hero backdrop ---- // Replaces the generic orbit motif with the brand's signature constellation. // Used behind the wordmark on the hero. function OrbitBackdrop({ children, height = 640 }) { return (
{/* Soft ruby glow behind the wordmark */} {/* Orion constellation — upper right, subtle */} {/* Bellatrix → Alnitak (right shoulder → belt) */} {/* Betelgeuse → Mintaka (left shoulder → belt) */} {/* Belt */} {/* Mintaka → Saiph (left leg) */} {/* Alnitak → Rigel (right leg) */} {/* Sword */} {/* Star halos */} {/* Stars */} {/* Tiny label */} ★ ORION
{children}
); } // ---- Header ---- function Header() { const nav = ['Games', 'Devlog', 'About', 'Press']; return (
O8infinitum
); } // ---- Footer ---- function Footer() { const [email, setEmail] = useState(''); const [sent, setSent] = useState(false); return ( ); } Object.assign(window, { Wordmark, OrbitBackdrop, Header, Footer });