A single-file marketing one-pager positioning GLOS as the first gamified, sovereign life OS — built to capture early-access signups
I designed and built a standalone pitch site for GLOS — my personal life operating system — to communicate the product's positioning, moat, and character system to prospective early users. Pure HTML, zero dependencies, shipped in one file.
The brief
GLOS needed a public face before it had a public audience. The product — a gamified personal life OS with an embedded AI identity, Oura/Hevy integrations, XP mechanics, and a sovereign vault — is genuinely novel, but novelty is hard to explain. The brief was to make someone feel the gap in their current tools, then show exactly why GLOS fills it differently.
What I built
A single-file pitch site (index.html, no build step, no framework, no external JS) that walks a visitor through four beats: the problem (tools that reset and shame), the mechanism (a three-step live loop), the product (8 system features + 2 living character archetypes), and the moat (5 unoccupied or rare competitive positions). It ends with an early-access waitlist capture form.
The site is entirely self-contained — fonts load from Google Fonts, everything else is inline. It runs from a file open in a browser with no server required.
How it’s built
The design system is built in CSS custom properties: five dark-palette tokens (base, surface, surface-2, line, muted) plus three accent colors (violet, cyan, pink) that run through gradients, glow shadows, and animated aurora blobs. Typography is a deliberate three-font stack — Space Grotesk for display, Inter for body, Space Mono for all monospace / data labels — creating a clear visual hierarchy without a design tool dependency.
Animation is done with two native browser primitives: IntersectionObserver for scroll-triggered reveals (staggered with data-d delay attributes), and CSS @keyframes for the aurora parallax, gradient shift, marquee tracks, and floating orbs. Mouse parallax on the aurora layers is a single mousemove listener — no library.
The waitlist form is wired to a visual confirmation state only; a code comment marks the integration point for a Supabase waitlist table on deploy.
Why it matters
This page demonstrates that high-production-value marketing design doesn’t require a stack. The entire site — atmospheric backgrounds, animated type, HUD corner-tick detail on feature cards, dual-track scrolling marquee, responsive grid — ships as 359 lines in a single file. For a solo builder, that’s the correct tradeoff: maximum buyer signal, minimum infrastructure surface area to maintain.
It also shows the GLOS positioning clearly: not a productivity app, not a habit tracker, but the intersection of gamification OS + vault-first memory + sovereign AI identity — a combination the moat section argues is unoccupied by all 21 mapped competitors.
Want something like this?
That's the kind of thing I build. Tell me about yours.