/* global React, ReactDOM, HexGlobe, AggregationDiagram, HexShape, TweaksPanel, TweakSection, TweakSlider, TweakToggle, TweakRadio, TweakColor, TweakText, useTweaks */ const Hex = window.HexShape; /* ============================================================ Oblivions.Garden — landing Build your Garden of Eden. One hex of real Earth at a time. Powered by the TerraForge engine (the codename stays internal — public marketing surfaces Oblivions.Garden, engine credit lives in the hero attribution + footer). ============================================================ */ // Portal — escape ancestor containing blocks for modals. The Nav has // backdrop-filter: blur, which (per CSS spec) creates a containing block // for fixed-position descendants — so any `position: fixed` modal rendered // inside the Nav (e.g., SignInModal hung off SignInControl) resolves its // `inset: 0` relative to the Nav's bounding box, not the viewport. // Routing modal content through a body-level portal node sidesteps the // issue without removing the nav's blur effect. function Portal({ children }) { const [mountNode] = React.useState(() => { const el = document.createElement('div'); el.setAttribute('data-portal-root', ''); return el; }); React.useEffect(() => { document.body.appendChild(mountNode); return () => { document.body.removeChild(mountNode); }; }, [mountNode]); return ReactDOM.createPortal(children, mountNode); } // useFirebaseAuthUser subscribes to onIdTokenChanged and returns the // current Firebase User (or null when signed-out / Firebase not yet // initialized). Single source of truth for "is the user signed in?" // across all UI components. onIdTokenChanged covers sign-in/out PLUS // every token refresh (~55min cadence) so cached state stays fresh. function useFirebaseAuthUser() { const [user, setUser] = React.useState(null); React.useEffect(() => { const fb = (typeof window !== 'undefined') ? window.__firebase : null; if (!fb || !fb.onIdTokenChanged || !fb.auth) return; const unsub = fb.onIdTokenChanged(fb.auth, (u) => setUser(u || null)); return () => unsub(); }, []); return user; } function humanizeAuthError(code, message) { const map = { 'auth/invalid-email': 'That email address looks invalid.', 'auth/user-disabled': 'This account is disabled. Contact support if you think this is wrong.', 'auth/user-not-found': 'No account found for that email. Try Sign up instead.', 'auth/wrong-password': 'Wrong password — try again or click Reset password.', 'auth/invalid-credential': 'Email or password is incorrect.', 'auth/email-already-in-use': 'An account with that email already exists. Try Sign in instead.', 'auth/weak-password': 'Password must be at least 6 characters.', 'auth/popup-closed-by-user': 'Sign-in was cancelled.', 'auth/popup-blocked': 'Your browser blocked the sign-in popup. Allow popups for this site and try again.', 'auth/unauthorized-domain': 'This domain is not authorized for sign-in. The operator needs to add it in Firebase Console.', 'auth/too-many-requests': 'Too many failed attempts. Try again in a few minutes or reset your password.', 'auth/network-request-failed': 'Network error. Check your connection and try again.', 'auth/operation-not-allowed': 'This sign-in method is not enabled in Firebase Console.', }; if (code && map[code]) return map[code]; if (message) return message; return 'Sign-in failed. Please try again.'; } // SignInModal — email/password + Google sign-in popup. Firebase's // authorized-domains list (Firebase Console → Auth → Settings) must // include the serving hostname or Google rejects with // auth/unauthorized-domain. See docs/ops/firebase-setup.md §5. Markup // uses og-* classes/tokens from the Oblivions.Garden design system. function SignInModal({ open, onClose }) { const [mode, setMode] = React.useState('signin'); const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); React.useEffect(() => { if (open) { setEmail(''); setPassword(''); setErr(''); setBusy(false); } }, [open]); if (!open) return null; const fb = window.__firebase; if (!fb) { return (
e.stopPropagation()}>
SIGN IN

Firebase did not initialize. Check your network connection and reload the page.

 ); } const handleEmailSubmit = async (e) => { e.preventDefault(); setBusy(true); setErr(''); try { const fn = mode === 'signin' ? fb.signInWithEmailAndPassword : fb.createUserWithEmailAndPassword; await fn(fb.auth, email, password); onClose(); } catch (ex) { setErr(humanizeAuthError(ex && ex.code, ex && ex.message)); } finally { setBusy(false); } }; const handleGoogle = async () => { setBusy(true); setErr(''); try { const provider = new fb.GoogleAuthProvider(); await fb.signInWithPopup(fb.auth, provider); onClose(); } catch (ex) { setErr(humanizeAuthError(ex && ex.code, ex && ex.message)); } finally { setBusy(false); } }; const handleReset = async () => { if (!email) { setErr('Enter your email first, then click Reset password.'); return; } setBusy(true); setErr(''); try { await fb.sendPasswordResetEmail(fb.auth, email); setErr('Password reset link sent. Check your inbox.'); } catch (ex) { setErr(humanizeAuthError(ex && ex.code, ex && ex.message)); } finally { setBusy(false); } }; const isSignIn = mode === 'signin'; return (
e.stopPropagation()}>
{isSignIn ? 'SIGN IN' : 'CREATE ACCOUNT'}
or with email
Email
setEmail(e.target.value)} style={{ width: '100%', marginBottom: 12 }} />
Password
setPassword(e.target.value)} style={{ width: '100%', marginBottom: 16 }} /> {err && (
{err}
)}
{isSignIn && ( )}
); } // SignInControl — nav-bar button. "Sign in" when signed-out; pill + // dropdown when signed-in. Sits next to the Wishlist-on-Steam CTA; // marketing CTA is primary, sign-in is secondary for returning players. function SignInControl() { const user = useFirebaseAuthUser(); const [modalOpen, setModalOpen] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); if (!user) { return ( <> setModalOpen(false)} /> ); } const handleSignOut = async () => { setMenuOpen(false); try { await window.__firebase.signOut(window.__firebase.auth); } catch (_) { /* swallow */ } }; const label = user.displayName || (user.email ? user.email.split('@')[0] : 'Signed in'); return (
{menuOpen && (
{user.email && (
signed in as
{user.email}
)}
)}
); } const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "lead": "ember", "headlineMode": "grow", "headlineCycle": false, "headlineCycleSec": 5, "grain": 3, "showSettlements": true, "settlementStage": "city", "shardLabel": "SHARD · EARTH-1" }/*EDITMODE-END*/; // Earth-builder framing: build your own Earth, your own Eden. const HEADLINES = { build: { lead: 'Build your ', accent: 'Eden', tail: '.', sub: 'On a 1:1 reconstruction of real Earth.' }, grow: { lead: 'A city that ', accent: 'grows', tail: ' with you.', sub: 'From a single hex to a continental economy.' }, shape: { lead: 'Shape ', accent: 'real', tail: ' Earth.', sub: 'Real terrain. Real cities. Real geography.' }, yours: { lead: 'Your own ', accent: 'planet', tail: '.', sub: 'Build it the way you always wanted.' }, }; function NavGlyph({ name }) { const c = { width: 14, height: 14, viewBox: '0 0 14 14', fill: 'none', stroke: 'currentColor', strokeWidth: 1.2, strokeLinecap: 'round', strokeLinejoin: 'round' }; const g = { pillars: (), mechanics: (), economy: (), world: (), pricing: (), roadmap: (), }; return g[name] || null; } function Logo({ size = 26 }) { const r = size / 2 - 1; return ( ); } function Nav({ tweaks, setTweak }) { const links = [ { id: 'manifesto', label: 'The loop', glyph: 'pillars' }, { id: 'mechanics', label: 'Mechanics', glyph: 'mechanics' }, { id: 'economy', label: 'Economy', glyph: 'economy' }, { id: 'world', label: 'Living world', glyph: 'world' }, { id: 'roadmap', label: 'Roadmap', glyph: 'roadmap' }, { id: 'pricing', label: 'Pricing', glyph: 'pricing' }, ]; return ( ); } function Hero({ tweaks }) { // Dynamic BUILD pill — pulls from /version.json via build-info.jsx so the // hero stays in lock-step with deploys. Falls back to "v… · loading" pre-fetch. const buildInfo = (typeof window !== 'undefined' && window.useBuildInfo) ? window.useBuildInfo() : null; const buildLabel = buildInfo?.major ? `BUILD v${buildInfo.major} · shipped` : 'BUILD v… · loading'; const order = ['build', 'grow', 'shape', 'yours']; const baseIdx = Math.max(0, order.indexOf(tweaks.headlineMode)); const [cycleIdx, setCycleIdx] = React.useState(baseIdx); const [fadeKey, setFadeKey] = React.useState(0); React.useEffect(() => { setCycleIdx(baseIdx); setFadeKey(k => k + 1); }, [baseIdx]); React.useEffect(() => { if (!tweaks.headlineCycle) return; const ms = Math.max(1500, (tweaks.headlineCycleSec || 5) * 1000); const id = setInterval(() => { setCycleIdx(i => (i + 1) % order.length); setFadeKey(k => k + 1); }, ms); return () => clearInterval(id); }, [tweaks.headlineCycle, tweaks.headlineCycleSec]); const activeKey = tweaks.headlineCycle ? order[cycleIdx] : tweaks.headlineMode; const h = HEADLINES[activeKey] || HEADLINES.build; const accentClass = tweaks.lead === 'bloom' ? 'serif-bloom' : 'serif-ember'; return (
{tweaks.shardLabel} · Alpha Q4 2027 {buildLabel}

{['Build', 'Grow', 'Shape', 'Yours'].map((v, i) => { const liveKey = ['build', 'grow', 'shape', 'yours'][i]; const live = liveKey === activeKey; return ( {v}{i === 3 ? '.' : ''} {i < 3 && } ); })}

A persistent multi-shard city-builder on a 1:1 reconstruction of real Earth. Claim hex regions anywhere on the globe. Build a hierarchical economy from a single parcel up to a continent. Plant your Garden of Eden — and watch it grow into a planet.

32,194
Hexes / shard
1:1
Real-Earth scale
24/7
Server tick
SHARD VIEWER · LIVE FEED
ONLINE
Active hexes8 · player
AI-evolving26 · sage
Trade routes5 active
{ e.preventDefault(); }}> REVEAL TRAILER Drops Q3 2027 — notify me
POWERED BY
TerraForge · World Server Core
); } function SocialProof() { const channels = [ { name: 'Discord', value: '4,820', unit: 'devs in chat', glyph: 'discord', href: '#' }, { name: 'Newsletter', value: '8,200', unit: 'on the list', glyph: 'mail', href: '#wishlist' }, { name: 'Bluesky', value: '12.4k', unit: 'following devlogs', glyph: 'bluesky', href: '#' }, { name: 'GitHub', value: 'public', unit: 'design spec + RFCs', glyph: 'github', href: '#' }, ]; const press = [ { tier: 'COVERAGE', name: 'PCGamer', note: '"The most ambitious city-builder in years"' }, { tier: 'COVERAGE', name: 'Rock Paper Shotgun', note: '"SimCity meets the actual planet"' }, { tier: 'FEATURED', name: 'IndieDB', note: 'Game of the week · May 2026' }, ]; const Glyph = ({ name }) => { const c = { width: 16, height: 16, viewBox: '0 0 16 16', fill: 'currentColor' }; if (name === 'discord') return ; if (name === 'mail') return ; if (name === 'bluesky') return ; if (name === 'github') return ; return null; }; return (
Press
{press.map((p, i) => (
{p.tier} {p.name} {p.note}
))}
); } function FloatingCTA({ tweaks }) { const [show, setShow] = React.useState(false); React.useEffect(() => { const onScroll = () => { const hero = document.getElementById('top'); if (!hero) return; setShow(window.scrollY > hero.offsetHeight - 80); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, []); return ( Wishlist on Steam → ); } function Manifesto({ tweaks }) { const accentClass = tweaks.lead === 'bloom' ? 'serif-bloom' : 'serif-ember'; const beats = [ { verb: 'Build', body: 'Place a single building on real lat/long. Footprints come from OpenStreetMap. The hex is your canvas — the world is the reference.', meta: ['LAT/LONG', 'OSM FOOTPRINTS'] }, { verb: 'Grow', body: 'Watch a hex become a district. A district becomes a city. Eight aggregation layers roll up while you play — and keep rolling when you don\'t.', meta: ['8 LAYERS', 'AGGREGATING'] }, { verb: 'Shape', body: 'Carve roads, ports, rail across real geography. Distance × infrastructure sets the cost. The Andes will charge you for it.', meta: ['REAL TERRAIN', 'TRADE-ROUTES'] }, { verb: 'Yours', body: 'Buy once, play solo forever. Mods, self-hosted shards, local saves. The subscription is opt-in — only if you want the world to keep ticking.', meta: ['ONE-TIME', 'OPT-IN MMO'] }, ]; return (
The four beats

Four verbs. One loop you'll keep coming back to.

{beats.map((b, i) => (
0{i + 1}
{b.verb}.

{b.body}

{b.meta.map((m, j) => ( {m} {j < b.meta.length - 1 && ·} ))}
))}
); } function Pitch() { return (
The pitch

Other city-builders give you a blank tile.
We give you the whole Earth to plant on.

Real terrain. Real geography. Real building footprints. Pick any hex on the planet and start your own Eden — fishing village, megacity, or anything in between.

{[ { color: 'var(--og-ember-300)', tag: 'PILLAR 01', title: 'Hierarchical economy', body: 'Eight aggregation layers — building → block → district → city → metro → region → country → continent. Local production rolls up; price signals propagate down.' }, { color: 'var(--og-rite-violet)', tag: 'PILLAR 02', title: 'The hex empire loop', body: 'Claim → tend → link → trade. Extend a road across the boundary; a TradeRoute opens with the neighbor. Free placement on real terrain.' }, { color: 'var(--og-bloom-300)', tag: 'PILLAR 03', title: 'Real Earth canvas', body: 'Cesium terrain, OpenStreetMap building footprints loaded per hex, real geography. NYC is ~22 hexes. The world you already know.' }, { color: 'var(--og-rite-cyan)', tag: 'PILLAR 04', title: 'Living world server', body: 'A separate AI worker grows unoccupied hexes in game-time. Fishing villages become port towns while you sleep. Log in to a world that moved on.' }, ].map((p, i) => (
{p.tag}
{p.title}

{p.body}

))}
); } function Mechanics() { const loop = [ { n: '01', title: 'Pick your spot.', body: 'Pan a real Earth globe and drop in anywhere — a Pacific island, the Sahel, Tokyo Bay. Real terrain is already there. Real OSM footprints are already there. You arrive somewhere, not nowhere.' }, { n: '02', title: 'Place your first building.', body: 'Buildings sit on real lat/long, not a snap grid. A district forms as you fill the hex; service coverage and traffic emerge from what you actually built, not what you zoned.' }, { n: '03', title: 'Watch the numbers add up.', body: 'Buildings roll into districts. Districts roll into a city. Your city joins a metro market and your metro joins a region. Eight layers, all live, all visible on the same globe.' }, { n: '04', title: 'Extend a road. Trade opens.', body: 'Push a road segment across the hex boundary and a trade route exists with your neighbor. Distance and infrastructure set the price. The Andes will charge you for it.' }, { n: '05', title: 'Log out. World keeps ticking.', body: 'One real minute is one game day, by default. Your city accrues. AI civilizations on neighboring hexes grow on a slow tick. Come back tomorrow to a corridor that didn\'t exist last night.' }, ]; const mechs = [ { title: 'Build where you want', body: 'Drop your warehouse on the harbor. Sprawl your factory across two hexes. The grid is for the simulation — your buildings sit on real lat/long, the way they would on a map.', meta: ['real-world coords', 'OSM footprints', 'no snap-to-grid'] }, { title: 'Real geography matters', body: 'Oil in Texas. Ore in the Andes. Lithium in Atacama. What you can produce is what the actual continent under your hex can give you. Trade the rest.', meta: ['~30 resources at launch', '3–4 chain depth', 'modder-extendable'] }, { title: 'A planet, not a tile', body: 'Active hexes simulate every building. Distant hexes summarize — population, wealth, output. Walk a citizen near and the detail loads in. The whole Earth fits because most of it is sleeping.', meta: ['~32k hexes / shard', '100–1k active', 'lazy backfill'] }, { title: 'Solo, co-op, MMO — same world', body: 'Single-player runs locally. A friend joins your shard. Hosted shards run NA / EU. Same save format. Same engine. Move your city between shards in V2.', meta: ['NA / EU shards', 'self-host first-class', 'fresh-start servers'] }, ]; return (
How it plays

The core loop: claim, build, link, trade.
Then watch it grow without you.

Core loop · 5 steps PER GAME-DAY
{loop.map((s, i) => (
{s.n}
{s.title}

{s.body}

))}
{mechs.map((m, i) => (
MECH {String(i + 1).padStart(2, '0')}
{m.title}

{m.body}

{m.meta.map((t, j) => ( {t} ))}
))}
); } function EconomySection() { return (
The economy

Eight layers. One ledger.
From a single building to a continent — every transaction rolls up.

Hover a layer to inspect it. Aggregation runs every 10 ticks; downward price signals propagate within 1–N ticks. Player-active hexes simulate full detail; dormant hexes tick statistically. That's what makes a 1:1 Earth tractable on a single server.

); } function SettlementEvolution({ stage, onStage }) { const stages = [ { id: 'town', label: 'Town', res: 'RES 7', pop: '1.4k', credits: '18k', body: 'Fishing village or farming hamlet. Single market, two production chains, a handful of road segments. Lat/long-anchored buildings on real OSM footprint.' }, { id: 'city', label: 'City', res: 'RES 6', pop: '92.3k', credits: '2.8M', body: 'The player-claim unit. Downtown, mid-rise belts, port, rail-side industrial. Aggregates 7 child Res-7 districts; rolls up into a Res-5 metro market.' }, { id: 'metropolis', label: 'Metropolis', res: 'RES 5', pop: '640k', credits: '19M', body: 'Aggregate of seven cities. CBD towers, ring-highways, deepwater port, intl. airport. Statistical at the edges; full-detail at the player\'s active core.' }, ]; const cur = stages.find(s => s.id === stage) || stages[1]; return (
Settlement evolution

From frontier hex to capital metropolis.
Same backend. More density. More routes.

{stages.map(s => ( ))}
{cur.res} · {cur.label} · SHARD VIEWER RENDER
{window.__SETTLEMENT_SVGS__ ? (
) : ( {`${cur.label} )}
{cur.res}
{cur.label}

{cur.body}

Population{cur.pop}
Credits / tick¢ {cur.credits}
Sim mode{cur.id === 'metropolis' ? 'mixed' : 'full detail'}
Aggregates to{cur.id === 'town' ? 'res 6 city' : cur.id === 'city' ? 'res 5 metro' : 'res 4 region'}
↳ same engine. just more buildings.
); } function LivingWorld() { return (
A living world

The world should feel alive when you log in.

A separate AI worker iterates dormant hexes on a slow tick — fishing villages become port towns, frontier roads form trade networks, market towns form around your nearest port. All in game-time. Even when no player is in the region.

{[ { glyph: '◢', name: 'Coastal + temperate', body: 'fishing village → port town → coastal city' }, { glyph: '◤', name: 'Riverine + fertile', body: 'farming hamlet → market town → ag city' }, { glyph: '◣', name: 'Mountain + minerals', body: 'mining outpost → industrial town' }, { glyph: '◥', name: 'Arctic / tundra', body: 'frontier outpost · low growth' }, ].map((b, i) => (
{b.glyph}
{b.name}
{b.body}
))}
AI evolution worker · tick log RUNNING
{[ ['T+0042', 'spawn', 'fishing_village @ res6/8a2a1...d3f', 'ember'], ['T+0143', 'grow', 'pop 240 → 590 · port_town', 'cyan'], ['T+0309', 'trade', 'wheat ↔ tools route opened', 'bloom'], ['T+0411', 'price', 'iron +14% propagated res4 → res6', 'ember'], ['T+0578', 'spawn', 'mining_outpost @ res6/8b41c...91e', 'ember'], ['T+0612', 'event', 'drought · ag_yield -22% · 14 hexes', 'rose'], ['T+0744', 'grow', 'pop 12.4k · district promoted res7', 'cyan'], ['T+0901', 'route', 'rail link queued · 3 hexes', 'bloom'], ['T+1020', 'price', 'global iron +8% · res2 aggregate', 'ember'], ].map(([t, kind, msg, color], i) => (
{t} {kind} {msg}
))}
↳ deterministic · replayable from event log · runs on CPU
); } function RoadmapQuarterScale() { const buildLabel = 'v1.0'; const quarters = []; for (let y = 2026; y <= 2029; y++) { for (let q = 1; q <= 4; q++) quarters.push({ year: y, q }); } const hereIdx = 1; // 2026 Q2 const milestones = { 7: { label: 'V0 · MVP', color: 'var(--og-ember-300)' }, 11: { label: 'V2 · LAUNCH', color: 'var(--og-bloom-300)' }, }; return (
BUILD {buildLabel}
We are here
{quarters.map((q, i) => { const isHere = i === hereIdx; const past = i < hereIdx; const ms = milestones[i]; return (
{q.q === 1 &&
{q.year}
}
Q{q.q}
{ms &&
{ms.label}
}
); })}
); } function Roadmap() { const stops = [ { color: 'var(--og-ember-300)', phase: 'V0 · MVP', when: 'Q4 2027', title: 'Single-player on multiplayer-ready arch', desc: 'One shard. Real Earth, OSM building import, AI growing unoccupied hexes. Player claims 1–3 Res-6 hexes; backend complete.' }, { color: 'var(--og-rite-violet)', phase: 'V1', when: '2028', title: 'Friends-only multiplayer + self-host', desc: 'Invite up to ~10 to a private shard. Per-hex co-op. Self-hosting Docker image released. Modder shards begin.' }, { color: 'var(--og-bloom-300)', phase: 'V2 · LAUNCH', when: 'Q4 2028', title: 'Public hosted shards (NA / EU)', desc: 'Hundreds of concurrent per shard. Real per-hex competition. City-transfer between shards. Mod API v1.' }, { color: 'var(--og-rite-cyan)', phase: 'V3', when: '2029+', title: 'Space expansion · political layer', desc: 'Mars colonization. Res-3 country layer activated. AI asset generation production-quality.' }, ]; return (
Phasing roadmap

Each phase reuses the same backend.
Multiplayer is a toggle, not a rewrite.

{stops.map((s, i) => (
{s.phase}
{s.when}
{s.title}
{s.desc}
))}
SHIPPED
v1 — World server core is live. The persistent world ticks forward continuously — tracking every hex, every claim, every change — whether anyone is logged in or not. All 22 tasks of the v1 plan complete (2026-04-26).
); } function Pricing({ tweaks }) { return (
What you get

Buy once. Play solo forever.
Subscribe when you want the living world .

The base game is yours — full single-player simulation, your shard runs on your machine, no recurring fees. The subscription unlocks the parts that run on our infrastructure: shared persistent shards, the AI evolution worker that grows your world while you're offline, and cross-shard trade.

{/* Tier 1 */}
Tier 01 · base game ONE-TIME
Purchase · Steam / itch
$69 USD
Pay once. Yours forever. No DRM beyond Steam.
    {[ 'Full single-player on real Earth — pick any hex', 'Complete simulation: aggregation, production chains, trade', 'Self-hosted shard — runs on your machine', 'Local AI worker grows your unoccupied hexes', 'Steam Workshop mods + first-class modding API', 'Free updates through V3', ].map((feat, i) => (
  • ▸ {feat}
    • ))}
Players per shard1 · solo
World persistencelocal save
Cross-shard trade—
Wishlist on Steam →
{/* Tier 2 */}
Tier 02 · living world OPTIONAL
Subscription · cancel anytime
$9.99 / month
Adds everything that needs a server tick when you're not playing.
    {[ 'Multiplayer hosted shards (NA / EU)', 'Offline AI evolution — your city grows 24/7', 'Persistent world tick · 1 real-min = 1 game-day', 'Cross-shard trade routes + city-transfer (V2)', 'Up to 3 active shards per account', 'Priority on fresh-start launch shards', ].map((feat, i) => (
  • ▸ {feat}
    • ))}
Players per shard100s · MMO
World persistencealways-on
AI workerruns 24/7
Get notified at Alpha →
REASSURE
The subscription is opt-in. If you cancel, your single-player saves keep working — they're local. The subscription pays for the world server, not the game. Self-hosting your own multiplayer shard is also free (Docker image, V1) — you only pay if you want us to host it for you.
); } function Wishlist({ tweaks }) { const [email, setEmail] = React.useState(''); const [sent, setSent] = React.useState(false); return (
Be there for Alpha

Forge your first hex
in Q4 2027.

Wishlist on Steam to be notified at Alpha. Or drop your email for the dev newsletter — early access invites, devlogs from solo-dev to launch, behind-the-scenes from the studio.

{ e.preventDefault(); if (email) setSent(true); }} style={{ background: 'var(--og-void-2)', border: '1px solid var(--og-line-strong)', borderRadius: 10, overflow: 'hidden' }}>
Dev newsletter · enroll ~MONTHLY
{!sent ? ( <>
Your email
setEmail(e.target.value)} />
Cadence~1× / month
Audience8,200+ early
StudioOblivion Studio
) : (
You're on the list.
First devlog lands soon — check your inbox.
)}
); } function Footer() { return (
Oblivions.Garden by Oblivion Studio · est. 2026
v1 shipped · Alpha Q4 2027 · Launch Q4 2028
); } function App() { const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS); const rootRef = React.useRef(null); React.useEffect(() => { const el = rootRef.current; if (!el) return; if (tweaks.lead === 'bloom') { el.style.setProperty('--og-accent', 'var(--og-bloom-300)'); el.style.setProperty('--og-accent-soft', 'var(--og-bloom-100)'); el.style.setProperty('--og-accent-deep', 'var(--og-bloom-500)'); el.style.setProperty('--og-accent-shade','var(--og-bloom-700)'); el.style.setProperty('--og-accent-glow', 'var(--og-bloom-glow)'); el.style.setProperty('--og-accent-line', 'var(--og-line-bloom)'); el.style.setProperty('--og-accent-tint', 'rgba(108,212,154,0.10)'); el.style.setProperty('--og-accent-tint-2','rgba(108,212,154,0.04)'); } else { el.style.removeProperty('--og-accent'); el.style.removeProperty('--og-accent-soft'); el.style.removeProperty('--og-accent-deep'); el.style.removeProperty('--og-accent-shade'); el.style.removeProperty('--og-accent-glow'); el.style.removeProperty('--og-accent-line'); el.style.removeProperty('--og-accent-tint'); el.style.removeProperty('--og-accent-tint-2'); } }, [tweaks.lead]); return (
); } ReactDOM.createRoot(document.getElementById('root')).render();