Repository navigation
feat(website): redesign the interface around one shell lit by the local star - #41
Merged
Merged
Conversation
…imitives The interface had no shared vocabulary: every stylesheet set its own colours, 6–9px monospace capitals and radii, and the typefaces came from Google Fonts at first paint, so offline visits fell back to a system face. This adds one token file (ink, surfaces, a type scale, spacing, radii, motion), ships Archivo as a bundled variable font and drops Google from the page and the content security policy, and adds the primitives the redesign is built from: Button, Icon, TabBar, Segmented, Kbd and Spinner, a chrome context, scene readout hooks, `starLight` for taking the accent from the local star's blackbody colour, and `readable` for bringing capitalised readings down to sentence case. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Each of the five destinations laid out its own chrome — a brand bar, a three-button deck with redundant captions, an identity column, a card of readings and a permanent shortcut strip — so the same controls were written five times, labelled in tiny capitals, and the palette could only be reached from a keyboard. Every destination now describes itself through an identity and a panel model and renders inside `DestinationShell`: a top bar with a "Go anywhere" search field, Explore, and a clear-view switch (the XR button appears only when the device can honour it); the name, its classification and the places it leads to at the lower left; the readings in an inspector on the right. On a phone the name and readings share a bottom sheet that rests at a peek and is dragged, flicked or tapped to half or full height. The accent is the blackbody colour of the local star, the system diorama's clock and ephemeris controls become real transport buttons and segmented rates, and every reading, status and recovery screen is written in sentence case. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Discover stacked a numbered section rail, a title, a search box, three tabs of collections, kinds and filters, and a results grid, each catalog with its own copy of the markup and styles and a dead dialog mode it was never opened in. On a phone the rail labels collapsed into each other. Explore keeps the sections in a grouped rail (Browse, Learn, Create) that becomes a row of tabs on a phone, and every catalog is assembled from the same parts: a search field with a random pick beside it, one scrolling rail of collections and kinds with the active one's note beneath, a toolbar saying what is shown, and result cards drawn from the same recipes the renderer uses. The planet catalog's physical filters open from the toolbar instead of a third tab. World Forge shows a live preview of the object as its sliders move and keeps the generate button pinned in reach. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The atlas, the signal and mass–radius charts and the H–R diagram set their ticks and readouts at 6–7px in capitals, and the palette could only be found by knowing its shortcut and drew its results with typographic glyphs. They now read from the shared tokens: chart text is enlarged and sentence case, series take the local star's light, the atlas's view switch is a segmented control and its legend a row of toggle chips. The palette has a proper icon per destination, shows when it is asking the archives, and spells its keys out in a footer. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The running tour sat in a capitalised strip that competed with the destination's own panels, and the tour list in Explore was a column of unstyled text. The caption is now a card under the top bar with a progress track, the stop count, and Previous and "Next: <stop>" actions; on a phone it stays clear of the bottom sheet. Explore lists each tour as a card that draws its route and says where it starts and ends. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…igation Tab toggled the clear view, which took the one key keyboard users move between controls with: on the main screen, pressing it hid the interface instead of moving focus. The clear view now toggles with H, the top bar's switch and the restore button that remains when the interface is hidden; Tab is never intercepted. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
…face The journey suite addressed the old deck, capitalised copy and Discover dialog. It now drives the top bar, Explore, the shared catalogs, the World Forge's tabs and fields, the bottom sheet on a phone, the H shortcut and its restore button, and adds journeys for the search field opening the palette and for Tab never hiding the interface. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The README and the headset guides still named Discover and did not say how the interface is laid out, what each key does, or where its parts live. They now call it Explore, describe the shared layout and the star-lit accent, list the keyboard shortcuts, and map the interface's tokens, primitives, shell and catalog parts for contributors. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Exora's interface was hard to read and hard to use. Labels were set in 6–9px monospace capitals, the
same controls were laid out separately by five experiences, the palette could only be found by
knowing its shortcut, and Tab hid the interface instead of moving focus. This replaces the whole
presentation layer with a new design system and one shell. The scene engine and the data and
physics modules are unchanged apart from a few copy fixes.
What changed
bundled as a variable font with Google Fonts removed from the page and the CSP, and shared
primitives:
Button,Icon,TabBar,Segmented,Kbd,Spinner.the destination (
star-light.ts), so GJ 674's M dwarf reads warm, Sirius reads cold, and a blackhole takes its disk's hue.
DestinationShellprovides a top bar ("Go anywhere"search, Explore, hide the interface, and XR only when the device supports it), the name and its
onward destinations at the lower left, and the readings in an inspector on the right. On a phone
the name and readings share a bottom sheet you drag, flick or tap between peek, half and full.
Every catalog is built from the same search field, one collection rail and one result card. The
planet filters open from the toolbar, and World Forge shows a live preview as its sliders move.
icons per destination, and the tour caption is a card under the top bar.
readable()brings readings that are still computed incapitals down to sentence case and keeps acronyms and units.
buttons keep their accessible names.
Validation
vp check: passes.vp run -r test: 389 website, 103 API and 62 worldgen unit tests pass.vp run website#test:browser:full: 52 journeys pass on desktop and mobile Chromium.vp run -r build: passes, with the JavaScript budget at 417 KB initial against a 450 KB limit.🤖 Generated with Claude Code