:root { color-scheme: dark; --nojs-nav-height: 79px; --nojs-stage-top: calc(var(--nojs-nav-height) + clamp(2rem, 5vh, 5rem)); } * { box-sizing: border-box; } html { min-width: 320px; background: #02040a; scroll-behavior: smooth; } body { margin: 0; background: #02040a; color: #fff; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } .nojs-home { min-height: 100vh; min-height: 100svh; overflow: hidden; background: #02040a; } .nojs-header { position: absolute; inset: 0 0 auto; z-index: 10; height: var(--nojs-nav-height); } .nojs-header__inner { display: flex; align-items: center; gap: 1.25rem; width: min(100%, 98rem); height: 100%; margin: 0 auto; padding: 1rem 2rem; } .nojs-nav, .nojs-header__actions, .nojs-header__brand { display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(6, 8, 16, 0.72)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 12px 30px rgba(0, 0, 0, 0.26); backdrop-filter: blur(18px) saturate(1.2); } .nojs-nav { gap: clamp(1rem, 2.1vw, 2rem); padding: 0.65rem 1.25rem; } .nojs-header__brand { border: 0; background: transparent; box-shadow: none; } .nojs-header__brand img { display: block; width: auto; height: 2.25rem; } .nojs-nav a, .nojs-header__actions a { color: rgba(255, 255, 255, 0.82); font-size: 0.875rem; font-weight: 650; text-decoration: none; white-space: nowrap; } .nojs-header__actions { margin-left: auto; padding: 0.72rem 1.2rem; } .nojs-header__actions--waitlist { border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.92); box-shadow: 0 0 26px rgba(255, 255, 255, 0.3); } .nojs-header__actions--waitlist a { color: #050817; } .nojs-hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #02040a; } .nojs-hero__background { position: absolute; inset: 0; display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; } .nojs-hero::before { content: ""; position: absolute; inset: 0; opacity: 0.18; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 76%); mask-image: linear-gradient(to bottom, #000, transparent 76%); } .nojs-stage { position: absolute; top: var(--nojs-stage-top); left: 50%; z-index: 2; width: min(calc(100% - 4rem), 94rem); transform: translateX(-50%); perspective: 1600px; } .nojs-editor { overflow: hidden; width: 100%; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 1rem; background: rgba(8, 11, 22, 0.94); box-shadow: 0 28px 90px rgba(0, 0, 0, 0.46), 0 0 44px rgba(118, 87, 217, 0.12); -webkit-mask-image: radial-gradient(ellipse 118% 122% at 50% -4%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 76% 112% at 9% 4%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 82% 108% at 91% 2%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 74% 96% at 34% 18%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 78% 100% at 66% 16%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 48% 70% at 50% 32%, #000 0%, #000 60%, transparent 80%, transparent 100%); mask-image: radial-gradient(ellipse 118% 122% at 50% -4%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 76% 112% at 9% 4%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 82% 108% at 91% 2%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 74% 96% at 34% 18%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 78% 100% at 66% 16%, #000 0%, #000 60%, transparent 80%, transparent 100%), radial-gradient(ellipse 48% 70% at 50% 32%, #000 0%, #000 60%, transparent 80%, transparent 100%); -webkit-mask-position: 50% 100%; mask-position: 50% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; transform: perspective(1600px) translate3d(0, 28px, 0) rotateX(6deg) rotateY(0deg) scale(0.88); transform-origin: 50% 0; transform-style: preserve-3d; } .nojs-editor__toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr) 4.25rem; align-items: center; gap: 0.8rem; min-height: 3.85rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.055); } .nojs-editor__dots { display: flex; gap: 0.5rem; } .nojs-editor__dots i { display: block; width: 0.75rem; height: 0.75rem; border-radius: 50%; } .nojs-editor__dots i:nth-child(1) { background: #ff5f57; } .nojs-editor__dots i:nth-child(2) { background: #ffbd2e; } .nojs-editor__dots i:nth-child(3) { background: #28c840; } .nojs-editor__address { display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: rgba(0, 0, 0, 0.26); padding: 0.45rem 0.75rem; color: rgba(255, 255, 255, 0.66); font-size: 0.875rem; font-weight: 600; } .nojs-editor__address img { width: 1.125rem; height: 1.125rem; border-radius: 0.3rem; } .nojs-editor__poster { display: block; width: 100%; height: auto; aspect-ratio: 1740 / 960; -o-object-fit: cover; object-fit: cover; } .nojs-copy { position: absolute; right: 1.25rem; bottom: calc(var(--nojs-stage-top) + 28px); left: 1.25rem; z-index: 4; width: min(calc(100% - 2.5rem), 54rem); margin: 0 auto; text-align: center; } .nojs-copy__brand { margin: 0 0 1rem; color: rgba(255, 255, 255, 0.58); font-size: clamp(0.875rem, 1.3vw, 1rem); font-weight: 650; letter-spacing: 0.08em; } .nojs-copy h1 { max-width: 54rem; margin: 0 auto; color: #fff; font-size: clamp(1.35rem, 5.2vw, 3.5rem); font-weight: 650; line-height: 0.95; letter-spacing: -0.06em; } .nojs-copy h1 strong { background: linear-gradient(110deg, #8da6ff, #d9cbff); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nojs-copy__description { max-width: 30.625rem; margin: 1.5rem auto 0; color: rgba(255, 255, 255, 0.68); font-size: 1.25rem; line-height: 2rem; } .nojs-copy__actions { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.25rem; } .nojs-button { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #fff; padding: 0.8rem 1.5rem; color: #050817; font-size: 0.875rem; font-weight: 700; text-decoration: none; } .nojs-link { color: rgba(255, 255, 255, 0.58); font-size: 0.875rem; text-decoration: none; } .nojs-details { width: min(calc(100% - 2.5rem), 54rem); margin: 0 auto; padding: 6rem 0; color: rgba(255, 255, 255, 0.66); line-height: 1.75; } .nojs-details h2 { margin: 0; color: #fff; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -0.045em; } .nojs-details p, .nojs-details ul { margin-top: 1.5rem; } .nojs-details a { color: #d8dcff; } @media (max-height: 940px) and (min-width: 768px) { :root { --nojs-stage-top: var(--nojs-nav-height); } .nojs-copy { bottom: var(--nojs-stage-top); } } @media (max-width: 767px) { :root { --nojs-nav-height: 87px; --nojs-stage-top: 111px; } .nojs-header__inner { gap: 0.75rem; padding: 1rem 1.25rem; } .nojs-nav { padding: 0.72rem 1rem; } .nojs-nav a:not(.nojs-header__brand) { display: none; } .nojs-header__brand img { height: 2rem; } .nojs-header__actions--contact { display: none; } .nojs-header__actions--waitlist { padding: 0.9rem 1.2rem; } .nojs-header__actions a { font-size: 0.75rem; } .nojs-hero { min-height: 844px; } .nojs-stage { width: min(calc(100vw - 2rem), 22.375rem); } .nojs-editor { transform: perspective(1600px) translate3d(0, 88px, 0) rotateX(12deg) rotateY(0deg) scale(0.98); } .nojs-editor__toolbar { grid-template-columns: auto minmax(0, 1fr) 1.5rem; gap: 0.35rem; min-height: 2.5rem; padding: 0.3rem 0.45rem; } .nojs-editor__dots { gap: 0.3rem; } .nojs-editor__dots i { width: 0.45rem; height: 0.45rem; } .nojs-editor__address { gap: 0.3rem; padding: 0.25rem 0.45rem; font-size: 0.68rem; } .nojs-editor__address img { width: 0.72rem; height: 0.72rem; } .nojs-copy { top: 385px; right: 1.25rem; bottom: auto; left: 1.25rem; width: auto; } .nojs-copy__brand { max-width: 18rem; margin-right: auto; margin-bottom: 1rem; margin-left: auto; font-size: 0.875rem; line-height: 1.45; } .nojs-copy h1 { font-size: clamp(1.35rem, 5.2vw, 3.5rem); line-height: 0.95; } .nojs-copy__description { margin-top: 1.5rem; font-size: 1.125rem; line-height: 2rem; } .nojs-copy__actions { flex-direction: column; gap: 0.85rem; margin-top: 2.25rem; } }

Join Waitlist

The Engine Is Uverse. The Universe Is Yours.

Build games in the browser.
Ship them natively.

Create one project in the browser. Publish it to the Web or ship dedicated native builds for Windows, macOS, Linux, iOS, and Android.

Watch the demo → Join the waitlist

Share a playable WebGPU build for instant browser feedback, or send native builds for platform-specific QA. Reviewers do not need Uverse, the source project, or a matching development environment.

No editor installation
No project archive
No version matching

Home · Demo · About · Articles · Privacy Policy