Vive — Decision Memory for Teams

Vive is a design study: a scroll-driven Three.js experience with a landing page composed over it. The subject is a great wheel space station in orbit around Saturn, and the station is the archive — every module clamped to its ring is one decision record, and the ring's interior is a walkable gallery.

The journey is one continuous sweep. The wheel whole, closing, through the structure past the hub, along the gallery inside the ring, and out into an observation room whose window looks at the planet's limb. Scroll position is journey position; there are no cuts.

vive-hero.vercel.app

Structure

.
├── index.html            the whole document; one page, five narrative beats
├── src/
│   ├── styles/           two sheets: type scale, then the page
│   └── js/               config + core / scene / motion / ui modules
├── assets/
│   └── generated/        the Open Graph share card, a captured frame of beat 00
├── vendor/               Three.js, the two fonts, Phosphor, and their licenses
└── vercel.json           the response headers a meta CSP cannot carry

No framework, no build step, no runtime network dependency. Every asset path is relative, so the site runs unchanged from a subdirectory rather than a domain root.

src/js/main.js publishes window.__SCENE__ with setProgress, setPointer, sample and stats. src/styles/type.css is the only place a font-size is declared anywhere in the project.

Run locally

The page is ES modules, so it needs to be served over HTTP rather than opened from the filesystem. Any static server will do:

python3 -m http.server 4429

Then open http://127.0.0.1:4429/. Append ?shot=0 through ?shot=4 to open the journey at a named camera key.

How it behaves

• No WebGL — the canvas is removed and the page falls back to a static gradient. All copy is retained.
• No JavaScript — the page is fully readable. Reveal styles are gated behind a class the script adds.
• Reduced motion — the scene still renders and still tracks scroll, but the clock freezes and transitions are removed.

Typography is solved against the live render rather than against a plate: there are no scrims anywhere, and every block of running text sits where its own frame measured dark. On phones there is no safe column at any beat — Saturn's disc alone is wider than the frame — so at ≤767px the copy takes the same tinted glass the panels use. Desktop keeps its measured placement and no backdrop.

Deploy

The site is static and needs no build step, so any host that serves files will work. Production is Vercel, deployed from this directory:

vercel --prod

One thing is not relative. Open Graph requires absolute URLs, so the canonical link and the share card carry the origin literally. A fork served from anywhere else needs those changed and nothing more:

sed -i '' "s|vive-hero.vercel.app|your-host/your-path|g" index.html

Concept notice

Vive is not a real product. Names, companies and every figure on the page are invented and labelled as illustrative. The integrations row makes a "works with" claim about real tools — a capability claim — deliberately not a "trusted by" claim.

License

Published for reference and study. Read it, learn from it, run it locally, build your own thing from the ideas — but it is not a template, and copying, republishing or redeploying it is not permitted. See LICENSE.

The runtimes and fonts vendored in vendor/ are excluded and keep their own terms, which are recorded in THIRD_PARTY_NOTICES.md.